three.js 轨道控制器

最新推荐文章于 2025-05-23 09:24:18 发布

牧羊狼爱学习

最新推荐文章于 2025-05-23 09:24:18 发布

阅读量299

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/edwardwzw/article/details/130569319

前端专栏收录该内容

38 篇文章

订阅专栏

本文展示了如何使用THREE.js库创建一个WebGL渲染器，设置渲染器大小并进行渲染操作。接着，通过定义一个渲染循环实现物体沿Y轴的旋转动画。同时，引入OrbitControls来实现相机的轨道控制，当相机参数改变时自动更新渲染。最后，添加了事件监听器以响应鼠标和键盘输入，动态调整相机视角。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);


function render() {
    renderer.render(scene, camera); //执行渲染操作
    mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
    requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
}
render();


// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
controls.addEventListener('change', function () {
    renderer.render(scene, camera); //执行渲染操作
});//监听鼠标、键盘事件