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 相关文章推荐
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 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
php 文件上传系统手记
2009/10/26 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
代码讲解Python对Windows服务进行监控
2018/02/11 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
美国渔具店:FishUSA
2019/08/07 全球购物
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
学生拾金不昧表扬信
2014/01/21 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
研发工程师岗位职责
2014/04/28 职场文书
运动会演讲稿200字
2014/08/25 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
张丽莉观后感
2015/06/16 职场文书