6.设置物体移动
我们知道，物体是Mesh，而Mesh和相机一样是继承于Object3D，它有一个position（位置）属性：这是一个三维向量对象。
//修改物体的位置
cube.position.set(5, 0, 0)
除了set方法之外的，也可以直接给position的x、y、z赋值。
同样呢，我们可以在第四点的render函数中加入对position的修改来进行一个动态绘制
function render() { //设置一个渲染函数
cube.position.x += 0.01 //向x轴正方向不断移动
if (cube.position.x > 5) { //当x的位置大于5的时候回到原点
cube.position.x = 0
}
renderer.render(scene, camera)
//用一个浏览器自带的函数：请求动画帧requestAnimationFrame()
requestAnimationFrame(render) //渲染下一帧的时候就会调用一次这个函数
}
7.物体的缩放与旋转
缩放
上一点呢我们讲到的是 物体的位置，也就是属性position。那么缩放的话我们有另外的属性scale：一样是一个三维向量对象。
所以也拥有相同的set方法，例：
cube.scale.set(3,2,1) //x方向为3倍，y方向为2倍，z方向为1倍
一也可以直接给scale的x、y、z赋值。
旋转
旋转是属性rotation：是一个欧拉角(Euler)对象。
它其中呢有一个order:String属性，应用于旋转顺序，默认值是“XYZ”，意味着先围绕X轴旋转，然后Y轴最后Z轴。必须使用大写字母。
//物体的旋转
cube.rotation.set(Math.PI / 4, 0, 0)
里面是旋转的角度，直接用Math.PI来计算即可，PI就是指180°嘛。
同样也是可以直接给rotation的x、y、z赋值，也可以写在render函数里面。
8.应用requestAnimationFrame
在之前的示例中，我们在render函数中使用到了这个动画方法。它其实是会默认传入一个时间参数的。
function render() { //设置一个渲染函数
cube.position.x += 0.01 //向x轴正方向不断移动
if (cube.position.x > 5) { //当x的位置大于5的时候回到原点
cube.position.x = 0
}
renderer.render(scene, camera)
//用一个浏览器自带的函数：请求动画帧requestAnimationFrame()
requestAnimationFrame(render) //渲染下一帧的时候就会调用一次这个函数
} 👆被传入的这个函数，会自动给他发一个 time 时间参数。
可以这样来读到每一帧的时间：
function render(time) {
console.log(time)//这个time的单位是毫秒
......
requestAnimationFrame(render)
}
那么里面的里面的位移等等就可以根据我们想要的效果来控制了，这句话好绕。。
比如说，我想要1秒钟走1单位位置。用数学公式是：L(距离) = v(速度) * t(时间) 那么就是 1单位距离 = 1单位/s * 1s ，这是1秒的情况。那么因为时间是在不停改变的，距离根据时间的变化而变化 也就得到了
cube.position.x = 1 * time/1000
👆 👆 👆
移动的距离 1单位/s 时间(毫秒)/1000=时间(秒)
这样当 time/1000 = 1 的时候，刚好cube.position.x 也为 1 了 。
那么我们想要实现 它跑到5单位的位置时跳回原点继续跑的效果的话，只需要在时间上做处理就可以了，只要给时间用5取余。
function render(time) {
let t = (time / 1000) % 5
cube.position.x = t * 1
renderer.render(scene, camera)
requestAnimationFrame(render)
}
9.通过Clock跟踪时间处理动画
在上一点中，我们学习了使用请求动画帧里面的时间参数来控制物体动画。但其实有些弊端，它只有一个时间参数，如果我们有多个内容需要多个计时的话，只有一个时间操作挺难的。
这里我们就可以用到 THREE.JS提供的Clock对象来 跟踪时间。（得到的是秒数）
//设置时钟
const clock = new THREE.Clock()
function render() { //设置一个渲染函数
// cube.rotation.x += 0.01
// let t = (time / 1000) % 5
// cube.position.x = t * 1
let deltaTime = clock.getDelta() //getDelta()两次获得时间的时间间隔。得到的是秒数
console.log("两次获取时间的时间间隔：", deltaTime);
renderer.render(scene, camera)
//请求动画帧requestAnimationFrame(),渲染下一帧的时候就会调用一次这个函数
requestAnimationFrame(render)
}
大概能推算出电脑渲染的帧数。
因为得到的直接是 秒数 ，所以要像之前那么移动的话，就不需要除以1000了。
//设置时钟
const clock = new THREE.Clock()
function render() { //设置一个渲染函数
let time = clock.getElapsedTime()//时钟运行的时长
console.log("时钟运行总时长：", time);
let t = time % 5
cube.position.x = t * 1
renderer.render(scene, camera)
//请求动画帧requestAnimationFrame(),渲染下一帧的时候就会调用一次这个函数
requestAnimationFrame(render)
}
