一、場景搭建

1、使用three.js搭建三維場景需要的基本要素

渲染器與場景

（1、）渲染器(renderer)：是三維中的基本，是three.js的主要對象

const renderer = new THREE.WebGLRenderer();

（2、）場景（scene）：屏幕中間的矩形，是一個容器，主要用于保存、跟蹤所要渲染的物體和使用的光源，以及使用的相機,

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、攝像機（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 : 長寬比（決定橫向視角和縱向視角的比例關(guān)系）
near : 近面距離（定義相機從距離物體多近的距離開始渲染）
far : 遠面距離（定義相機從當前位置能夠看多遠）
zoom : 變焦（變焦值默認是1，控制場景的放大和縮小，當大于1時場景將放大，反之）

image.png

2、光源(spotLight)：對材質(zhì)如何顯示，以及生成陰影時材質(zhì)如何使用產(chǎn)生影響

```
  const spotLight = new THREE.SpotLight(0xffffff);
```

3、物體（Geometry+MeshLambertMaterial）：相機里主要的渲染對象，如方塊、球體。一個物體是由幾何體加上材質(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)成物體的要素

1. 幾何體(Geometry)：對象顧名思義代表一些幾何體，如球體、立方體、平面、狗、貓、人、樹、建筑等物體的頂點信息。

2. 材質(zhì)(Material)：對象代表繪制幾何體的表面屬性，包括使用的顏色，和光亮程度。

3. 網(wǎng)格(Mesh)：Geometry和Material定義了物體的外觀和材質(zhì)，而Mesh則是將物體放到場景中去的方法。

基本場景效果圖

image.png

場景構(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();
      // 攝像機
      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);
      // 設(shè)置渲染器陰影
      renderer.shadowMapEnabled = true;

      // 設(shè)置光源
      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);

      // 設(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>