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 相关文章推荐
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
详解AngularJS中的依赖注入机制
Jun 17 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
js全选按钮的实现方法
Nov 17 Javascript
完善的jquery处理机制
Feb 21 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
Javascript中window.name属性详解
Nov 19 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 检查电子邮件函数(自写)
2014/01/16 PHP
PHP中比较时间大小实例
2014/08/21 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
python3 配置logging日志类的操作
2020/04/08 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
浅析Python 条件控制语句
2020/07/15 Python
简述python Scrapy框架
2020/08/17 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
C# .NET面试题
2015/11/28 面试题
认识深刻的检讨书
2014/02/16 职场文书
揭牌仪式主持词
2014/03/19 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
市场部岗位职责
2015/02/12 职场文书
班主任高考寄语
2015/02/26 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
疾病证明书
2015/06/19 职场文书
Python中相见恨晚的技巧
2021/04/13 Python