three.js

three.js 是一個基於 JavaScript 的瀏覽器 3D 繪圖引擎，允許開發者在網頁上輕鬆創建和顯示 3D 場景。

使用方法

以下是一個簡單的範例，展示如何使用 three.js 創建一個基本的 3D 場景：

import three = CG.ThreeJs.three;
import OrbitControls = CG.ThreeJs.examples.jsm.controls.OrbitControls;

function start(): void {

    // 初始化 three，用於自動建立場景、攝影機、渲染循環。
    three.initialize(800, 600);

    // 建立一個軸心輔助物件，用於查看 x, y, z 的方向
    const axesHelper = new THREE.AxesHelper(2);
    three.scene.add(axesHelper); // 添加至場景中

    // 創建一個平面作為地板
    const planeGeometry = new THREE.PlaneGeometry(10, 10); // 表示平面的幾何形狀
    const planeMaterial = new THREE.MeshBasicMaterial({ color: 0xAAAAAA, side: THREE.DoubleSide }); // 基本紋理
    const plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.rotation.x = Math.PI / 2; // 平面一開始為垂直，調整 X 軸旋轉角度使其水平
    three.scene.add(plane); // 將平面添加至場景中

    // 創建方塊
    const boxGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5); // 表示立方體的幾何形狀
    const noxMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 基本紋理
    const box = new THREE.Mesh(boxGeometry, noxMaterial);
    box.position.y = 0.25; // 將方塊抬高 0.25，使其貼地
    three.scene.add(box); // 將方塊添加至場景中

    three.camera.position.set(0, 2, 5); // 調整攝影機位置
    three.camera.lookAt(0, 0, 0); // 讓攝影機看向 (0, 0, 0)
    // 本模組初始化時會自動建立攝影機，一般需自行建立

    // 新增一個控制器，可以用滑鼠來控制攝影機的視角，像是自由旋轉、平移和縮放效果。
    const controls = new OrbitControls(three.camera, three.renderer.domElement);

    let lastFrame = Date.now();
    three.beforeRender = () => { // 你可以複寫這個函數，在渲染畫面前做點事
        const currentFrame = Date.now(); // 為當前幀時間
        const deltaTime = currentFrame - lastFrame; // 計算自上幀以來的時間差
        lastFrame = currentFrame; // 更新 lastFrame 為當前幀時間

         // 如果 controls.enableDamping 或 controls.autoRotate 設為 true 則必須每次渲染畫面前更新。
        controls.update(deltaTime); // 更新 OrbitControls
    };


}

start();

Resources

• three.js - 基於 JavaScript 的瀏覽器 3D 繪圖引擎。

Authors

cook1470