three.js基本概念和嘗試

阿新 • • 發佈：2021-10-18

功能概述：

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的環境中可以回退到其它的解決方案。

初次嘗試的案例程式碼：

<!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(90, window.innerWidth / window.innerHeight, 1, 200); //例項化相機
        camera.position.set(0, 0, 15);
        camera.up.set(0,1,0)
    }

    //建立模型
    function initMesh() {
        geometry = new THREE.BoxGeometry( 2, 2, 2 ); //建立幾何體
        material = new THREE.MeshNormalMaterial(); //建立材質
        // 1 材質分為基礎線條材質和一般的線條材質
        /**
         * @destription: 基礎線條材質的基本屬性和使用方法以及建構函式。
         * @params:
        */
        // var material = new THREE.LineBasicMaterial( {
        //   color: 0xffffff, //顏色
        //   linewidth: 1, //線寬
        //   linecap: 'round', //ignored by WebGLRenderer 定義線兩端的樣式。可選值為 'butt', 'round' 和 'square'。預設值為 'round'。
        //   linejoin:  'round' //ignored by WebGLRenderer 定義線連線節點的樣式。可選值為 'round', 'bevel' 和 'miter'。預設值為 'round'。
        // } );


        mesh = new THREE.Mesh( geometry, material ); //建立網格
        /**
         * @params: 網格屬性 mesh 
         * 
         * /
         * 
         * 
        */
        // var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
        // var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
        // var mesh = new THREE.Mesh( geometry, material ); // 1 實體 2 材質屬性
        // scene.add( mesh ); //新增到場景中
        
        var axesHelper = new THREE.AxesHelper( 5 );
        // scene.add(  );
        scene.add( mesh,axesHelper ); //將網格新增到場景
    }

    //執行動畫
    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>