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 相关文章推荐
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
javascript常用方法汇总
Dec 02 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
详解javascript高级定时器
Dec 31 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
多文件上载系统完整版
2006/10/09 PHP
php 404错误页面实现代码
2009/06/22 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
jquery实现动静态条形统计图
2015/08/17 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
web打印小结
2017/01/11 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
Python中for循环详解
2014/01/17 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
对Python字符串中的换行符和制表符介绍
2018/05/03 Python
python 文件查找及内容匹配方法
2018/10/25 Python
Python zip函数打包元素实例解析
2019/12/11 Python
Python3 读取Word文件方式
2020/02/13 Python
python excel和yaml文件的读取封装
2021/01/12 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
工作时间调整通知
2015/04/24 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android
MySQL的索引你了解吗
2022/03/13 MySQL
MySQL创建管理KEY分区
2022/04/13 MySQL
python井字棋游戏实现人机对战
2022/04/28 Python