three的基本介绍

民间官方文档:www.yanhuangxueyuan.com/threejs/doc...

gui使用文档：lil-gui.georgealways.com/#Guide#Fold...

1. 创建物体

物体也就是Mesh,相当于自然界中的一个物体，它有两个属性来描述，一个是物体的形状，另一个就是物体的材质

csharp 复制代码

    // 创建几何体
    let geometry = new THREE.BoxGeometry(params.width, params.height, params.depth);
    // 创建材质
    let material = new THREE.MeshLambertMaterial({ color: getRandomHexColor() });
    // 将几何体和材质 组合成物体
    let mesh = new THREE.Mesh(geometry, material);
    // 设置坐标
    mesh.position.set(0, 0, 0);
    // 将物体添加到场景中
    scene.add(mesh);

1.1. 几何体

物体的形状，具体来说也就是是长方形、圆锥体等，我在下方把所有的可以创建的物体的形状列出来

先来感受一下

几何体有很多类型，有多边形，圆柱体等，具体如下：

基础几何体

BoxGeometry：主要是创建立方体，主要参数为长宽高
SphereGeometry：主要创建球体，主要参数为半径等
CylinderGeometry：创建圆柱体，需要设置半径，高度等
ConeGeometry：创建圆锥体，需要设置半径高度等
PlaneGeometry：创建平面，需要指定宽高
CircleGeometry：创建圆形平面，需要指定半径、分段等
RingGeometry：创建环形平面，需要指定内半径、外半径
TorusGeometry：创建圆环体，需要指定半径、管半径等
TorusKnotGeometry：创建环面纽结几何体，需要指定半径，管半径等参数

高级几何体

DodecahedronGeometry：创建正十二体
IcosahedronGeometry：创建正二十面体
OctahedronGeometry：创建正八面体
TetrahedronGeometry：创建正四面体

自定义几何体

通过BufferGeometry来定义几何体

1.2. 材质

几何体和材质一共构成物体，那么材质具体怎么解释呢，就是几何体的表面是什么样的表现形式，比如物体的颜色、纹理，透光度，这一块我们有个概念就行，以后会慢慢展示，下面我们就先改变一下物体的材质当中的颜色来感受一下

2. 灯光

如果没有灯光，那么我们就看不出物体，就跟现实场景一样，一个人如果穿了一件红色衣服，那么在漆黑的夜里也是看不见的，但如果此刻街上有路灯，那么就能看得到

但是灯光也是有很多的分类，有平行光，点光源，场景光，等等，先了解一下大致的区别，看下面的图就能理解

下面我们先来体会下，从没有灯光的场景，先打开点光源，在打开平行光，看看效果

3. 相机

相机其实你可以理解为你自己的眼睛，会有一些视角方面的设置，它会得到不同的视野，比如你眯着眼睛，是不是角度小，能看到的东西的范围也小，类似的就是这么个道理

arduino 复制代码

/**
 * 创建相机
 */
function createCamera({ width = 0, height = 0 }) {
    width = width || window.innerWidth;
    height = height || window.innerHeight;
    const camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
    camera.position.set(200, 200, 200);
    camera.lookAt(0, 0, 0);
    return camera;
}

下面看下相机的参数调整之后所展示出来的效果

4. 总结

通过以上一些示意图应该能大致能感受到各部分的概念，当然此处只是最简单的感受一下最基本的概念与参数，有个基本了解

另外，每个部分里面的细节也是非常的多，后面一点点去学习