用Three.js畫的旋轉手機HTML代碼示例

雲端運算與程式碼 2023年05月25日 18:20 739 訪客

以下是一篇介紹 HTML 代碼和 Three.js 的三維旋轉手機代碼示例：

用Three.js畫的旋轉手機HTML代碼示例第1张

<!DOCTYPE html>
<html>
  <head>
    <title>三維旋轉手機</title>
    <meta charset="UTF-8">
    <meta name="description" content="用 Three.js 創建一個旋轉的三維手機">
    <meta name="author" content="Bob">
    <script src="https://dm.qunapu.com/threejs/build/three.min.js"></script>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <script>
      // 創建場景
      const scene = new THREE.Scene();
      // 創建相機
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.z = 5;
      // 創建渲染器
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
      // 創建正方體
      const geometry = new THREE.BoxGeometry(1.5, 3, 0.5);
      const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);
      // 創建光源
      const light = new THREE.PointLight(0xffffff, 1, 100);
      light.position.set(0, 0, 10);
      scene.add(light);
      // 渲染場景
      function animate() {
        requestAnimationFrame(animate);
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
      }
      animate();
    </script>
  </body>
</html>

上面的代碼用 Three.js 創建了一個簡單的三維旋轉手機場景，包含了以下 HTML 元素和 Three.js 代碼元素：

- `<script>`: 在 HTML 中嵌入 JavaScript 代碼的元素。

- `const`: 聲明一個常量。

- `new THREE.Scene()`: 創建一個 Three.js 場景，將其中的物體添加到其中。

- `new THREE.PerspectiveCamera()`: 創建一個 Three.js 透視相機。

- `new THREE.WebGLRenderer()`: 創建一個 Three.js WebGL 渲染器。

- `new THREE.BoxGeometry()`: 創建一個立方體。

- `new THREE.MeshBasicMaterial()`: 創建了一個用於添加到 Mesh 的 Basic Material，代表使用一種固定顏色的材質。

- `new THREE.Mesh()`: 創建了一個 Mesh 物體。

- `new THREE.PointLight()`: 創建了一個 Three.js 點光源。

- `requestAnimationFrame()`: 請求瀏覽器執行一次動畫幀，用於循環渲染場景。

- `cube.rotation.y`: 改變立方體物體的旋轉。