Three.js学习（三）动画

这一次我们来学习动画
让立方体动起来

回到一开始的界面
我们在代码中设置

const tick = () => {
    cubeMesh.rotation.y +=0.1
    renderer.render(scene, camera);
    window.requestAnimationFrame(tick)
}

tick();

通过requestAnimationFrame(请求动画帧)，不断调用tick函数，使的cubeMesh不断绕y轴旋转

当然里面还可以添加其他的位置，或者把cubeMesh改为camera 会有不一样的效果

这里有一点需要特别注意

立方体动的速度与帧速率有关,帧速率越高 它转的越快。有些人电脑有高帧率，就可能会有一个更快的立方体，在1秒的时间中有更多的实现移动，所以要做的是适应帧速率，我们要用到时间
这里通过使用js原生来实现一下，无论帧速率如何都以相同的速度旋转

//Time
let time = Date.now()//上一帧时间

const tick = () => {

    const currentTime = Date.now()//当前时间
    const deltaTime = currentTime - time //时间增量
    time = currentTime
    // cubeMesh.position.x +=0.01
    cubeMesh.rotation.y += 0.001*deltaTime

    renderer.render(scene, camera);
    window.requestAnimationFrame(tick)
}

tick();

当然three.js也有clock来解决里面的方法和js实现的是一样的，相当于封装了

作者特别强调了不要用three.js中clock.getDelta() 说会弄乱里面的逻辑，反正都不要使用就ok了

这里面还有通过sin和cos来调整相机视角来看立方体

以下为全部代码

import * as THREE from "three"

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Sizes
const sizes = {
    width: 800,
    height: 600
}

// Scene 场景
const scene = new THREE.Scene()

/**
 * Axes Helper 辅助三维坐标系
 */
const axesHelper = new THREE.AxesHelper(2)
scene.add(axesHelper)

// Object 对象
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
const cubeMaterial = new THREE.MeshBasicMaterial({
    color: '#ff0000',
})//材质
const cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial)
scene.add(cubeMesh)


// Camera 相机
const camera = new THREE.PerspectiveCamera(100, sizes.width / sizes.height)
camera.position.z = 3
scene.add(camera)

// Renderer 渲染
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.render(scene, camera)

//Clock
const clock = new THREE.Clock()

//Time
//let time = Date.now()//上一帧时间

const tick = () => {

    // const currentTime = Date.now()//当前时间
    // const deltaTime = currentTime - time //时间增量
    // time = currentTime
    // cubeMesh.rotation.y += 0.001*deltaTime

    //--------------------------------------------------------

    // const elapsedTime = clock.getElapsedTime()
    //  cubeMesh.rotation.y = elapsedTime
    //  cubeMesh.rotation.y = elapsedTime*Math.PI*2 //改变速率

    //--------------------------------------------------------

    camera.position.y = Math.sin(elapsedTime)
    camera.position.x = Math.cos(elapsedTime)
    camera.lookAt(cubeMesh.position)

    renderer.render(scene, camera);
    window.requestAnimationFrame(tick)
}

tick();