一旁涤、場景搭建
1鳖目、使用three.js搭建三維場景需要的基本要素
渲染器與場景
（1狸眼、）渲染器(renderer)：是三維中的基本，是three.js的主要對象
const renderer = new THREE.WebGLRenderer();
（2、）場景（scene）：屏幕中間的矩形算吩，是一個容器留凭，主要用于保存、跟蹤所要渲染的物體和使用的光源偎巢，以及使用的相機(jī),
const scene = new THREE.Scene();
場景中常見的基礎(chǔ)方法：
1蔼夜、添加對象：scene.add（object）
2、移除對象：scene.remove(object);
3压昼、霧化效果：scene.fog = new THREE.Fog(0xffffff, 0.015, 100);
4求冷、改變材質(zhì)： scene.overrideMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
THREE.Scene對象有時被稱為場景圖，可以用來保存所有圖形場景的必要信息窍霞。
構(gòu)建一個簡單的場景圖
1匠题、攝像機(jī)（camera）：攝像機(jī)決定了能夠在場景看到什么
const camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
0.1,
1000
);
透視投影攝像機(jī)：THREE.PerspectiveCamera(fov,aspect,near,far,zoom)
fov : 視場，指觀看視角（通常視角大小為60-90度）
aspect : 長寬比（決定橫向視角和縱向視角的比例關(guān)系）
near : 近面距離（定義相機(jī)從距離物體多近的距離開始渲染）
far : 遠(yuǎn)面距離（定義相機(jī)從當(dāng)前位置能夠看多遠(yuǎn)）
zoom : 變焦（變焦值默認(rèn)是1但金，控制場景的放大和縮小韭山，當(dāng)大于1時場景將放大，反之）
2冷溃、光源(spotLight)：對材質(zhì)如何顯示钱磅，以及生成陰影時材質(zhì)如何使用產(chǎn)生影響
```
const spotLight = new THREE.SpotLight(0xffffff);
```
3、物體（Geometry+MeshLambertMaterial）：相機(jī)里主要的渲染對象秃诵，如方塊续搀、球體。一個物體是由幾何體加上材質(zhì)構(gòu)成的菠净。
// 設(shè)置平面（1禁舷、寬、高設(shè)置 毅往；2牵咙、平面外觀設(shè)置）
const planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
// MeshBasicMaterial材質(zhì)不受光源影響
const planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
構(gòu)成物體的要素
幾何體(Geometry)：對象顧名思義代表一些幾何體，如球體攀唯、立方體洁桌、平面、狗侯嘀、貓另凌、人、樹戒幔、建筑等物體的頂點信息吠谢。
材質(zhì)(Material)：對象代表繪制幾何體的表面屬性，包括使用的顏色诗茎，和光亮程度工坊。
網(wǎng)格(Mesh)：Geometry和Material定義了物體的外觀和材質(zhì)，而Mesh則是將物體放到場景中去的方法。
基本場景效果圖
場景構(gòu)建源碼：
<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();
// 攝像機(jī)
const camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// 渲染器
const renderer = new THREE.WebGLRenderer();
// 定位并將相機(jī)指向場景的中心
camera.position.set(-30, 40, 30);
camera.lookAt(scene.position);
// 渲染器底色
renderer.setClearColor(new THREE.Color(0xeeeeee));
// 渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 設(shè)置渲染器陰影
renderer.shadowMapEnabled = true;
// 設(shè)置光源
const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
// 開啟陰影功能
spotLight.castShadow = true;
// 控制陰影的精細(xì)程度
spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
spotLight.shadow.camera.far = 130;
spotLight.shadow.camera.near = 40;
scene.add(spotLight);
// 設(shè)置平面（長王污、寬罢吃、高設(shè)置 ）
const planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
// MeshBasicMaterial材質(zhì)不受光源影響
const planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
// 旋轉(zhuǎn)和定位平面
plane.rotation.x = -0.5 * Math.PI;
plane.position.set(0, 0, 0);
scene.add(plane);
// 設(shè)置正方體
const cubeGeometry = new THREE.BoxGeometry(10, 10, 10);
// MeshLambertMaterial受光源影響
const cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xff0000
});
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 允許物體產(chǎn)生陰影
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>
