3.使用three.js渲染第一个场景和物体
Scene：场景
Camera：相机(想象成我们的眼睛)
↑：相机拍摄的范围是一个锥体，我们叫做视锥体，距离相机太近的地方我们看不清、距离相机太远的地方我们也看不清。我们可以来设置这个视锥体，当然如果想要看到更多东西视锥体更大，那么性能就会消耗更多一些，反之亦然。
我们要实现一个基本的内容的话，我们需要：相机、场景、物体、渲染器，相机、物体都在场景当中。
three.js里面有一个场景类new THREE.Scene()
首先我们在main.js文件里搭建一个场景和相机：
import * as THREE from 'three'
//1.创建场景
const scene = new THREE.Scene()
//2.创建相机
const camera = new THREE.PerspectiveCamera() //透视相机
在官网文档里，
可以看到透视相机的构造器：PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
fov — 摄像机视锥体垂直视野角度 aspect — 摄像机视锥体长宽比 near — 摄像机视锥体近端面 far — 摄像机视锥体远端面
这些参数一起定义了摄像机的viewing frustum（视锥体）。
设置相机的位置并且把它添加到场景中。
//设置相机对象的位置
camera.position.set(0,0,10)//x,y,z轴
scene.add(camera) //把相机添加到场景当中
接下来是添加一个几何体。
首先定义几何体，再定义材质，有了这两样之后我们再创建几何体（Mesh）。
最基础的材质：基础网格材质（MeshBasicMaterial） 这种材质不受光照影响
//添加物体
//创建几何体
const cubeGeometry = new THREE.BoxGeometry(1,1,1) //几何体
const cubeMaterial = new THREE.MeshBasicMaterial({color:0xfff00})//材质
//根据几何体和材质去创建物体
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial)
scene.add(cube) //把几何体添加到场景中
那么相机场景什么的都有了，接下来就是初始化渲染器。
//初始化渲染器
const renderer = new THREE.WebGLRenderer()
//设置渲染尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
这个时候我们可以打印我们的renderer来看看，渲染器的domElement其实是往canvas画布上去添加，所以我们想要看到我们的图像需要将canvas对象添加到body上
//将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement)
//使用渲染器，通过相机将场景渲染进来
renderer.render(scene, camera)
4.轨道控制器查看物体
Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动。相当于一个卫星一样，那么它的参数有两个，在飞的是哪个相机、被围绕的是哪个物体（用于事件监听的HTML元素domElement）。
OrbitControls( object: Camera, domElement: HTMLDOMElement )
当然在这个时候，依旧是看不到我们移动了这个相机，因为呢在之前的代码中，我们使用渲染器渲染场景的步骤只有一个，那么当相机移动了之后，画面依然是原来渲染的那次，所以接下来我们需要做的就是：浏览器每渲染一帧，我们就调用一次渲染器渲染。
function render(){ //设置一个渲染函数
renderer.render(scene, camera)
//用一个浏览器自带的函数：请求动画帧requestAnimationFrame()
requestAnimationFrame(render)//渲染下一帧的时候就会调用一次这个函数
}
render()//一开始执行一次
这时候我们就能够拖动并移动我们的立方体了~
5.添加坐标轴辅助器
AxesHelper：用于简单模拟3个坐标轴的对象。参数（可选）代表坐标轴的线段长度，默认为1
红色代表x轴，绿色代表y轴，蓝色代表z轴。
//添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)
