Threes.js入门篇之3 - 场景与相机

• Three.js 的场景

THREE.Scene 执行场景树管理，场景的创建只需要一句话：

    var scene = new THREE.Scene();

场景常用操作包含：

1.scene.add(obj); // 在场景中添加物体

2.scene.remove(obj); // 在场景中移除物体

3.scene.children(); // 获取场景中所有子对象的列表

4.scene.getChildByName(); // 通过Name获取场景中某个对象

5.Scene.traverse(function); // 遍历场景对象执行回调函数

扩展操作包括：

6.scene.fog // 对应两种类型fog

     a）scene.fog = new THREE.Fog(0xFFFFFF,0.01,100)    // Params: 雾的颜色，近端系数，远端系统b）scene.fog = new THREE.FogExp2(0xFFFFFF,0.015)   // Params: 雾的颜色，浓度

7.背景图、属性原型

     if ( scene.background.isColor )                         // 判断是否为颜色…// clear colorscene.prototype = Object.create( Object3D.prototype );  // 属性原型

8.自动更新、材质覆盖

     if ( scene.autoupdate === true )scene.updateMatrixWorld(); // 自动更新场景图scene.overrideMaterial= new THREE.MeshLambertMaterial( {color:0xFFFFFF} );

• Three.js 的相机

Three.js 提供了两种相机模式，透视投影和正交投影，这和其他的三维引擎并没有区别。

> 透视投影：

Perspective Camera 特点在于满足近大远小，模拟人眼成像特点，真实感比较强。

调用函数：PerspectiveCamera( fov, aspect, near, far )

@fov > Camera frustum vertical field of view 垂直方向张角

@aspect > Camera frustum aspect ratio 宽高比

@near > Camera frustum near plane 近裁剪面

@far > Camera frustum far plane 远裁剪面

    var camera = new THREE.PerspectiveCamera(50, 16/9, 0.1, 1000);

> 正交投影：

Orthographic Camera，正交投影是指平行投影成像，主要用在二维地图上或者镜面反射等应用上。

调用函数：OrthographicCamera( left, right, top, bottom, near, far )

@left > Camera frustum left plane 左平面

@right > Camera frustum right plane 右平面

@top > Camera frustum top plane 上平面

@bottom > Camera frustum bottom plane 下平面

@near > Camera frustum near plane 近裁剪面－与上面一致

@far > Camera frustum far plane 远裁剪面－与上面一致

    var camera = new THREE.OrthographicCamera(-8, 8, 4.5, -4.5, 0.1, 1000)

> 相机设置：

相机初始化完成后，需要对相机进行设置，上面构造函数已经定义了摄像机的内参数，接下来需要明确的是摄像机的姿态和方向。

默认的相机是在原点位置，朝向为Z轴负方向（屏幕内侧），上方向为Y轴。

    camera.position.set(5, 0, 10);             // Positioncamera.up.set(0, 1, 0); // up方向 - Y轴camera.lookAt(new THREE.Vector3(0, 0, 0)); // Targetscene.add(camera)

Camera包含以下几个属性：

matrixWorldInverse －世界坐标矩阵的逆

projectionMatrix －投影矩阵（成像）

projectionMatrixInverse －投影矩阵的逆矩阵

实际上，World - View - Projection 矩阵一起构成了三维成像体系，这个会在后面讲到。

Threes.js入门篇之3 - 场景与相机相关推荐

Threes.js入门篇之7 - 场景光照
Three.js 主要支持四种光源模式,分别是环境光.点光源.平行光和聚光灯.另外有半球光源.面光源等,本节暂不涉及. 一. 环境光 Ambient Light:所有对象的整体光照模型,控制整 ...
Threes.js入门篇之5 - 场景操纵器Trackball
Three.js 提供了很多操纵器,example下也给了一些操纵器(也叫控制器)的例子,引用 js 可以参考 examples/js/controls/TrackballControls.js . ...
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 ...

Threes.js入门篇之3 - 场景与相机

Threes.js入门篇之3 - 场景与相机相关推荐

最新文章

热门文章