本文主要给大家介绍了关于3。js利用轨道控制插件(轨道控制)控制模型交互动作的相关内容,这个效果相对于第八节的轨迹球插件使用上感觉要好,虽然轨迹球插件可以来回的滚动,但是容易分辨不清楚上下左右的关系,容易混乱,适合调试,而轨道控制插件轨道则适合客户使用,还不会产生混乱效果。下面讲一下使用。
(1)首先引入插件,文件地址在官方案例的例子/js/控制/OrbitControls。js。
(2)然后实例化函数,把相机和渲染器的dom传入,并设置相关设置。
//用户交互插件鼠标左键按住旋转,右键按住平移,滚轮缩放
var控件;
函数initControls () {
控制=new三人。OrbitControls(相机,渲染器。domElement);//如果使用动画方法时,将此函数删除//控制。addEventListener(“改变”,渲染);//使动画循环使用时阻尼或自转意思是否有惯性
控制。enableDamping=true;//动态阻尼系数就是鼠标拖拽旋转灵敏度//控制。dampingFactor=0.25;//是否可以缩放
控制。enableZoom=true;//是否自动旋转
控制。自转=true;//设置相机距离原点的最远距离
控制。minDistance=200;//设置相机距离原点的最远距离
控制。maxDistance=600;//是否开启右键拖拽
控制。enablePan=true;
}
(3)最后,在动画函数内调用轨道的<代码> update() 更新。
函数动画(){//更新控制器
controls.update ();
呈现();//更新性能插件
stats.update ();
requestAnimationFrame(动画);
}
就实现了相关效果。
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Title
& lt;风格类型=" text/css "比;
html,身体{
保证金:0;
高度:100%;
}
帆布{
显示:块;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt;/body>
& lt;脚本src=" https://www.yisu.com/zixun/build/three.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/examples/js/controls/OrbitControls.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/examples/js/libs/stats.min.js "祝辞& lt;/script>
& lt; script>
var渲染器;
函数initRender () {
渲染器=new THREE.WebGLRenderer({平滑:真});
renderer.setSize(窗口。innerWidth window.innerHeight);
document.body.appendChild (renderer.domElement);
}
var相机;
函数initCamera () {
相机=new三人。PerspectiveCamera (45, window.innerWidth/窗口。innerHeight, 10000);
camera.position。集(0,0,400);
}
var场景;
函数initScene () {
现?new THREE.Scene ();
}
var淡定;
函数initLight () {
现场。添加(新THREE.AmbientLight (0 x404040));
光=new THREE.DirectionalLight (0 xffffff);
light.position.set (1 1 1);
scene.add(光);
}
函数initModel () {
var=new THREE.TextureLoader地图().load(“例子/纹理/UV_Grid_Sm.jpg”);
var材料=new THREE.MeshLambertMaterial({地图:地图});
var立方体=new三人。网格(新三人。BoxGeometry(100、200、100, 1, 1, 1),材料);
scene.add(立方体);
}//初始化性能插件
var属性;
函数initStats () {
统计=new统计();
document.body.appendChild (stats.dom);
}//用户交互插件鼠标左键按住旋转,右键按住平移,滚轮缩放
var控件;
函数initControls () {
控制=new三人。OrbitControls(相机,渲染器。domElement);//如果使用动画方法时,将此函数删除//控制。addEventListener(“改变”,渲染);//使动画循环使用时阻尼或自转意思是否有惯性
控制。enableDamping=true;//动态阻尼系数就是鼠标拖拽旋转灵敏度//控制。dampingFactor=0.25;//是否可以缩放
控制。enableZoom=true;//是否自动旋转
控制。自转=true;//设置相机距离原点的最远距离
控制。minDistance=200;//设置相机距离原点的最远距离
控制。maxDistance=600;//是否开启右键拖拽
控制。enablePan=true;
}
函数呈现(){
渲染器。呈现(场景、摄像头等);
}//窗口变动触发的函数
函数onWindowResize () {
相机。方面=窗口。innerWidth/window.innerHeight;
camera.updateProjectionMatrix ();
呈现();
渲染器。(setSize窗口。innerWidth,窗口。innerHeight);
}
函数动画(){//更新控制器
controls.update ();
呈现();//更新性能插件
stats.update ();
requestAnimationFrame(动画);
}
函数画(){
initRender ();
initScene ();
initCamera ();
initLight ();
initModel ();
initControls ();
initStats ();
动画();
窗口。onresize=onWindowResize;
}
& lt;/script>
& lt;/html>
