Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解


Posted in Javascript onSeptember 25, 2017

前言

之前我们已经简单的给大家介绍了关于three.js入门的一些案例,下面本文将详细介绍关于Three.js如何用轨迹球插件(trackball)增加对模型的交互功能,下面话不多说了,来一起看看详细的介绍吧。

这是three.js的一个组件,需要额外的引入文件,文件的地址是在官方下载的案例examples/js/controls/TrackballControls.js。

只需要和案例里面一样设置相关的属性,并在实例化的时候讲相机传入。就可以实现交互效果。

可以实现的效果:

  • 鼠标按住左键可以旋转模型
  • 鼠标按住右键拖拽可以移动模型
  • 鼠标滚轮可以缩放模型

案例代码:

<!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/TrackballControls.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 controls; 
 function initControls() { 
 controls = new THREE.TrackballControls( camera ); 
 //旋转速度 
 controls.rotateSpeed = 5; 
 //变焦速度 
 controls.zoomSpeed = 3; 
 //平移速度 
 controls.panSpeed = 0.8; 
 //是否不变焦 
 controls.noZoom = false; 
 //是否不平移 
 controls.noPan = false; 
 //是否开启移动惯性 
 controls.staticMoving = false; 
 //动态阻尼系数 就是灵敏度 
 controls.dynamicDampingFactor = 0.3; 
 //未知,占时先保留 
 //controls.keys = [ 65, 83, 68 ]; 
 controls.addEventListener( 'change', render ); 
 } 
 
 function render() { 
 renderer.render( scene, camera ); 
 } 
 
 //窗口变动触发的函数 
 function onWindowResize() { 
 
 camera.aspect = window.innerWidth / window.innerHeight; 
 camera.updateProjectionMatrix(); 
 controls.handleResize(); 
 render(); 
 renderer.setSize( window.innerWidth, window.innerHeight ); 
 
 } 
 
 function animate() { 
 //更新控制器 
 controls.update(); 
 render(); 
 requestAnimationFrame(animate); 
 } 
 
 function draw() { 
 initRender(); 
 initScene(); 
 initCamera(); 
 initLight(); 
 initModel(); 
 initControls(); 
 
 animate(); 
 window.onresize = onWindowResize; 
 } 
</script> 
</html>

总结

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

Javascript 相关文章推荐
input按钮的事件处理大全
Dec 10 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
js运动事件函数详解
Oct 21 Javascript
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
vue2里面ref的具体使用方法
Oct 27 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 #Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 #Javascript
简单谈谈js的数据类型
Sep 25 #Javascript
实现两个文本框同时输入的实例
Sep 25 #Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 #jQuery
对于input 框限定输入值为浮点型的js代码
Sep 25 #Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 #Javascript
You might like
什么是短波收听SWL
2021/03/01 无线电
新版PHP极大的增强功能和性能
2006/10/09 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
php微信开发之谷歌测距
2018/06/14 PHP
javascript优先加载笔记代码
2008/09/30 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
详解redux异步操作实践
2018/08/15 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python关闭windows进程的方法
2015/04/18 Python
python计算圆周率pi的方法
2015/07/11 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
Python中字符串List按照长度排序
2019/07/01 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
家长给孩子的表扬信
2014/01/17 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书