三维场景Scene

threejs创建场景，可以把threejs的三维场景Scene理解为一个世界，只不过我们生活的世界是真实的，而threejs是虚拟的3d世界而已。
threejs提供了一个类:Scene,用Scene实例化出来的对象就可以表示三维场景。

引入threejs

import * as THREE from 'three'

创建场景

threejs创建场景

const scene =new THREE.Scene();

给三维场景添加物体

创建一个几何体

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

通过BoxGeometry我们可以创建一个几何体
BoxGeometry的参数有：
width — X轴上面的宽度，默认值为1。
height — Y轴上面的高度，默认值为1。
depth — Z轴上面的深度，默认值为1。
widthSegments — （可选）宽度的分段数，默认值是1。
heightSegments — （可选）高度的分段数，默认值是1。
depthSegments — （可选）深度的分段数，默认值是1。

创建材质

几何体创建完了，那么这个几何体是什么材质外观呢？接下来就要创建材质对象了，这里给材质一个颜色 红色

const material = new THREE.MeshBasicMaterial({
    color: 0xff0000, //红色
})

创建网格模型（物体）

创建物体 需要知道物体的形状geometry和材质material，threejs使用网格模型Mesh代表虚拟物体，

const mesh = new THREE.Mesh(geometry, material)

将形状和材质传给网格模型我们的物体就创建好了，接下来要将物体加入到场景中。

将物体加入到场景中

把网格模型(物体)加入到场景中

scene.add(mesh);

网格模型(物体)物体的位置

将物体加入到了场景，那么物体在场景的哪个位置呢？通过网格模型的位置属性.position可以设置网格的位置

mesh.position.set(0, 0, 0)

到这里我们的场景就渲染完成了，但是只是渲染完成了，还没办法看到，我们还需要场景相机Camera和渲染器Renderer来完成后续的步骤才能看到一个完整的场景。

本节的完整代码

// 引入threejs
import * as THREE from 'three'
// 创建三维场景
const scene = new THREE.Scene();

// 三维场景内添加物品

// 创建几何体 几何体长宽高都是100

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

// 创建对象材质

const material = new THREE.MeshBasicMaterial({
    color: 0xff0000, //红色
})
// 创建网格模型物体
const mesh = new THREE.Mesh(geometry, material)

// 把网格模型(物体)加入到场景中
scene.add(mesh);

// 设置网格模型的位置
mesh.position.set(0, 0, 0)