这是今天分析的 demo,这是源码。
下面是要分析的内容:
1. 第一人称控制器
// 初始化第一人称控制器,类似 cs 等第一人称控制器
controls = new THREE.FirstPersonControls(camera);
// 相机的移动速度
controls.movementSpeed = 500;
// 鼠标移动查看速度
controls.lookSpeed = 0.1;
2. 初始化场景
// 设置背景颜色
scene.background = new THREE.Color(0xaaccff);
// 指定场景中的雾为指数雾,参数为雾的颜色和雾的密度会增长多快
scene.fog = new THREE.FogExp2(0xaaccff, 0.0007);
3. 设置时间相关的对象
// 初始化时间相关的对象
clock = new THREE.Clock();
// 每一帧的时间
var delta = clock.getDelta();
// 从开始到现在总共的时间
var time = clock.getElapsedTime() * 10;
4. 海浪的波动——海浪的波动实质是将平面翻转,通过平面宽度和高度分段数,将平面切成很多小片。
geometry = new THREE.PlaneBufferGeometry(20000, 20000, worldWidth – 1, worldDepth – 1);
geometry.rotateX(– Math.PI / 2);
小片的数量等于 worldWidth * worldDepth,遍历小片,以时间和小片序号为参数,计算小片在 y 轴的位置并设置。
// 获取物体的属性
var position = geometry.attributes.position;
// 控制波浪的波动, position.count = worldWidth * worldDepth
for (var i = 0; i < position.count; i ++) {
var y = 35 * Math.sin(i / 5 + ( time + i) / 7 );
position.setY(i, y);
}
position.needsUpdate = true;