Three.js入门指南

1.threejs导入3d模型到web端，3d模型的文件格式可以找个建模软件转化为threejs所支持的格式，如.dae .obj .mtl stl gld等
harp.gl 3D地图渲染引擎
key：TiWMPfkD-HO_Kv9exEnvQWyKpIqvtMwFfTYX5tmFRSI
案例

Three.js入门指南(张雯莉)

应用结构

上图需要注意的事项：
首先有一个渲染器(Renderer)。这可以说是three.js的主要对象。你传入一个场景(Scene)和一个摄像机(Camera)到渲染器(Renderer)中，然后它会将摄像机视椎体中的三维场景渲染成一个二维图片显示在画布上。
其次有一个场景图 它是一个树状结构，由很多对象组成，比如图中包含了一个场景(Scene)对象 ，多个网格(Mesh)对象，光源(Light)对象，群组(Group)，三维物体(Object3D)，和摄像机(Camera)对象。一个场景(Scene)对象定义了场景图最基本的要素，并包了含背景色和雾等属性。这些对象通过一个层级关系明确的树状结构来展示出各自的位置和方向。子对象的位置和方向总是相对于父对象而言的。比如说汽车的轮子是汽车的子对象，这样移动和定位汽车时就会自动移动轮子。你可以在场景图的这篇文章中了解更多内容。
注意图中摄像机(Camera)是一半在场景图中，一半在场景图外的。这表示在three.js中，摄像机(Camera)和其他对象不同的是，它不一定要在场景图中才能起作用。相同的是，摄像机(Camera)作为其他对象的子对象，同样会继承它父对象的位置和朝向。在场景图这篇文章的结尾部分有放置多个摄像机(Camera)在一个场景中的例子。
网格(Mesh)对象可以理解为用一种特定的材质(Material)来绘制的一个特定的几何体(Geometry)。材质(Material)和几何体(Geometry)可以被多个网格(Mesh)对象使用。比如在不同的位置画两个蓝色立方体，我们会需要两个网格(Mesh)对象来代表每一个立方体的位置和方向。但只需一个几何体(Geometry)来存放立方体的顶点数据，和一种材质(Material)来定义立方体的颜色为蓝色就可以了。两个网格(Mesh)对象都引用了相同的几何体(Geometry)和材质(Material)。
几何体(Geometry)对象顾名思义代表一些几何体，如球体、立方体、平面、狗、猫、人、树、建筑等物体的顶点信息。Three.js内置了许多基本几何体 。你也可以创建自定义几何体或从文件中加载几何体。
材质(Material)对象代表绘制几何体的表面属性，包括使用的颜色，和光亮程度。一个材质(Material)可以引用一个或多个纹理(Texture)，这些纹理可以用来，打个比方，将图像包裹到几何体的表面。
纹理(Texture)对象通常表示一幅要么从文件中加载，要么在画布上生成，要么由另一个场景渲染出的图像。
光源(Light)对象代表不同种类的光。
基础知识
一、立方体
THREE.CubeGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)；
THREE.CubeGeometry(x方向上的长度, y方向上的长度, z方向上的长度, x方向上分段数, y方向上分段数, z方向上分段数)；
分段是对六个面进行分段，而不是对立方体的体素分段，因此在立方体的中间是不分段的，只有六个侧面被分段。
例子：
new THREE.CubeGeometry(1, 2, 3);可以创建一个x方向长度为1，y方向长度为2，z方向长度为3的立方体。
二、平面
THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
THREE.PlaneGeometry(x方向上的长度, y方向上的长度,x方向上分段数,y方向上分段数);
例子：
new THREE.PlaneGeometry(2, 4);创建的平面在x轴和y轴所在平面内，要创建的平面在x轴和z轴所在的平面内，可以通过物体的旋转来实现
三、球体
THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength);
THREE.SphereGeometry(半径, 经度上的切片数, 纬度上的切片数, 经度开始的弧度, 经度跨过的弧度, 纬度开始的弧度, 纬度跨过的弧度);
例子：
new THREE.SphereGeometry(3, 8, 6)可以创建一个半径为3，经度划分成8份，纬度划分成6份的球体。
new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2)。
四、圆形
THREE.CircleGeometry(radius, segments, thetaStart, thetaLength)；
THREE.CircleGeometry(半径, 切片数, 纬度开始的弧度, 纬度跨过的弧度)；
例子：
new THREE.CircleGeometry(3, 18, Math.PI / 3, Math.PI / 3 * 4)可以创建一个在x轴和y轴所在平面的三分之二圆的扇形
五、圆柱体
THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded);
THREE.CylinderGeometry(顶面, 底面的半径, 圆柱体的高度, 顶面分段, 高度分段, 布尔值，是否没有顶面和底面);
例子：
new THREE.CylinderGeometry(2, 2, 4, 18, 3)创建一个顶面与底面半径都为2，高度为4的圆柱体。
new THREE.CylinderGeometry(2, 3, 4, 18, 3)将底面半径设为3创建一个圆台。
new THREE.CylinderGeometry(2, 3, 4, 18, 3, true)将创建一个没有顶面与底面的圆台。
六、正四面体、正八面体、正二十面体
THREE.TetrahedronGeometry(radius, detail);正四面体
THREE.OctahedronGeometry(radius, detail);正八面体
THREE.IcosahedronGeometry(radius, detail);正二十面体
radius是半径；detail是细节层次（Level of Detail）的层数
例子：
new THREE.TetrahedronGeometry(3)创建一个半径为3的正四面体。
new THREE.OctahedronGeometry(3)创建一个半径为3的正八面体。
new THREE.IcosahedronGeometry(3)创建一个半径为3的正二十面体。
七、圆环面
THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc);
THREE.TorusGeometry(圆环半径, 管道半径, 圆环半径分段数, 管道半径分段数, 圆环面的弧度);
例子：
new THREE.TorusGeometry(3, 1, 4, 8)创建一个粗糙的圆环面。
new THREE.TorusGeometry(3, 1, 12, 18)创建一个较为精细的圆环面。
new THREE.TorusGeometry(3, 1, 4, 8, Math.PI / 3 * 2)创建部分圆环面。
八、圆环结
THREE.TorusKnotGeometry(radius, tube, radialSegments, tubularSegments, p, q, heightScale);
THREE.TorusKnotGeometry(圆环半径, 管道半径, 圆环半径分段数, 管道半径分段数, p, q, z轴方向上的缩放);
p和q是控制其样式的参数，一般可以缺省
例子：
new THREE.TorusKnotGeometry(2, 0.5, 32, 8)。
九、文字形状
使用文字形状需要先引入字体库

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

例子：
new THREE.TextGeometry(‘Hello’, {size: 1, height: 1});三维文字
十、自定义形状
THREE.Geometry()
例子：

// 初始化几何形状
var geometry = new THREE.Geometry();

// 设置顶点位置
// 顶部4顶点
geometry.vertices.push(new THREE.Vector3(-1, 2, -1));
geometry.vertices.push(new THREE.Vector3(1, 2, -1));
geometry.vertices.push(new THREE.Vector3(1, 2, 1));
geometry.vertices.push(new THREE.Vector3(-1, 2, 1));
// 底部4顶点
geometry.vertices.push(new THREE.Vector3(-2, 0, -2));
geometry.vertices.push(new THREE.Vector3(2, 0, -2));
geometry.vertices.push(new THREE.Vector3(2, 0, 2));
geometry.vertices.push(new THREE.Vector3(-2, 0, 2));

// 设置顶点连接情况
// 顶面
geometry.faces.push(new THREE.Face3(0, 1, 3));
geometry.faces.push(new THREE.Face3(1, 2, 3));
// 底面
geometry.faces.push(new THREE.Face3(4, 5, 6));
geometry.faces.push(new THREE.Face3(5, 6, 7));
// 四个侧面
geometry.faces.push(new THREE.Face3(1, 5, 6));
geometry.faces.push(new THREE.Face3(6, 2, 1));
geometry.faces.push(new THREE.Face3(2, 6, 7));
geometry.faces.push(new THREE.Face3(7, 3, 2));
geometry.faces.push(new THREE.Face3(3, 7, 0));
geometry.faces.push(new THREE.Face3(7, 4, 0));
geometry.faces.push(new THREE.Face3(0, 4, 5));
geometry.faces.push(new THREE.Face3(0, 5, 1));