Three.js学习

Three.js创建3D场景

Day2

前言：
入门Three.js的第一步，就是认识场景Scene、相机Camera、渲染器Renderer三个基本概念。今天学习场景Scene（发音：/siːn/; 中译：塞呢?有没有和冬梅一样不认识的，哈哈。。）

1.认识三维场景

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

// 创建3D场景对象Scene
const scene = new THREE.Scene;

2.三维场景（物体）属性

1).材质（Metarial）：

//创建一个材质对象Material
const material = new THREE.MeshBasicMaterial({
    color: 0xff0000,//0xff0000设置材质颜色为红色
});

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

// 两个参数分别为几何体geometry、材质material
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

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

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

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

scene.add(mesh);