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 相关文章推荐
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
js数组中去除重复值的几种方法
Aug 03 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
详谈PHP文件目录基础操作
2014/11/11 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
Javascript 面向对象特性
2009/12/28 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
js实现漫天星星效果
2017/01/19 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
利用python程序帮大家清理windows垃圾
2017/01/15 Python
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
C#基础面试题
2016/10/17 面试题
质检员的岗位职责
2013/11/15 职场文书
优秀求职信范文分享
2014/01/26 职场文书
少先队入队活动方案
2014/02/08 职场文书
个人自我鉴定总结
2014/03/25 职场文书
小数乘法教学反思
2016/02/22 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers