一、场景搭建
1、使用three.js搭建三维场景需要的基本要素
渲染器与场景
（1、）渲染器(renderer)：是三维中的基本，是three.js的主要对象
const renderer = new THREE.WebGLRenderer();
（2、）场景（scene）：屏幕中间的矩形，是一个容器，主要用于保存、跟踪所要渲染的物体和使用的光源，以及使用的相机,
const scene = new THREE.Scene();
场景中常见的基础方法：
1、添加对象：scene.add（object）
2、移除对象：scene.remove(object);
3、雾化效果：scene.fog = new THREE.Fog(0xffffff, 0.015, 100);
4、改变材质： scene.overrideMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
THREE.Scene对象有时被称为场景图，可以用来保存所有图形场景的必要信息。
构建一个简单的场景图
1、摄像机（camera）：摄像机决定了能够在场景看到什么
const camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
0.1,
1000
);
透视投影摄像机：THREE.PerspectiveCamera(fov,aspect,near,far,zoom)
fov : 视场，指观看视角（通常视角大小为60-90度）
aspect : 长宽比（决定横向视角和纵向视角的比例关系）
near : 近面距离（定义相机从距离物体多近的距离开始渲染）
far : 远面距离（定义相机从当前位置能够看多远）
zoom : 变焦（变焦值默认是1，控制场景的放大和缩小，当大于1时场景将放大，反之）
2、光源(spotLight)：对材质如何显示，以及生成阴影时材质如何使用产生影响
```
const spotLight = new THREE.SpotLight(0xffffff);
```
3、物体（Geometry+MeshLambertMaterial）：相机里主要的渲染对象，如方块、球体。一个物体是由几何体加上材质构成的。
// 设置平面（1、宽、高设置 ；2、平面外观设置）
const planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
// MeshBasicMaterial材质不受光源影响
const planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
构成物体的要素
几何体(Geometry)：对象顾名思义代表一些几何体，如球体、立方体、平面、狗、猫、人、树、建筑等物体的顶点信息。
材质(Material)：对象代表绘制几何体的表面属性，包括使用的颜色，和光亮程度。
网格(Mesh)：Geometry和Material定义了物体的外观和材质，而Mesh则是将物体放到场景中去的方法。
基本场景效果图
场景构建源码：
<template>
<div>
<div class="three" id="WebGL-output"></div>
</div>
</template>
<script>
import * as THREE from "three";
export default {
// 组件名称
name: "Demo",
mounted() {
this.initThree();
},
// 组件方法
methods: {
initThree() {
// 场景
const scene = new THREE.Scene();
// 摄像机
const camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// 渲染器
const renderer = new THREE.WebGLRenderer();
// 定位并将相机指向场景的中心
camera.position.set(-30, 40, 30);
camera.lookAt(scene.position);
// 渲染器底色
renderer.setClearColor(new THREE.Color(0xeeeeee));
// 渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 设置渲染器阴影
renderer.shadowMapEnabled = true;
// 设置光源
const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
// 开启阴影功能
spotLight.castShadow = true;
// 控制阴影的精细程度
spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
spotLight.shadow.camera.far = 130;
spotLight.shadow.camera.near = 40;
scene.add(spotLight);
// 设置平面（长、宽、高设置 ）
const planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
// MeshBasicMaterial材质不受光源影响
const planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
// 旋转和定位平面
plane.rotation.x = -0.5 * Math.PI;
plane.position.set(0, 0, 0);
scene.add(plane);
// 设置正方体
const cubeGeometry = new THREE.BoxGeometry(10, 10, 10);
// MeshLambertMaterial受光源影响
const cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xff0000
});
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 允许物体产生阴影
cube.castShadow = true;
cube.position.set(1, 10, 2);
scene.add(cube);
scene.fog = new THREE.Fog(0xeeeeee, 0.015, 100);
// 将渲染器的输出添加到 html 元素
document.getElementById("WebGL-output").appendChild(renderer.domElement);
// 渲染场景
renderer.render(scene, camera);
}
}
};
</script>
<style scoped lang="scss"></style>
