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 相关文章推荐
实用javaScript技术-屏蔽类
Aug 15 Javascript
Javascript实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
js简单的表格添加行和删除行操作示例
Mar 31 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
jQuery事件详解
Feb 23 Javascript
JavaScript常用内置对象用法分析
Jul 09 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 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
PHP 中常量的知识整理
2017/04/14 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
python解析xml模块封装代码
2014/02/07 Python
Python3基础之函数用法
2014/08/13 Python
python使用str &amp; repr转换字符串
2016/10/13 Python
Python做文本按行去重的实现方法
2016/10/19 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
python命令 -u参数用法解析
2019/10/24 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
历史系毕业生自荐信
2013/10/28 职场文书
留守儿童工作方案
2014/06/02 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python