three.js 学习

Three.js 是一个 3D JavaScript 库
首先认识下关键字

• 渲染器（Renderer）
• 场景（Scene）
• 照相机（Camera）
• 网格 (Mesh）

常用的渲染器有：WebGLRenderer和CanvasRenderer
WebGL渲染效果、性能逗比CanvasRenderer 好
CanvasRenderer则具有更好的兼容性。

添加的物体都添加到场景（Scene）中

1.照相机（Camera）

• 正交投影照相机（Orthographic Camera）

• 透视投影照相机（Perspective Camera）

  
  image.png

1. 正交投影照相机 （Orthographic Camera）
   不会改变物体的比例

THREE.OrthographicCamera(left, right, top, bottom, near, far)

image.png

2.透视投影照相机（Perspective Camera）的构造函数是：

THREE.PerspectiveCamera(fov, aspect, near, far)

image.png

aspect等于width / height
near和far分别是照相机到视景体最近、最远的距离，均为正值

2.几何形状

2.1几何形状（Geometry）

材质（Material）

• 立方体

THREE.CubeGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)

• 平面

THREE.PlaneGeometry(width, height, widthSegments, heightSegments)

• 球体

THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength)

// radius是半径；segmentsWidth表示经度上的切片数；
// segmentsHeight表示纬度上的切片数；phiStart表示经度开始的弧度；
// phiLength表示经度跨过的弧度；thetaStart表示纬度开始的弧度；
// thetaLength表示纬度跨过的弧度。

segmentsWidth相当于经度被切成了几瓣，而segmentsHeight相当于纬度被切成了几层

• 圆形（CircleGeometry）可以创建圆形或者扇形，其构造函数是：

THREE.CircleGeometry(radius, segments, thetaStart, thetaLength)

• 圆柱体（CylinderGeometry）的构造函数是：

THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded)
//radiusTop与radiusBottom分别是顶面和底面的半径
//radiusSegments与heightSegments可类比球体中的分段；
//openEnded 缺省值为false，表示有顶面和底面。true为无

• 正四面体、正八面体、正二十面体

THREE.TetrahedronGeometry(radius, detail)
THREE.OctahedronGeometry(radius, detail)
THREE.IcosahedronGeometry(radius, detail)

• 圆环面（TorusGeometry）

THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)
//radius是圆环半径；tube是管道半径；
//radialSegments与tubularSegments分别是两个分段数，
//arc是圆环面的弧度，缺省值为Math.PI * 2。

image.png

• 圆环结（TorusKnotGeometry）

THREE.TorusKnotGeometry(radius, tube, radialSegments, tubularSegments, p, q, heightScale)
//heightScale是在z轴方向上的缩放。

2.2 文字形状

THREE.TextGeometry(text, parameters)

parameters 参数设置

• size：字号大小，一般为大写字母的高度
• height：文字的厚度
• curveSegments：弧线分段数，使得文字的曲线更加光滑
• font：字体，默认是'helvetiker'，需对应引用的字体文件
• weight：值为'normal'或'bold'，表示是否加粗
• style：值为'normal'或'italics'，表示是否斜体
• bevelEnabled：布尔值，是否使用倒角，意为在边缘处斜切
• bevelThickness：倒角厚度
• bevelSize：倒角宽度

2.3 自定义形状

THREE.Geometry()

3.材质

通过设置材质可以改变物体的颜色、纹理贴图、光照模式等

3.1 基本材质

THREE.MeshBasicMaterial(opt)

• visible：是否可见，默认为true
• side：渲染面片正面或是反面，默认为正面THREE.FrontSide，可设置为反面THREE.BackSide，或双面THREE.DoubleSide
• wireframe：是否渲染线而非面，默认为false
• color：十六进制RGB颜色，如红色表示为0xff0000
• map：使用纹理贴图

3.2 Lambert材质

只考虑漫反射而不考虑镜面反射的效果

 THREE.MeshLambertMaterial(opt)

3.3 Phong材质

Phong 模型考虑了镜面反射的效果，因此对于金属、镜面的表现尤为适合

 THREE.MeshPhongMaterial(opt)

3.4 法向材质

 THREE.MeshNormalMaterial(opt)

4.网格

网格是由顶点、边、面等组成的物体

Mesh(geometry, material)

5.动画

每秒帧数 FPS（Frames Per Second），是指每秒画
面重绘的次数。FPS 越大，则动画效果越平滑
常用方法：

setInterval(func, msec)
requestAnimationFrame

6.外部模型

7.光与影

7.1环境光

环境光没有明确的光源位置，在各处形成的亮度也是一致的。

THREE.AmbientLight(hex)

环境光通常使用白色或者灰色，作为整体光照的基础。

7.2 点光源

THREE.PointLight(hex, intensity, distance)

7.3平行光

THREE.DirectionalLight(hex, intensity)

7.4聚光灯

THREE.SpotLight(hex, intensity, distance, angle, exponent)
//angle是聚光灯的张角，缺省值是Math.PI / 3，最大值是Math.PI / 2；
//exponent是光强在偏离target的衰减指数（target需要在之后定义，缺省值为(0, 0, 0)），缺省值是10。

学习从搬运开始