簡介

three.js 是一個流行的 JavaScript 庫，用于創建和渲染 3D 圖形。它可以讓你在網頁上創建交互式和逼真的 3D 場景。

步驟 1：設置

要開始使用 three.js，你需要：

• 一個文本編輯器
• 一個網絡服務器（如 Nginx 或 Apache）
• three.js 庫

步驟2：創建場景

我們需要創建一個場景，它將包含所有 3D 對象。

    const scene = new THREE.Scene();

步驟 3：創建相機

接下來，我們需要創建一個相機，其視點我們將用來看場景。

    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.z = 2;

步驟 4：創建渲染器

渲染器負責將場景繪制到屏幕上。

    const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.DOMElement);

步驟 5：創建立方體

現在，我們創建一個立方體作為我們的第一個 3D 對象。

    const geometry = new THREE.BoxGeometry();const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });const cube = new THREE.Mesh(geometry, material);scene.add(cube);

步驟 6：動畫化立方體

我們可以使用 requestAnimationFrame() 方法來動畫化立方體。

    function animate() {requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);}animate();

步驟 7：完整代碼

你的完整代碼如下所示：

結論

恭喜！你已經創建了你的第一個 3D 場景。你可以繼續探索 three.js 的其他功能，例如燈光、紋理和交互性，以創建更復雜和身臨其境的場景。

---

---

相關標簽： three.js初學者指南、 一步一步構建你的第一個3D場景、 three.js、

上一篇：深入threejs探索高級技術以創建令人驚嘆的3

下一篇：釋放你的創造力用threejs構建逼真的3D模型