一個基本的three.js三維場景立方體

雲端運算與程式碼 2023年05月24日 23:50 636 warenet

以下是一個基本的three.js三維場景，使用HTML和JavaScript編寫。下面的代碼創建了一個簡單的立方體並呈現在窗口中：

一個基本的three.js三維場景立方體第1张

<!DOCTYPE html>
<html>
  <head>
    <title>Three.js Demo</title>
    <style>
      body { margin: 0; }
      canvas { width: 100%; height: 100%; }
    </style>
  </head>
  <body>
    <script src="https://dm.qunapu.com/threejs/build/three.min.js"></script>
    <script>
      // 創建場景
      var scene = new THREE.Scene();
      // 創建相機
      var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      // 創建渲染器
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
      // 創建立方體
      var geometry = new THREE.BoxGeometry();
      var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      var cube = new THREE.Mesh(geometry, material);
      scene.add(cube);
      // 設置相機位置
      camera.position.z = 5;
      // 渲染場景
      function animate() {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
      }
      animate();
    </script>
  </body>
</html>

在這個例子中，我們創建了一個簡單的場景，其中包含一個綠色立方體並通過渲染器呈現在窗口中。下面是代碼中的每個組件的解釋：

- `THREE.Scene()`: 用於創建場景對象。

- `THREE.PerspectiveCamera(fov, aspect, near, far)`: 用於創建透視投影相機。fov參數是相機的視角，aspect參數是視口的寬高比，near參數是相機到近平面的距離，far參數是相機到遠平面的距離。

- `THREE.WebGlRenderer()`: 用於創建WebGL渲染器，它將呈現場景和相機中的三維對象。

- `THREE.BoxGeometry()`: 用於創建一個立方體幾何體對象，它由6個面組成。

- `THREE.MeshBasicMaterial({ color: 0x00ff00 })`: 用於創建mesh基礎材質對象，可以設置顏色或貼圖等特性。

- `THREE.Mesh(geometry, material)`: 用於將幾何體與材質組合成一個mesh對象。

- `scene.add(cube)`: 將mesh對象添加到場景中。

- `camera.position.z = 5`: 將相機的z軸位置設置為5，使其與立方體的距離為5個單位長度。

- `renderer.render(scene, camera)`: 這是我們常規地將場景和鏡頭傳遞給渲染器來呈現場景的方式。

- `animate()`: 創建一個遞歸調用函數，在渲染每一幀時可以執行額外的邏輯代碼。在這個例子中，我們旋轉立方體並再次渲染場景的方法。

上面這些代碼將顯示一個綠色的立方體，並且當您在窗口中轉動時，立方體也會相應地旋轉。註意，示例僅用於顯示基本用例，three.js具有更廣泛的工具箱，可以使用光源、紋理、動畫、特效等擴展示例。