“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第2篇文章，点击查看活动详情”
接上上次写的我们需要让视角随着鼠标转动而转动，我们需要在给物体在加上轨道，也就是这个OrbitControls大家可以看官网截图
如果大家想看更加详细了解，可以看官网，这里也只是使用，复杂使用后面会使用
// 添加轨道 大家可以想象一下，轨道其实就是相当于把相机放在了一个滑轨上，可以360度的去观看
let orbitControls = new OrbitControls(camera,renderer.domElement)
// 1. 相机，让哪一个相机围绕目标运动。默认目标是原点。立方体在原点处。
// 2. 渲染的画布dom对象，用于监听鼠标事件控制相机的围绕运动
后面添加了坐标系，方面我们调试动画或者位置，大家可以看一下官网截图
添加坐标系js
// 添加坐标 AxesHelper
const axesHelper = new THREE.AxesHelper( 5 );
// 场景添加坐标系
scene.add(axesHelper)
添加之后的状态
添加完成坐标轴的状态
我们想让其移动我们可以使用创建物体方法里position设置 有两种设置方式
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(geometry,cun)
// 3d物体移动
// cube.position.set(-2,0,0) x y z 三个参数分别是x轴 y轴 z轴 这是一种方式
cube.position.x = 0 // 直接设置相对应的 x y z属性是第二种方式(这种方式用的比较多)
这里也用到了 equestAnimationFrame
equestAnimationFrame 是HTML5的新特性，和setTimeout，setInterval不一样 requestAnimationFrame比后两者精确，采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。
requestAnimationFrame是由浏览器专门为动画提供的API，
这是有requestAnimationFrame的方法，需要每个系统时间间隔都需要刷新一次
function render() {
// 物体移动
cube.position.x +=0.01
if (cube.position.x>=5) {
cube.position.x = 0
}
renderer.render(scene,camera)
// 渲染下一桢
requestAnimationFrame(render)
}
render()
这是代码块
