three学习路线（一）

1. 安装three官网包
2. 引入three.js

<script type="module">
// 现在浏览器支持ES6语法，自然包括import方式引入js文件
import * as THREE from './build/three.module.js';
</script>

three.js三个基本概念：场景Scene、相机Camera、渲染器Renderer

1.三维场景Scene

你可以把三维场景Scene (opens new window)对象理解为虚拟的3D场景，用来表示模拟生活中的真实三维场景,或者说三维世界。

创建3D场景对象Scene

const scene = new THREE.Scene();

2.物体形状：几何体Geometry

   Three.js提供了各种各样的几何体API，用来表示三维物体的几何形状

{

   长方体（BoxGeomentry）

   圆柱体（CylinderGeometry）

   球体（SphereGeometry）

   圆锥（ConeGeometry）

   矩形平面（PlaneGeometry）

   圆面图（CircleGeometry）

}

//创建一个长方体几何对象Geometry

const geometry = new THREE.BoxGeometry(100, 100, 100); 

3.物体外观：材质Material

如果你想定义物体的外观效果，比如颜色，就需要通过材质Material相关的API实现。

threejs不同材质渲染效果不同，下面就以threejs最简单的网格基础材质

MeshBasicMaterial (opens new window)为例给大家实现一个红色材质效果。

{

   网格基础材质（MeshBasicMaterial）

   网格漫反射材质（MeshLamberMaterial）

   网格高光材质（MeshPhongMaterial）

   物理材质（MeshStanderMaterial）(MeshPhysicalMaterial)

   点材质（PointsMaterial）

   线基础材质（LineBasicMaterial）

   精灵材质（SpriteMaterial）

}

//创建一个材质对象Material

const material = new THREE.MeshBasicMaterial({
    color: 0xff0000,//0xff0000设置材质颜色为红色
}); 

4.物体：网格模型Mesh

实际生活中有各种各样的物体，在threejs中可以通过网格模型Mesh (opens new window)表示一个虚拟的物体，比如一个箱子、一个鼠标。

// 两个参数分别为几何体geometry、材质material

const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

5.模型位置：position

实际生活中，一个物体往往是有位置的，对于threejs而言也是一样的，你可以通过位置属性position定义网格模型Mesh在三维场景Scene中的位置。

const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
//设置网格模型在三维空间中的位置坐标，默认是坐标原点
mesh.position.set(0,10,0);

6.add()方法

在threejs中你创建了一个表示物体的虚拟对象Mesh，需要通过.add()方法，把网格模型mesh添加到三维场景scene中。

scene.add(mesh); 

代码小结

<script type="module">
            // es6引入three.js
            import * as THREE from "../build/three.module.js";
            
            // 创建场景
            const scene = new THREE.Scene();
 
            // 创建物体形状（几何体）
            const geomeyry = new THREE.BoxGeometry(100, 100, 100);
 
            // 添加物体外观（材质）
            const material = new THREE.MeshBasicMaterial({
                color: 0xff0000,
            });
            // 创建网格模型 把形状外观放入模型中
            const mesh = new THREE.Mesh(geomeyry, material);
 
            // 设置模型所在场景（Scene）中的位置
            mesh.position.set(0, 10, 0);
 
            // 把模型添加到场景（Scene）中
            scene.add(mesh);
</script>