three.js(webGL库)

1.场景||网格，灯光||相机，渲染器。>>渲染
2.`
var scene = new THREE.Scene();//创建一个场景

var geometry = new THREE.BoxGeometry(100,100,100);场景的集合形状
var material = new THREE.MeshLambertMaterial({color:0xff0000});//材质
var mesh = new THREE.Mesh(geometry,material);//网格系统。
scene.add(mesh);//将网格添加到场景当中

var light = new THREE.PointLight(0xffffff);//灯光的设置。
Light.position.set(300,400,200);
scene.add(light);

var camera = new THREE.PerspectiveCamera(40, 800/600, 1, 1000);//相机的设置。
camera.position.set(200,200,200);
camera.lookAt(scene.position);

var renderer = new THREE.WebGLRenderer();//渲染器的设置
renderer.setSize(800,600);
document.body.appendChild(renderer.domElement);

renderer.render(scene,camera);//进行渲染。
`
3.相机的改变。
function render(){
renderer.render(scene,camera);
}
var controls = new THREE.OrbitControls(camera);
controls.addEventListener(‘change’,render);//前一个是DOM事件，不加’on’，后一个是一个函数。
4.scene.add(new THREE.AmbientLight(0x333333)); 对象的表面的氛围颜色。
5.引入第三方模型。
var loader = new THREE.OBJLoader();//创建对象
loader.load(‘dog.obj’,function(dogObject){
scene.add(dogObject);
});//引入对象，函数中执行在场景中添加此对象。还可以进行其它操作，比如缩放等。
6.引入带纹理的第三方模型。
var loader = new THREE.OBJMTLLoader();
loader.load(‘dog.obj’,’dog.mtl’,function(dogObject){
scene.add(dogObject);
})
7.加载时由于异步传输可能会出现加载不完善的情况。
解决方案：
再增加一个函数
function animate(){
requestAnimationFrame(animate);
render();//渲染
}
8.贴图。
在材质中。
map:THREE.ImageUtils.loadTexture(‘logo-webgl.png’)

three.js查看英文文档。