1.three.js快速入门

入门案列

一个最简单的three.js项目，需要用到的对象有4个 ：

Scene（场景）

Camera（相机）

Renderer（渲染器）

Mesh（网格模型）

其中，Scene好比我们的办公室，是用来存储办公用品。Camera和Renderer好比办公室的闭路电视。Camera就是闭路电视，

Renderer是什么类型的闭路电视，是黑白的还是彩色的。Mesh就是办公室的电脑、桌椅、职员等。

例子 

第一个3D场景

 

物体旋转

单单只有一个黄色的立方体，似乎没什么看头。接下来让我们把这个立方体围绕着y轴旋转。

网格模型中，使用rotation属性可以使物体发生旋转。如果需要物体不断的旋转，则需要调用requestAnimationFrame + Renderer

的render方

法。如 : 

//更新函数
function updata(){
    mesh.rotation.y +=0.01; //旋转网格体的y轴
    renderer.render(scene, camera);  //重要，重新渲染画面
    requestAnimationFrame(updata);
}
updata();

例子 

旋转动画、requestAnimationFrame周期性渲染

 

控制器OrbitControls

通过Three.js的相机控件OrbitControls.js可以对Threejs的三维场景进行缩放、平移、旋转操作，本质上改变的并不是场景，而是

相机的参数，相机的位置角度不同，同一个场景的渲染效果是不一样，比如一个相机绕着一个场景旋转，就像场景旋转一样。

使用OrbitControls之前，你需要在你的项目中引入OrbitControls.js，主要代码 ：

//控制器
let orbitControls = new THREE.OrbitControls(camera);

//添加change事件
orbitControls.addEventListener('change', function(){

    //重新渲染
    renderer.render(scene, camera); 

});

OrbitControls需要一个相机对象，然后添加chang事件，若change事件被触发则重新调用渲染器的render方法。

例子

鼠标操作三维场景旋转缩放

 

材质和光源

在现实的生活中，不同的材质被光源照射后，会产生不同的反应。比如一辆汽车

在threejs中，并不是所有材质都会对光源产生反应。本章只介绍一种会对光源产生反应的材质MeshLambertMaterial（兰伯特材质）以及两种光源PointLight（点光源）、AmbientLight（环境光）

例子

材质与光照效果