threejs 360全景代碼並解釋代碼元素意義

Cloud computing and code 2023年05月25日 10:06 713 visitor

以下是一個簡單的Three.js 360全景演示，代碼裏有詳細註釋。

threejs 360全景代碼並解釋代碼元素意義第1张

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Three.js 360全景演示</title>
    <style>
      /* 設置頁面元素樣式 */
      body {
        margin: 0;
        overflow: hidden;
      }
      canvas {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <!-- 創建容器來顯示Three.js場景 -->
    <div id="container"></div>
    <!-- 引入Three.js庫 -->
    <script src="https://dm.qunapu.com/threejs/build/three.min.js"></script>
    <script>
      // 獲取容器並設置寬高
      var container = document.getElementById('container');
      var width = window.innerWidth;
      var height = window.innerHeight;
     
      // 創建渲染器，設置渲染器寬高
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height);
      container.appendChild(renderer.domElement);
      // 創建場景
      var scene = new THREE.Scene();
      // 創建全景相機，設置fov為75，aspect比例為寬高比，near=0.1，far=1000
      var camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
      camera.position.set(0, 0, 0); // 設置相機位置
      // 創建全景盒子
      var box_geometry = new THREE.BoxGeometry(100, 100, 100, 6, 6, 6);
      var box_material = new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('pano.jpg'), side: THREE.BackSide });
      var box = new THREE.Mesh(box_geometry, box_material);
      scene.add(box);
      // 渲染場景
      function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      }
      animate();
    </script>
  </body>
</html>

代碼解釋：

1. `THREE.WebGLRenderer` 創建 Three.js 渲染器，並將其插入到頁面中的 `container` 容器中。

2. `THREE.Scene` 創建 Three.js 場景。

3. `THREE.PerspectiveCamera` 創建 Three.js 相機，FOV（視角）設置為 75 ，aspect 的寬高比為 `width / height`, near 為相機與屏幕的最近距離，far 為相機與屏幕的最遠距離。然後將相機設置到 (0,0,0)。

4. `THREE.TextureLoader` 加載全景圖片，`THREE.BoxGeometry` 創建一個包含 6 個面的純色立方體。`THREE.MeshBasicMaterial` 在這個方塊上透過材質放置全景，並使用 `THREE.BackSide` 將 texture 放置到背面。

5. `animate()` 創建一個函數來渲染每一幀，並遞歸調用它，渲染相機 position 在全景之中顯示的場景。