ThreeJS制作动画小结

一.three.js制作动画的基本步骤

1.创建场景对象

var scene = new THREE.Scene();

2.场景中添加网格模型

创建网格对象模型的方法需要立方体和材质对象两个参数

a.创建一个立方体

var geometry = new THREE.SphereGeometry(60, 40, 40);//创建一个球体几何体 
//或者 var geometry = new THREE.BoxGeometry(100, 100, 100);//创建立方体

b.创建材质对象

var material = new THREE.MeshLambertMaterial({color: 0x0000ff});//材质对象

c.创建网格对象模型

var mesh = new THREE.Mesh(geometry, material);//网格对象模型

d.场景中添加网格对象模型

scene.add(mesh);

3.场景中添加光源

光源有多种,可以同时设置多种光源

a.添加点光源

var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300);点光源的位置
scene.add(point);

b.添加环境光

var ambient = new THREE.AmbientLight(0x444444);//环境光不需要设置位置
scene.add(ambient);

各种光源简单介绍:

•  AmbientLight(环境光）/这是一种基础光源，它的颜色会添加到整个场景和所有对象的当前颜色上
• PointLight(点光源)/空间中的一点，朝所有的方向发射光线
• SpotLight(聚光灯光源)/这种光源有聚光的效果，类似台灯、天花板上的吊灯，或者手电筒
• DirectionLight(方向光)/也称为无限光。从这种光源发出的光线可以看着平行的。例如，太阳光
• HemishpereLight(半球光)/这是一种特殊光源，可以用来创建更加自然的室外光线，模拟放光面和光线微弱的天空
• AreaLight(面光源)/使用这种光源可以指定散发光线的平面，而不是空间中的一个点
• LensFlare(镜头眩光)/这不是一种光源，但是通过LensFlare可以为场景中的光源添加眩光效果

4.相机指向场景对象

a.创建相机对象需要的参数

var width = window.innerWidth;var height = window.innerHeight;
var k = width / height;//窗口的宽高比
var s = 200;//三维场景显示范围控制系数,系数越大,显示的范围越大

b.创建相机对象

var camera = new THREE.OrthographicCamera(-s*k, s*k, s,-s, 1000);

c.设置相机的位置

camera.position.set(200, 300, 200);

d.相机指向场景对象

camera.lookAt(scene.position);

5.渲染器对象渲染场景和相机

a.创建渲染器对象

var renderer = new THREE.WebGLRenderer();

b.设置渲染区域尺寸

renderer.setSize(width, height);

c.设置渲染区域的背景颜色

renderer.setClearColor(0xb9d3ff, 1);

d.body元素中插入canvas对象

document.body.appendChild(renderer.domElement);

也可以在其他元素中插入canvas对象

e.执行渲染操作

renderer.render(scene, camera);

注:需要多次渲染(让动画运动起来),则使用requestAnimationFrame多次调用渲染操作