threejs 加载两个场景_Threejs开发笔记之二场景与基本组件

Scene场景的组件包括三种

相机：决定哪些东西将要显示在屏幕上渲染

光源：它们对材质如何显示，以及生产阴影是材质如何产生影响

物体(Mesh对象)：它们是在相机视图里主要的渲染对象：方块、球体等

Scene就是这些对象的容器。(Mesh对象)是区别相机和光源对象的方法，可以这样判断是不是Mesh对象

if (lastObject instanceof THREE.Mesh)

场景函数

变量

scene.children.length//场景中物体的个数

函数

scene.remove(obj)//删除参加中的对象

scene.add(obj)//想场景中添加对象

scene.children()//获取场景中所有子对象

scene.getChildByName(name)//通过名字获取物体对象

scene.traverse(funName(e){})//遍历每个物体，e就是物体的对象，作用就是对物体进行操作

高级函数

//雾化效果(雾的颜色，开始的地方，浓度的加深程度)

scene.fog = new THREE.Fog(0xffffff, 0.015, 100);

scene.fog = new THREE.Fog(0xffffff, 100);//(颜色，浓度)

//材质覆盖 ： 给所有物体设置同样的材质

scene.overrideMaterial = new THREE.MeshLambertMaterial({color:0xffffff})

其他

打印信息

console.log(scene.childrern)//打印某个对象的信息

Geometry几何体

geometry(几何对象)(网格对象)组成：

顶点(Vertice)面(face)

扩展知识：

一个面可以是三个面组成也可以是四个面

三个面的优点对于渲染和游戏引擎更容易，任意一个形状都可以渲染成三角形。

四个面为比较常用，优点比三角形更容易增强和平滑

所以所有物体都自带网格系统(三角形)

基本函数

//位置

cube.position.x = 10//分别设置

cube.position.set(x,y,z)//同时设置

//旋转(旋转一周是PI的两倍)//围绕x轴旋转

cube.rotation.x=0.5*Math.PI

cube.rotation.set(0.5*Math.PI,0,0)

cube.rotation = new THREE.Vector3(0.5*Math.PI,0,0);

//缩放

cube.scale.x =2//某个方向缩放倍速，小于1为缩小

//改变物体的相对位置

cube.translateX(4)//沿x方向平移

//克隆函数 复制

obj.geometry.clone()

Camera相机

three里有两种相机

透视相机：近大远小

正投影相机：远近一样大(模拟城市4)

透视相机

实例化参数

参数

描述

fav(视场)

field of View，就是视野的宽度，人的事180度，鸟类360度，屏幕推荐45度(60~90)

aspect(长宽比)

屏幕的长宽比例如4:3 16:9,推荐window.innerWidth / window.innerHeight

near(近面)

什么地方开始渲染，推荐小值：0.1

far(远面)

多远开始停止渲染，默认1000

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.x = 120;

camera.position.y = 60;

camera.position.z = 180;

camera.lookAt(scene.position);

this.perspective = "Perspective";

正投影相机

实例化参数

参数

描述

left(左边界)

可渲染空间的最左面

right(右边界)

可渲染空间的最右面

top(上边界)

可渲染空间的最上面

bottom(下边界)

可渲染空间的最下面

near(近面)

什么地方开始渲染

far(远面)

多远开始停止渲染

//实例化

camera = new THREE.OrthographicCamera(window.innerWidth / -16, window.innerWidth / 16, window.innerHeight / 16, window.innerHeight / -16, -200, 500);

//位置

camera.position.x = 120;

camera.position.y = 60;

camera.position.z = 180;

//望向

camera.lookAt(scene.position);

this.perspective = "Orthographic";

让相机聚焦在某一点

camera.lookAt(new THREE.Vector3(x,y,z));

camera.lookAt(scene.position)