使用three.js載入3D模型

一、three.js載入模型

three.js是一個基於WebGL的開源JavaScript庫，用於創建3D圖形，同時它也支持載入和渲染3D模型。使用three.js可以方便快捷地創建WebGL應用程序，並且不需要關注底層的複雜細節。下面讓我們來看看如何使用three.js載入3D模型。

首先，你需要引入three.js庫。你可以通過下面的方式將其引入你的HTML代碼中：

  
  <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js"></script>
  

接著，你需要創建場景、相機、燈光、材質、紋理等元素，並且將它們添加到渲染器中。下面是一個基本的three.js場景：

  
    // 創建場景
    var scene = new THREE.Scene();

    // 創建相機
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
    camera.position.set(0, 0, 10);

    // 創建渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 創建物體
    var geometry = new THREE.BoxGeometry();
    var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );

    // 渲染場景
    renderer.render(scene, camera);
  

通過上面的代碼，我們創建了一個場景，一個相機，一個渲染器，以及一個綠色的立方體。其中，PerspectiveCamera是透視相機，表示透視關係，可以產生透視效果。BoxGeometry表示一個立方體幾何體，Mesh表示一個網格，MeshBasicMaterial是一種基本材質。

二、three.js引入3D模型

three.js支持多種格式的3D模型，包括JSON、OBJ、MTL、FBX等。不同的格式有不同的優缺點，在選擇模型格式時需要考慮到自己的需求。下面讓我們看看如何引入不同格式的3D模型。

1. JSON格式的3D模型

JSON格式的3D模型通常是由Blender或者其他3D建模軟體導出的。需要使用Three.js的JSONLoader載入器載入。下面是一個JSON格式的模型載入示例：

  
    // 創建場景
    var scene = new THREE.Scene();

    // 創建相機
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
    camera.position.set(0, 0, 10);

    // 創建渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 載入json模型
    var loader = new THREE.JSONLoader();
    loader.load('model.json', function(geometry, material){
      var mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
    });

    // 渲染場景
    renderer.render(scene, camera);
  

上面的示例代碼使用了JSONLoader載入器來載入模型，load方法用來載入模型給它傳遞模型的url，回調函數里通過Mesh來創建物體，並添加到場景中。

2. OBJ格式的3D模型

OBJ格式的3D模型被廣泛使用，可以使用Three.js的OBJLoader載入器來載入OBJ格式的模型。下面是一個OBJ格式的模型載入示例：

  
    // 創建場景
    var scene = new THREE.Scene();

    // 創建相機
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
    camera.position.set(0, 0, 10);

    // 創建渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 載入obj模型
    var loader = new THREE.OBJLoader();
    loader.load('model.obj', function(object){
      scene.add(object);
    });

    // 渲染場景
    renderer.render(scene, camera);
  

上面的示例代碼使用了OBJLoader載入器來載入模型，load方法用來載入模型給它傳遞模型的url，回調函數里通過add方法添加到場景中。

三、three.js載入模型進度

當我們載入較大的模型時，頁面可能會因為長時間未響應而顯示「假死」狀態，為了解決這個問題，我們可以使用three.js提供的LoadingManager和onProgress（進度）方法來追蹤並顯示模型載入進度。下面給出了一個載入進度的實例：

  
    // 創建場景
    var scene = new THREE.Scene();

    // 創建相機
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
    camera.position.set(0, 0, 10);

    // 創建渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 創建LoadingManager，並且給它添加onProgress方法
    var manager = new THREE.LoadingManager();
    manager.onProgress = function(item, loaded, total){
      console.log(item, loaded, total);
    }

    // 創建一個obj載入器，並且給它傳入創建的manager
    var loader = new THREE.OBJLoader(manager);
    loader.load('model.obj', function(object){
      scene.add(object);
    });

    // 渲染場景
    renderer.render(scene, camera);
  

上面的示例代碼中通過在LoadingManager和load方法間添加連接器來追蹤進度，每次一個物體被成功載入時會通過添加到場景中來觸發onProgress方法，顯示載入進度。

四、總結

使用three.js可以方便地載入和渲染3D模型，有了它我們就可以讓Web應用程序擁有更加豐富的交互體驗。本文介紹了使用three.js載入3D模型的步驟，包括引入three.js、引入3D模型、載入模型進度等內容。希望這篇文章能夠幫助你更好地使用three.js創建你的3D應用程序。