Threes.js入门篇之5 - 场景操纵器Trackball
Three.js 提供了很多操纵器,example下也给了一些操纵器(也叫控制器)的例子,引用 js 可以参考 examples/js/controls/TrackballControls.js 。
Trackball 是众多控制器中应用最多的样例之一,将场景对象封装到一个包围球,将鼠标操作映射为对包围球的旋转(拖拽)。
下图是 example下提供的例子:(对应代码 misc_controls_trackball.html)
只贴出来和控制器有关的部分代码:
controls = new THREE.TrackballControls( camera );controls.rotateSpeed = 1.0;controls.zoomSpeed = 1.2;controls.panSpeed = 0.8;controls.noZoom = false;controls.noPan = false;controls.staticMoving = true;controls.dynamicDampingFactor = 0.3;controls.keys = [ 65, 83, 68 ];controls.addEventListener( 'change', render );// 对应函数
function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );controls.handleResize();render();
}function animate() {requestAnimationFrame( animate );controls.update();
}function render() {renderer.render( scene, camera );stats.update();
}
Trackball 是 Three.js 控制器的一种,如果你需要更多控制器选择,可以参考 example例子。
Threes.js入门篇之5 - 场景操纵器Trackball相关推荐
- Threes.js入门篇之7 - 场景光照
Three.js 主要支持四种光源模式,分别是 环境光.点光源.平行光 和 聚光灯.另外有半球光源.面光源等,本节暂不涉及. 一. 环境光 Ambient Light:所有对象的整体光照模型,控制整 ...
- Threes.js入门篇之3 - 场景与相机
• Three.js 的场景 THREE.Scene 执行场景树管理,场景的创建只需要一句话: var scene = new THREE.Scene(); 场景常用操作包含: 1.scene.add ...
- Threes.js入门篇之6 - 场景漫游
THREE.js 支持两种形式的漫游,第一人称漫游(First Person) 和 飞行(Fly),可以分别参考 example 下的 "misc_fps.html" 和 &quo ...
- Threes.js入门篇之2 - Hello World
与OpenGL一样,Three.js 符合右手坐标系,X轴向右,Y轴向上,Z轴朝外: Three.js 的绘制流程可以描述为: 1. 生成 渲染器 - THREE.WebGLRenderer,并绑定C ...
- Threes.js入门篇之4 - World View Projection
在三维世界,一个模型要想最终呈现到一个照片上,需要经过三次矩阵变换,这三个矩阵分别是: 模型矩阵(World) - 视图矩阵(View)- 投影矩阵(Projection) 一. 模型矩阵 将 局部坐 ...
- Threes.js入门篇之9 - 全景图
全景图是一个当下非常流行的展示方式,在 VR | AR领域有广泛应用. 在三维内的 全景图 通常是根据 鼠标事件调整摄像机位置(在包围球内旋转),其基本思路一致,包围球可以通过 球面.立方体来实现,在 ...
- Threes.js入门篇之8 - 材质与纹理
材质是指几何对应的 颜色信息,想让一个对象最终呈现出你所希望的样子,其中最重要的一个因素就是材质. 来看一下例子 "canvas_material.html" [html] vie ...
- Three.js 入门篇-制作3D 动漫角色欣赏
Three.js 入门篇-制作3D 动漫角色欣赏 前言 一.与卡通相关又与前端相关的主题及制作思路 二.Three.js加载3D模型代码一般思路 三.源码及关键注释 参考引用 交流与学习 作者最新发布 ...
- js入门篇--制作简单闪烁图片
js入门篇–制作闪烁图片 刚刚学习,大神勿喷,还请多多指点... <body "soccerOnload()" topmargin="0"> //o ...
最新文章
- 在baidu上找到自己
- linux wget下载整个ftp目录(含子目录)
- Harvard's CS50
- CentOS6.5 编译安装zabbix3.0.5,编译安装zabbix_agent客户端
- linux vnc的小黑点和鼠标不同步_vnc连接windows,推荐三款非常好用的vnc连接windows软件...
- 2015-12-15 关于数量个
- 手机知识:90Hz或120Hz屏幕刷新率有啥区别,看完你就懂了!
- zabbix监控windows下的mysql
- ubuntu16.04安装微信
- anspython_python堆(heapq)的实现
- 【渝粤教育】国家开放大学2018年春季 0551-22T素描(二) 参考试题
- 小程序 长按复制文本
- weblogic运行但局域网内无法访问控制台
- Blog说明--WaaSinn的专业窝
- Micrium uC-Probe导入.elf文件的问题
- 读《富爸爸,穷爸爸》后感(二)
- 百兆网络变压器原理图及网络变压器功能(附PDF工程图纸)
- 【教学类-20-02】20221203《世界杯16强国旗-定量版》(大班)
- adobe flash player已过期
- 哪部电影是技术人员最应该看的?