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)