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 相关文章推荐
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
JS获取鼠标选中的文字
Aug 10 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
微信小程序支付前端源码
Aug 29 Javascript
es6数组includes()用法实例分析
Apr 18 Javascript
深入理解 ES6中的 Reflect用法
Jul 18 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中的HashTable结构详解
2013/06/13 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
python实现获取序列中最小的几个元素
2014/09/25 Python
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
对python判断是否回文数的实例详解
2019/02/08 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
ktv收银员岗位职责
2013/12/16 职场文书
化学教师自荐信范文
2013/12/28 职场文书
幼儿园家长会邀请函
2014/01/15 职场文书
项目总经理岗位职责
2014/02/14 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
材料加工工程求职信
2014/02/19 职场文书
协议书范本
2014/04/23 职场文书
个人委托书范文
2015/01/28 职场文书
投诉信回复范文
2015/07/03 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
详解Redis复制原理
2021/06/04 Redis
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫