Three.js

右手坐标系
//每秒转一圈

const clock = new THREE.Clock()
function tick() {
    const time = clock.getElapsedTime()
    mesh.rotation.y = time * Math.PI * 2 //一秒转一圈
    renderer.render(scene, camera)
    window.requestAnimationFrame(tick)
}
tick()

const client = {
    x: 0,
    y: 0
}

canvas.addEventListener('mousemove', (e) => {
    client.x = (e.clientX / sizes.width - 0.5);
    client.y = -(e.clientY / sizes.height - 0.5);
})


const tick = () =>
{
    // Update objects
    camera.position.x = Math.sin(client.x * Math.PI * 2) * 3;
    camera.position.z = Math.cos(client.x * Math.PI * 2) * 3
    camera.position.y = client.y * 5;
    camera.lookAt(mesh.position)
	
    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()

canvas 可以动态占满可视区

window.addEventListener('resize', () => {
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()
    renderer.setSize(sizes.width, sizes.height)
})

.webgl {
  position: fixed; //隐藏滚动条
  top: 0;
  left: 0;
  overflow: hidden; //隐藏笔记本触摸板上滑底部有白块
}

Sets device pixel ratio. This is usually used for HiDPI device to prevent blurring output canvas.

renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))