Vue+threejs第一个3D案例—场景

接下来会通过3小节，实现Vue3+threejs的第一个3D案例。

Canvas画布

Canvas画布和div、p元素一样都是HTML元素，区别在于Canvas画布支持2D或3D绘图功能，threejs渲染的三维效果图就是呈现在Canvas画布上面。

网页上插入一个Cnavas画布，宽高800x800像素px，背景黑色。

<canvas style="background: black;" width="800" height="800"></canvas>

除了标签，也可以通过js代码创建canvas画布,下面通过js方式在twin.js文件中创建一个Canvas元素，并插入body中。

const canvas = document.createElement('canvas');
canvas.width=800;//画布宽度px
canvas.height=800;//画布高度px
canvas.style.background='black';
document.body.appendChild(canvas);

创建三维场景Scene

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

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

Threejs三维坐标系

Threejs三维场景Scene里面的物体，默认通过三维直角坐标系(三维笛卡尔坐标系)去定位。关于3D坐标系，你有初高中数学基础，都了解，就不做过多介绍，只是提醒下大家，写threejs代码时候要有坐标位置的概念。

你可以想象下，在threejs的Canvas画布上有一个虚拟的xyz直角坐标系，在线体验 (opens new window)加深印象。

【扩展】：Three.js默认坐标系一个右手坐标系 (opens new window)，假设y默认轴向上，当x轴水平向右时候，此时z轴垂直屏幕向外。

创建一个长方体物体

下面用4步，给大家演示在虚拟场景Scene中添加一个长方体。

//1. 长方体形状
const geometry = new THREE.BoxGeometry(100, 100, 100); 
//2. 长方体材质
const material = new THREE.MeshBasicMaterial({
    color: 0x0000ff,
}); 
//3. 长方体网格模型Mesh
const mesh = new THREE.Mesh(geometry, material);
//4. 长方体添加到虚拟场景中
scene.add(mesh);

1. 物体形状：几何体Geometry

//创建一个长方体几何对象Geometry
// 三个三叔表示长方体长宽高，再具体点就是x、y、z轴三个方向的尺寸
const geometry = new THREE.BoxGeometry(100, 100, 100); 

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

文档搜索关键词geometry你可以看到threejs提供各种几何体相关API，具体使用方法，也可以参考文档。

2. 物体外观：材质Material

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

下面给大家选择一个最简单的网格材质，基础基础材质MeshBasicMaterial (opens new window)是threejs最简单的网格材质，下面给大家实现一个蓝色材质效果。

//创建一个材质对象Material
const material = new THREE.MeshBasicMaterial({
    color: 0x0000ff,//0x0000ff:十六进制表示的蓝色
}); 

3. 物体：网格模型Mesh

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

const geometry = new THREE.BoxGeometry(100, 100, 100); 
const material = new THREE.MeshBasicMaterial({
    color: 0x0000ff,//0x0000ff:十六进制表示的蓝色
}); 
// 两个参数分别为几何体geometry、材质material
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

4. .add()方法

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

scene.add(mesh); 

模型位置.position

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

长方体位置默认是在坐标原点 (opens new window)(0,0,0)。

// 长方体位置默认是在坐标原点(0,0,0)
const geometry = new THREE.BoxGeometry(100, 100, 100); 
const material = new THREE.MeshBasicMaterial({
    color: 0x0000ff,
}); 
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

把长方体位置设置在x轴坐标200位置 (opens new window)。

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

继续下节课

这时候，你可能想在Canvas画布上看到，你写的长方体效果。不要急，不要躁，后面两节马上到。