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 相关文章推荐
jQuery 前的按键判断代码
Mar 19 Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
探讨js字符串数组拼接的性能问题
Oct 11 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
php微信公众号开发之秒杀
2018/10/20 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
Javascript 函数中的参数使用分析
2010/03/27 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
Python网络编程详解
2017/10/31 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
python迭代器常见用法实例分析
2019/11/22 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
单位人事专员介绍信
2014/01/11 职场文书
公司节能减排倡议书
2014/05/14 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
介绍信格式
2015/01/30 职场文书
财务工作失误检讨书
2015/02/19 职场文书
大二学年个人总结
2015/03/03 职场文书
公司总经理岗位职责
2015/04/01 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
浅谈Node的内存泄露问题
2022/05/06 NodeJs