右手坐标系
//每秒转一圈
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 objectscamera.position.x = Math.sin(client.x * Math.PI * 2) * 3;camera.position.z = Math.cos(client.x * Math.PI * 2) * 3camera.position.y = client.y * 5;camera.lookAt(mesh.position)// Renderrenderer.render(scene, camera)// Call tick again on the next framewindow.requestAnimationFrame(tick)
}tick()
canvas 可以动态占满可视区
window.addEventListener('resize', () => {sizes.width = window.innerWidthsizes.height = window.innerHeightcamera.aspect = sizes.width / sizes.heightcamera.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(window.devicePixelRatio)
