一. 场景对象 THREE.scene 理解
概念:用来保存所有图形场景的必要信息,几何图形/光源/摄像机 ,不仅仅是一个对象数组,还包含的场景图树形结构中的所有结点。
let scene = new THREE.Scene()
相关方法:
- scene.add() 向场景中添加对象
- scene.remove() 移除场景中的对象
- scene.children 获取场景中的子对象列表
- scene.getObjectByName("name") 利用names属性来获取场景中的特定对象
- scene.traverse() 接受一个方法作为参数,这个方法会在每一个子对象场景的每一个子对象上执行(包括子对象下的子对象)
雾化效果:
(1) scene.fog = new THREE.Fog(color, near, far) 雾的浓度线性增长
- color:雾化颜色
- near:雾化的最近距离
- far: 雾化的最远距离
(2)scene.fog = new THREE.FogExp2(color, value) 雾化的浓度呈指数增长
- color:雾化颜色
- value:雾化的浓度
材质覆盖:
强制场景中所有物体都使用该材质
scene.overrideMaterial = new THREE.meshLamberMaterial({color:0xffffff})
二. 几个图型和网格的关联
1.几何图形
可使用内置的基本几何体:平面/立方体/球
- 平面:通过 PlaneGeometry(x,y) 方法设置图形
- 立方体:通过 BoxGeometry(x,y,z) 方法设置图形
- 球体:通过 SphereGeometry(r,x,y) 方法设置图形
可通过创建顶点和面来生成自定义几何体
- 创建点集合:
let vertices = [
new THREE.Vector3(x,y,z)
...
]
- 创建面几何:
let faces = [
new THREE.Face3(index1,index2,index3) //index 为点集合的数组下标
...
]
添加点和面:
let geom = new THREE.Geometry();
geom.vertices = vertices;
geom.faces = faces;
geom.computeFaceNormals();
2.网格
创建一个网格需要一个几何体和一个或多个材质。
- 一种材质:
let cube = new THREE.Mesh(geom,material)
- 多种材质:
let cube = THREE.SceneUtils.createMultiMaterialObject(geom,material)
- 方法属性:
- position 设置位置
- ratation 设置围绕某个轴旋转的角度
- scale 设置沿着某个轴的缩放
- translateX 沿着x轴平移
- translateY 沿着y轴平移
- translateZ 沿着z轴平移
- visible为false时不会渲染到场景中
三. 正交投影摄像机 和 透视投影摄像机的区别
- 透视投影摄像机 THREE.PerspectiveCamera(fov,aspect,near,far,zoom)
- fov:视场角度,常用60-90,模认:50
- aspect:渲染的长宽比,通常设置为浏览器窗口长快比
- near:近距离
- far:远距离
- zoom:放大缩小场景,默认1
- 正交投影摄像机 THREE.OrthographicCamera(left,right,top,bottom,near,far,zoom)
- left,right,top,bottom:左右上下边界
- near:近距离
- far:远距离
- zoom:放大缩小场景,默认1
- 设置摄像机的位置
-
camera.lookAt(new THREE.Vector3(x,y,z))
-
总结:这章概念较多,主要理解这些东西是做什么的,该在什么情况下使用就行了。