ThreeJS掘金最通俗入门指南-设备差异导致的frame速率问题

为什么会存在这个问题？

各种不同的机器和显示器之间，处理不同的RequestAnimationFrame。可能会存在差异。这就可能导致在A机器中，我的ThreeJS动画能够正常执行，不会太快的执行也不会太慢的执行。但是并不是是市面上所有的机器都和A机器处理frame的速度是一样的

C机器可能快一点，B机器可能慢一点.

示例代码:

<script type="module">
        import * as THREE from 'three'
        const scene=new THREE.Scene()
        let time=new Date()
        const geometry=new THREE.BoxGeometry(1,1,1)
        const material=new THREE.MeshBasicMaterial({color:'#ffff00'})
        const mesh=new THREE.Mesh(geometry,material)
        scene.add(mesh)
        const size={
            width:800,
            height:600
        }
        const camera=new THREE.PerspectiveCamera(75,size.width/size.height)
        camera.position.z=3
        camera.position.x=1
        scene.add(camera)
        const canvas=document.querySelector('.webgl')
        const renderer=new THREE.WebGLRenderer({
            canvas:canvas
        })
        renderer.setSize(size.width,size.height)
        render()
        function render(){
            let currentTime=Date.now()
            let deltaTime=currentTime-time
            time=currentTime
            mesh.rotation.y+=0.001*deltaTime
            renderer.render(scene,camera)
            window.requestAnimationFrame(render)
        }
    </script>

这个也算是一种解决方法，通过不断的更新当前时间，控制其帧率流转的速度，一样的能达到让不同设备之间的旋转帧率同步的问题

但是THREEjs官方给我们提供了一个类，专门用来解决这种问题。

官方解决方案

<script type="module">
        import * as THREE from 'three'
        const scene=new THREE.Scene()
        const geometry=new THREE.BoxGeometry(1,1,1)
        const clock=new THREE.Clock()
        const material=new THREE.MeshBasicMaterial({color:'#ffff00'})
        const mesh=new THREE.Mesh(geometry,material)
        scene.add(mesh)
        const size={
            width:800,
            height:600
        }
        const camera=new THREE.PerspectiveCamera(75,size.width/size.height)
        camera.position.z=3
        camera.position.x=1
        scene.add(camera)
        const canvas=document.querySelector('.webgl')
        const renderer=new THREE.WebGLRenderer({
            canvas:canvas
        })
        renderer.setSize(size.width,size.height)
        render()
        function render(){
            const elapsedTime=clock.getElapsedTime()
            mesh.rotation.y=elapsedTime
            renderer.render(scene,camera)
            window.requestAnimationFrame(render)
        }
    </script>