【前端開發】three.js入門

阿新 • • 發佈：2020-12-28

Three.js是一款webGL框架，由於其易用性被廣泛應用。Three.js在WebGL的api介面基礎上，又進行的一層封裝。

用最簡單的一句話概括：WebGL和Three.js的關係，相當於JavaScript和Jquery的關係。

功能概述：

Three.js作為WebGL框架中的佼佼者，由於它的易用性和擴充套件性，使得它能夠滿足大部分的開發需求，Three.js的具體功能如下：

Three.js掩蓋了3D渲染的細節：Three.js將WebGL原生API的細節抽象化，將3D場景拆解為網格、材質和光源(即它內建了圖形程式設計常用的一些物件種類)。
面向物件：開發者可以使用上層的JavaScript物件，而不是僅僅呼叫JavaScript函式。

功能非常豐富：Three.js除了封裝了WebGL原始API之外，Three.js還包含了許多實用的內建物件，可以方便地應用於遊戲開發、動畫製作、幻燈片製作、髙解析度模型和一些特殊的視覺效果製作。
速度很快：Three.js採用了3D圖形最佳實踐來保證在不失可用性的前提下，保持極高的效能。
支援互動：WebGL本身並不提供拾取（picking)功能（即是否知道滑鼠正處於某個物體上）。而Three.js則固化了拾取支援，這就使得你可以輕鬆為你的應用新增互動功能。
包含數學庫：Three.js擁有一個強大易用的數學庫，你可以在其中進行矩陣、投影和向量運算。
內建檔案格式支援：你可以使用流行的3D建模軟體匯出文字格式的檔案，然後使用Three.js載入；也可以使用Three.js自己的JSON格式或二進位制格式。

擴充套件性很強：為Three.js新增新的特性或進行自定義優化是很容易的事情。如果你需要某個特殊的資料結構，那麼只需要封裝到Three.js即可。
支援HTML5 canvas：Three.js不但支援WebGL，而且還支援使用Canvas2D、Css3D和SVG進行渲染。在未相容WebGL的環境中可以回退到其它的解決方案。

缺點：

雖然Three.js的優勢很大，但是它也有它的不足之處：

官網文件非常粗糙，對於新手極度不友好。
國內的相關資源匱乏。
Three.js所有的資料都是以英文格式存在，對國內的朋友來說又提高了門檻。
Three.js不是遊戲引擎，一些遊戲相關的功能沒有封裝在裡面，如果需要相關的功能需要進行二次開發。

程式碼案例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>我的第一個Three.js案例</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body onload="init()">
<script src="https://cdn.bootcss.com/three.js/92/three.js"></script>
<script>
    //宣告一些全域性變數
    var renderer, camera, scene, geometry, material, mesh;

    //初始化渲染器
    function initRenderer() {
        renderer = new THREE.WebGLRenderer(); //例項化渲染器
        renderer.setSize(window.innerWidth, window.innerHeight); //設定寬和高
        document.body.appendChild(renderer.domElement); //新增到dom
    }

    //初始化場景
    function initScene() {
        scene = new THREE.Scene(); //例項化場景
    }

    //初始化相機
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); //例項化相機
        camera.position.set(0, 0, 15);
    }

    //建立模型
    function initMesh() {
        geometry = new THREE.BoxGeometry( 2, 2, 2 ); //建立幾何體
        material = new THREE.MeshNormalMaterial(); //建立材質

        mesh = new THREE.Mesh( geometry, material ); //建立網格
        scene.add( mesh ); //將網格新增到場景
    }

    //執行動畫
    function animate() {
        requestAnimationFrame(animate); //迴圈呼叫函式

        mesh.rotation.x += 0.01; //每幀網格模型的沿x軸旋轉0.01弧度
        mesh.rotation.y += 0.02; //每幀網格模型的沿y軸旋轉0.02弧度

        renderer.render( scene, camera ); //渲染介面
    }

    //初始化函式，頁面載入完成是呼叫
    function init() {
        initRenderer();
        initScene();
        initCamera();
        initMesh();

        animate();
    }
</script>
</body>
</html>