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


Posted in Javascript onSeptember 25, 2017

前言

本文主要给大家介绍了关于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()更新。

function animate() { 
 //更新控制器 
 controls.update(); 
 render(); 
 
 //更新性能插件 
 stats.update(); 
 requestAnimationFrame(animate); 
 }

就实现了相关效果。

下面是全部案例代码:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Title</title> 
 <style type="text/css"> 
 html, body { 
  margin: 0; 
  height: 100%; 
 } 
 
 canvas { 
  display: block; 
 } 
 
 </style> 
</head> 
<body onload="draw();"> 
 
</body> 
<script src="build/three.js"></script> 
<script src="examples/js/controls/OrbitControls.js"></script> 
<script src="examples/js/libs/stats.min.js"></script> 
<script> 
 var renderer; 
 function initRender() { 
 renderer = new THREE.WebGLRenderer({antialias:true}); 
 renderer.setSize(window.innerWidth, window.innerHeight); 
 document.body.appendChild(renderer.domElement); 
 } 
 
 var camera; 
 function initCamera() { 
 camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000); 
 camera.position.set(0, 0, 400); 
 } 
 
 var scene; 
 function initScene() { 
 scene = new THREE.Scene(); 
 } 
 
 var light; 
 function initLight() { 
 scene.add(new THREE.AmbientLight(0x404040)); 
 
 light = new THREE.DirectionalLight(0xffffff); 
 light.position.set(1,1,1); 
 scene.add(light); 
 } 
 
 function initModel() { 
 var map = new THREE.TextureLoader().load("examples/textures/UV_Grid_Sm.jpg"); 
 var material = new THREE.MeshLambertMaterial({map:map}); 
 
 var cube = new THREE.Mesh(new THREE.BoxGeometry(100, 200, 100, 1, 1, 1), material); 
 scene.add(cube); 
 } 
 
 //初始化性能插件 
 var stats; 
 function initStats() { 
 stats = new Stats(); 
 document.body.appendChild(stats.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; 
 } 
 
 function render() { 
 renderer.render( scene, camera ); 
 } 
 
 //窗口变动触发的函数 
 function onWindowResize() { 
 camera.aspect = window.innerWidth / window.innerHeight; 
 camera.updateProjectionMatrix(); 
 render(); 
 renderer.setSize( window.innerWidth, window.innerHeight ); 
 
 } 
 
 function animate() { 
 //更新控制器 
 controls.update(); 
 render(); 
 
 //更新性能插件 
 stats.update(); 
 requestAnimationFrame(animate); 
 } 
 
 function draw() { 
 initRender(); 
 initScene(); 
 initCamera(); 
 initLight(); 
 initModel(); 
 initControls(); 
 initStats(); 
 
 animate(); 
 window.onresize = onWindowResize; 
 } 
</script> 
</html>

总结

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

Javascript 相关文章推荐
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
Dec 08 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
小程序实现分类页
Jul 12 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 Javascript
element中table高度自适应的实现
Oct 21 Javascript
vuex中使用对象展开运算符的示例
Sep 25 #Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 #Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 #Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 #Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 #Javascript
简单谈谈js的数据类型
Sep 25 #Javascript
实现两个文本框同时输入的实例
Sep 25 #Javascript
You might like
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
为你总结一些php系统类函数
2015/10/21 PHP
JavaScript 封装Ajax传递的数据代码
2009/06/05 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
Python实现批量修改文件名实例
2015/07/08 Python
python使用opencv进行人脸识别
2017/04/07 Python
python实现泊松图像融合
2018/07/26 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
python argparser的具体使用
2019/11/10 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
基于Python实现天天酷跑功能
2021/01/06 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
入党积极分子评语
2014/05/04 职场文书
反邪教警示教育方案
2014/05/13 职场文书
结对共建工作方案
2014/06/02 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
军人离婚协议书样本
2014/10/21 职场文书
幼儿园园长个人总结
2015/03/02 职场文书