Threes.js入门篇之6 - 场景漫游

THREE.js 支持两种形式的漫游，第一人称漫游（First Person）和飞行（Fly），可以分别参考 example 下的 “misc_fps.html” 和 “misc_controls_fly.html”。

一. 第一人称漫游

例子中的效果是这样的，通过【ASDW】控制平移，通过【←↑↓→】控制朝向（try 一下）。

漫游主要是通过 camera 的参数调整来进行控制，请参考代码！

二. Fly

Fly模式提供了一个飞行控制器（FlyControls.js），参考漫游器设置代码：

    // 漫游器设置  controls = new THREE.FlyControls( camera );controls.movementSpeed = 0.1;controls.domElement = container;controls.rollSpeed = Math.PI / 24;controls.autoForward = false;controls.dragToLook = false;

通过 controls 的 update 完成控制更新：

    controls.update( delta );

THREE.js 封装的漫游器基本上能满足大多数情况下的使用，建议在其基础上进行修改以满足个性化设置，当然如果不想仅停留在用的阶段的话，可以写一个自己的控制器。这更能加深熟练应用！

Threes.js入门篇之6 - 场景漫游相关推荐

Threes.js入门篇之7 - 场景光照
Three.js 主要支持四种光源模式,分别是环境光.点光源.平行光和聚光灯.另外有半球光源.面光源等,本节暂不涉及. 一. 环境光 Ambient Light:所有对象的整体光照模型,控制整 ...
Threes.js入门篇之3 - 场景与相机
• Three.js 的场景 THREE.Scene 执行场景树管理,场景的创建只需要一句话: var scene = new THREE.Scene(); 场景常用操作包含: 1.scene.add ...
Threes.js入门篇之5 - 场景操纵器Trackball
Three.js 提供了很多操纵器,example下也给了一些操纵器(也叫控制器)的例子,引用 js 可以参考 examples/js/controls/TrackballControls.js . ...
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 ...

Threes.js入门篇之6 - 场景漫游

Threes.js入门篇之6 - 场景漫游相关推荐

最新文章

热门文章