章节二、three.js开发入门与调试设置02；

一、轨道控制器查看物体；

1、基本概念

轨道控制器（OrbitControls）可以使得相机围绕目标进行轨道运动；

2、代码样例

// 七、创建轨道控制器（相机围绕着物体捕捉视角）
const controls = new OrbitControls(camera,renderer.domElement,)function render() {renderer.render(scene , camera);// 请求动画帧：渲染下一帧的时候，会重新执行这个函数requestAnimationFrame(render);
}// 起始动画
render();

二、添加坐标辅助器；

1、基本概念

用于简单模拟3个坐标轴的对象；红色代表X轴、绿色代表Y轴、蓝色代表Z轴；

2、代码样例

// 八、添加坐标轴辅助器，数字代表轴的线段长度，默认为1
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

三、设置物体移动；

1、基本概念

物体对象的position熟悉，表示对象局部位置的Vector3，默认值为 (0,0,0) ；

2、代码片段

// 修改物体的位置方法1 (X,Y,Z)
// cube.position.set(5,0,0);// 修改属性改变X轴的位置方法2
cube.position.x = 3;

function render() {// 1.实时移动cube物体位置cube.position.x += 0.01;if(cube.position.x > 5){cube.position.x = 0;} // 2.渲染画面renderer.render(scene , camera);// 请求动画帧：渲染下一帧的时候，会重新执行这个函数requestAnimationFrame(render);
}

四、物体的缩放与旋转；

1、基本概念

设置物体的缩放属性：scale；

设置物体的局部旋转属性：rotation，以弧度来表示；属性order值应用于旋转顺序，默认值为'XYZ'：意味着先绕X轴旋转，然后是Y轴，最后是Z轴；

2、代码片段

// 01、设置物体的缩放
cube.scale.set(3,2,1);
cube.scale.x = 5;// 02、设置物体的局部旋转，以弧度来表示；
// 属性order值应用于旋转顺序，默认值为'XYZ'：意味着先绕X轴旋转，然后是Y轴，最后是Z轴；
cube.rotation.set(Math.PI / 4, 0 , 0, 'XYZ');

function render() {// 1.实时移动cube物体位置cube.position.x += 0.01;if(cube.position.x > 5){cube.position.x = 0;} // 2.循环旋转cube.rotation.x += 0.01;// 3.渲染画面renderer.render(scene , camera);// 请求动画帧：渲染下一帧的时候，会重新执行这个函数requestAnimationFrame(render);
}

五、应用 requestAnimationFrame 正确处理动画运动；

1、基本概念

动画运动时快时慢，如何保证其性能？

2、代码片段

function render(time) {// 1.实时移动cube物体位置// cube.position.x += 0.01;// if(cube.position.x > 5){//     cube.position.x = 0;// }// 循环旋转角度// cube.rotation.x += 0.01;// 2.正常的电脑1秒是60帧，每一帧的间隔时间是 1000ms / 60帧 = 16毫秒；// 传入time，表示当前帧的时间，每一帧时间间隔不均匀，导致前进的距离大小不等; // 移动距离 = 速度（速度为1） * 时间；就可以保证物体移动距离均匀，不是时快时慢；let t = (time / 1000) % 5;cube.position.x = t * 1;console.log("time", time);console.log("position", t);// 3.渲染画面renderer.render(scene , camera);// 请求动画帧：渲染下一帧的时候，会重新执行这个函数    requestAnimationFrame(render);
}