THREE.js 学习笔记（一） - jerrylsxu(2)_H5之家 - 中国HTML5教程资源分享第一站

geometry = new THREE.SphereGeometry( radius, 100, 50 );
geometry.computeTangents();
meshPlanet = new THREE.Mesh( geometry, materialNormalMap );
meshPlanet.rotation.y = 1.3;
meshPlanet.rotation.z = tilt;
scene.add( meshPlanet );

最后看一下这个添加到scene里的Mesh的组成图

绘图2

2. 建月球和云层也是依法炮制，云层因为是png格式所以有半透明效果。

3. 创建平行光

创建一个光照是很简单的，tree.js的灯光对象主要就是保存灯光参数的作用，而光照的实际计算是放在shader里，我们暂时不用关心

dirLight = new THREE.DirectionalLight( 0xFFFFFF );
dirLight.position.set( -1, 0, 1 ).normalize();
scene.add( dirLight );

场景的互动

sample中我们可以使用鼠标控制摄像机的旋转，three.js为我们提供一些常用的摄像机控制接口，这个sample里用的是轨迹球

controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.2;

controls.noZoom = false;
controls.noPan = false;

controls.staticMoving = false;
controls.dynamicDampingFactor = 0.3;

controls.minDistance = radius * 1.1;
controls.maxDistance = radius * 100;

我们可以在src/extras/controls下面看到几个常用的摄像机控制

渲染

我们最后来看看render函数里的代码

var t = new Date().getTime(),
dt = ( t - time ) / 1000;
time = t;

meshPlanet.rotation.y += rotationSpeed * dt;
meshClouds.rotation.y += 1.25 * rotationSpeed * dt;

var angle = dt * rotationSpeed;

meshMoon.position = new THREE.Vector3(
Math.cos( angle ) * meshMoon.position.x - Math.sin( angle ) * meshMoon.position.z,
0,
Math.sin( angle ) * meshMoon.position.x + Math.cos( angle ) * meshMoon.position.z
);
meshMoon.rotation.y -= angle;

controls.update();

renderer.clear();
renderer.render( scene, camera );

这个函数主要做了每一帧都要做的几件事：

最后render函数里需要两个参数，scene和camera，我们如果看下render里的代码话就可以知道，每次render的时候，都需要遍历一遍scene graph，渲染里面每个需要渲染的对象，而摄像机的作用就只是提供一个视角变换矩阵和投影矩阵。这个以后看WebGLRenderer里的代码的时候会继续深入。

这个函数会使用setInterval定时调用，来实现动画的效果。