Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解

前端之家收集整理的这篇文章主要介绍了Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

本文主要给大家介绍了关于Three.js利用orbit controls插件(轨道控制)控制模型交互动作的相关内容,这个效果相对于第八节的轨迹球插件使用上感觉要好,虽然轨迹球插件可以来回的滚动,但是容易分辨不清楚上下左右的关系,容易混乱,适合调试,而轨道控制插件orbit则适合客户使用,还不会产生混乱效果。下面讲一下使用。

(1)首先引入插件文件地址在官方案例的examples/js/controls/OrbitControls.js。

(2)然后实例化函数,把相机和渲染器的dom传入,并设置相关设置。

用户交互插件 鼠标左键按住旋转,右键按住平移,滚轮缩放 var controls; function initControls() {

controls = new THREE.OrbitControls( camera,renderer.domElement );

// 如果使用animate方法时,将此函数删除
//controls.addEventListener( 'change',render );
// 使动画循环使用时阻尼或自转 意思是否有惯性
controls.enableDamping = true;
//动态阻尼系数 就是鼠标拖拽旋转灵敏度
//controls.dampingFactor = 0.25;
//是否可以缩放
controls.enableZoom = true;
//是否自动旋转
controls.autoRotate = true;
//设置相机距离原点的最远距离
controls.minDistance = 200;
//设置相机距离原点的最远距离
controls.maxDistance = 600;
//是否开启右键拖拽
controls.enablePan = true;
}

(3)最后,在animate函数调用orbit的update()更新。

//更新性能插件
stats.update();
requestAnimationFrame(animate);
}

就实现了相关效果

下面是全部案例代码

<Meta charset="UTF-8"> Title

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持

原文链接:https://www.f2er.com/js/36148.html

猜你在找的JavaScript相关文章