Three.js开发指南-阅读记录(第二章)

159 阅读2分钟

一. 场景对象 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)
  • 方法属性:
  1. position 设置位置
  2. ratation 设置围绕某个轴旋转的角度
  3. scale 设置沿着某个轴的缩放
  4. translateX 沿着x轴平移
  5. translateY 沿着y轴平移
  6. translateZ 沿着z轴平移
  7. visible为false时不会渲染到场景中

三. 正交投影摄像机 和 透视投影摄像机的区别

  1. 透视投影摄像机 THREE.PerspectiveCamera(fov,aspect,near,far,zoom)
  • fov:视场角度,常用60-90,模认:50
  • aspect:渲染的长宽比,通常设置为浏览器窗口长快比
  • near:近距离
  • far:远距离
  • zoom:放大缩小场景,默认1
  1. 正交投影摄像机 THREE.OrthographicCamera(left,right,top,bottom,near,far,zoom)
  • left,right,top,bottom:左右上下边界
  • near:近距离
  • far:远距离
  • zoom:放大缩小场景,默认1
  1. 设置摄像机的位置
  • camera.lookAt(new THREE.Vector3(x,y,z))

  • 总结:这章概念较多,主要理解这些东西是做什么的,该在什么情况下使用就行了。