1. three.js快速入门
入门案列
一个最简单的three.js项目,需要用到的对象有4个 :
Scene(场景)
Camera(相机)
Renderer(渲染器)
Mesh(网格模型)
其中,Scene好比我们的办公室,是用来存储办公用品。Camera和Renderer好比办公室的闭路电视。Camera就是闭路电视,
Renderer是什么类型的闭路电视,是黑白的还是彩色的。Mesh就是办公室的电脑、桌椅、职员等。
例子
物体旋转
单单只有一个黄色的立方体,似乎没什么看头。接下来让我们把这个立方体围绕着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(环境光)
例子