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中的事件
Sep 23 Javascript
javascript dom代码应用 简单的相册[firefox only]
Jun 12 Javascript
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
基于jQuery的星级评分插件
Aug 12 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 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
destoon之一键登录设置
2014/06/21 PHP
十大使用PHP框架的理由
2015/09/26 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
简明 Python 基础学习教程
2007/02/08 Python
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
python版本单链表实现代码
2018/09/28 Python
python版百度语音识别功能
2019/07/09 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
Python 随机按键模拟2小时
2020/12/30 Python
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
好的自荐信的要求
2013/10/30 职场文书
团员的自我评价
2013/12/01 职场文书
高中地理教学反思
2014/01/29 职场文书
在校实习生求职信
2014/06/18 职场文书
同学聚会通知短信
2015/04/20 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python