10 Three.js使用orbit controls插件(轨道控制)来控制模型交互动作
案例查看效果地址:http://www.wjceo.com/blog/threejs/2018-02-09/12.html
这个效果相对于第八节的轨迹球插件使用上感觉要好,虽然轨迹球插件可以来回的滚动,但是容易分辨不清楚上下左右的关系,容易混乱,适合调试,而轨道控制插件orbit则适合客户使用,还不会产生混乱效果。下面讲一下使用。
(1)首先引入插件,文件地址在官方案例的examples/js/controls/OrbitControls.js。
(2)然后实例化函数,把相机和渲染器的dom传入,并设置相关设置。
//用户交互插件 鼠标左键按住旋转,右键按住平移,滚轮缩放var controls;function initControls() {controls = new THREE.OrbitControls( camera, renderer.domElement );// 如果使用animate方法时,将此函数删除//controls.addEventListener( 'change', render );// 使动画循环使用时阻尼或自转 意思是否有惯性controls.enableDamping = true;//动态阻尼系数 就是鼠标拖拽旋转灵敏度//controls.dampingFactor = 0.25;//是否可以缩放controls.enableZoom = true;//是否自动旋转controls.autoRotate = true;//设置相机距离原点的最远距离controls.minDistance = 200;//设置相机距离原点的最远距离controls.maxDistance = 600;//是否开启右键拖拽controls.enablePan = true;}
(3)最后,在animate函数内调用orbit的update()更新。
function animate() {//更新控制器controls.update();render();//更新性能插件stats.update();requestAnimationFrame(animate);}
就实现了相关效果。下面是全部案例代码:
<!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 οnlοad="draw();"></body>
<script src="build/three.js"></script>
<script src="examples/js/controls/OrbitControls.js"></script>
<script src="examples/js/libs/stats.min.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 stats;function initStats() {stats = new Stats();document.body.appendChild(stats.dom);}//用户交互插件 鼠标左键按住旋转,右键按住平移,滚轮缩放var controls;function initControls() {controls = new THREE.OrbitControls( camera, renderer.domElement );// 如果使用animate方法时,将此函数删除//controls.addEventListener( 'change', render );// 使动画循环使用时阻尼或自转 意思是否有惯性controls.enableDamping = true;//动态阻尼系数 就是鼠标拖拽旋转灵敏度//controls.dampingFactor = 0.25;//是否可以缩放controls.enableZoom = true;//是否自动旋转controls.autoRotate = true;//设置相机距离原点的最远距离controls.minDistance = 200;//设置相机距离原点的最远距离controls.maxDistance = 600;//是否开启右键拖拽controls.enablePan = true;}function render() {renderer.render( scene, camera );}//窗口变动触发的函数function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();render();renderer.setSize( window.innerWidth, window.innerHeight );}function animate() {//更新控制器controls.update();render();//更新性能插件stats.update();requestAnimationFrame(animate);}function draw() {initRender();initScene();initCamera();initLight();initModel();initControls();initStats();animate();window.onresize = onWindowResize;}
</script>
</html>
10 Three.js使用orbit controls插件(轨道控制)来控制模型交互动作相关推荐
- three.js加载obj模型 键盘控制模型局部动作
先贴上我前无古人后无来者的宇宙无敌搅拌机 我想用键盘控制框框中各部分分别有各自的动作,我这模型虽然是简单几何体堆积的,但是这是在blender里制作了模型,导出obj格式的模型再导进页面的,主要是测试 ...
- js插件---10个免费开源的JS音乐播放器插件
js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...
- php项目网页音乐播放器插件,10个免费开源的JS音乐播放器插件
10个免费开源的JS音乐播放器插件 三月 24, 2015 评论 (3) Sponsor 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些网页播放器插件比较少见,所以这里 ...
- 10个最好的 jQuery 视频插件(转)
在这篇文章中已经收集了 10 个最佳的 jQuery 视频插件,帮助开发人员容易地实现网站播放影片功能.可以显示视频和视频播放列表. 1. Bigvideo.js BigVideo.js 是一个 jQ ...
- react 原生html 插件,纯原生JS的瀑布流插件Macy.js,前端必备插件
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂 ...
- 分享10个jQuery页面动态编辑插件
为什么80%的码农都做不了架构师?>>> 日期:2012-5-21 来源:GBin1.com 页面动态编辑插件可以非常方便的帮助用户编辑页面内容,但是实现的方式并不是那么简单 ...
- php公告滚动源码,10行js代码实现上下滚动公告效果方法
本文主要给大家介绍了关于利用10行js代码实现滚动公告效果的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧.希望能帮助到大家 ...
- Table Dragger - 简单的 JS 拖放排序表格插件
Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示 ...
- html列表拖拽排序插件,JS拖拽排序插件Sortable.js用法实例分析
本文实例讲述了JS拖拽排序插件Sortable.js用法.分享给大家供大家参考,具体如下: 最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好 ...
最新文章
- 本站将进行有关《大道至简》的讨论~
- python hashlib模块_python-hashlib模块
- 04机器学习实战之朴素贝叶斯
- linux 下的vi命令汇总
- TCP的可靠传输実现
- 饿了别叫妈,叫阿里“爸爸”!
- SMART Utility for mac (硬盘检测工具)
- [SQL优化工具]Quest.Central.For.Databases——SQL Tuning for SQL Server
- 360修复高危漏洞可以修复吗_360提示的高危漏洞要不要修复怎样关闭 - 卡饭网
- 微信小程序 下拉刷新
- 线程安全问题?怎么解决线程安全
- Golang面试题整理
- Pyramidal Convolution: Rethinking Convolutional Neural Networks for Visual Recognition论文阅读翻译
- 使用Python+Appuim 清理微信
- Pixelmator Pro轻松搞定常见的图片处理需求
- 数字人民币应用日渐成熟,领先美欧至少5年
- 程序员如何防止脑疲劳:下午补充一些干果
- IE浏览器一打开就提示“已停止工作”的解决方案
- 漂亮学姐计算机软考【认证】通过了的学习方法和小技巧
- 新推荐个百度网盘不限速下载神器