一、必备六要素

容器container
场景scene
灯光light
摄像机camera
渲染器renderer
模型或者物体Mesh

1、容器container

容器指的是3D场景渲染在的地方。前端中，一般是一个div，可以手动创建，也可以直接在template中写明，这里是template例子。

<div id="container"></div>

const initContainer = () => {
    container = document.getElementById('container')
}

2、场景scene

scene是3D里面必须的。想象自己正在某个美丽的景点，此情此景，就是这个场景的意思。

scene = new THREE.Scene()

你可以给这个场景添加一些效果，比如加个背景，蓝天白云等，或者直接给一个颜色；也可以添加一些雾化效果等，让这个场景更加丰富。

scene.background = new THREE.Color(0xa0a0a0)
scene.fog = new THREE.Fog(0xa0a0a0, 70, 10)

3、灯光light

灯杆，是场景里面特别重要的。比如现在的视频里面跳舞的，唱歌的，都特别好看，让人一看就是哇哇哇，兴奋的不行，里面就少不了灯光的加持。3D里面也是一样。不同的光源有不同的效果。

Pasted Graphic 5.png 打什么灯，灯是什么颜色都是很有讲究的，呜~~ 学了这个真心觉得场务人员不容易。

const dirLight = new THREE.DirectionalLight(0xffffff, 0.8)
dirLight.position.set(0, 350, 170) 
scene.add(dirLight)

4、摄像机camera

摄像机很好理解，想象拍照时，镜头放在什么位置，朝向哪里，拍出来的都是不一样的，在3D里面也是一样。

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000)
camera.position.set(800, 100, 800)

这里给出的是透视摄像机，4个重要的参数需要定义好。这里还有更为详细的介绍，可以进去看看。

如果你碰到以下情况，可以考虑调整下摄像头：

模型加载成功，场景加载成功，但是屏幕一片黑，啥也看不到，这有可能就是摄像头的位置不对哦

5、渲染器renderer

renderer可以理解为画布，我理解为胶片，渲染到一张大胶片上还是小胶片上。

const initRenderer = () => {
    renderer = new THREE.WebGLRenderer()
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(window.innerWidth, window.innerHeight)
    renderer.shadowMap.enabled = true // 支持阴影
    container.appendChild(renderer.domElement)
}

WebGL还是比较复杂的，等后面深入学习后再来分享，这里就先记住WebGLRenderer和这个渲染器就好，是帮我们将3D的东西渲染出来的，渲染到我们的容器里面。

模型加载成功，场景加载成功，但是屏幕一片黑，啥也看不到，还有一种可能就是没有添加实时渲染动画。

const animate = () => {
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
}
animate()

6、模型或者物体Mesh

这就很好理解啦，场景中有什么，就是通过这些搭建起来的，有的模型可能是UI工程师给到前端，你只需要借助一些辅助加载器比如GLTFLoader，FBXLoader，OBJLoader等加入场景中，也可能是你自己哼哧哼哧通过一个个几何体Geometry加上材质Material拼凑出来的，不管是什么他们最终会形成Mesh，被加入到场景中。

const planeGeometry = new THREE.PlaneGeometry(10000, 10000)
const planeMaterial = new THREE.MeshPhongMaterial({ color: 0x333333 })
const ground = new THREE.Mesh(planeGeometry, planeMaterial)
ground.receiveShadow = true
ground.rotateX(-Math.PI / 2)
ground.translateZ(-500)
scene.add(ground)

这样你就会看到一个10000 * 10000的一个平面啦。

初探three.js的一些总结