本文學習資源來自《Three.js 開發指南：WebGL的JavaScript 3D庫》

從外部載入幾體體

支援的三維格式

Three.js 可以讀取幾種三維檔案格式，並從中匯入幾體體和網格，支援的檔案格式有：

以Three.js的JSON格式儲存和載入

儲存和載入THREE.Mesh

            this.save = function () {
                var result = knot.toJSON();
                localStorage.setItem("json", JSON.stringify(result));
            };

            this.load = function () {

                scene.remove(loadedMesh);

                var json = localStorage.getItem("json");

                if (json) {
                    var loadedGeometry = JSON.parse(json);
                    var loader = new THREE.ObjectLoader();

                    loadedMesh = loader.parse(loadedGeometry);
                    loadedMesh.position.x -= 50;
                    scene.add(loadedMesh);
                }
            }

這裡將THREE.Mesh匯出為JSON，並儲存到了localStorage裡。

儲存和載入場景

需要載入庫：

<script type="text/javascript" src="../libs/SceneLoader.js"></script>
<script type="text/javascript" src="../libs/SceneExporter.js"></script>

            this.exportScene = function () {
                var exporter = new THREE.SceneExporter();
                var sceneJson = JSON.stringify(exporter.parse(scene));
                localStorage.setItem('scene', sceneJson);
            };

            this.clearScene = function () {
                scene = new THREE.Scene();
            };

            this.importScene = function () {
                var json = (localStorage.getItem('scene'));
                var sceneLoader = new THREE.SceneLoader();

                sceneLoader.parse(JSON.parse(json), function (e) {
                    scene = e.scene;
                }, '.');
            }

使用 Blender

要從Blender中匯出Three.js醋，首先要將Three.js匯出器新增到Blender中。這裡省略該部分內容，可參考《Three.js開發指南》 P165 頁的介紹。
匯出的js大概是這樣的：

材質：

Three.js載入模型：

       var loader = new THREE.JSONLoader();
        loader.load('../assets/models/misc_chair01.js', function (geometry, mat) {
            mesh = new THREE.Mesh(geometry, mat[0]);

            mesh.scale.x = 15;
            mesh.scale.y = 15;
            mesh.scale.z = 15;

            scene.add(mesh);

        }, '../assets/models/');

執行效果：

匯入三維格式

匯入這些三維格式都需要引入額外的js檔案。

OBJ和MTL

引入js

    <script type="text/javascript" src="../libs/OBJLoader.js"></script>

匯入模型再賦予材質的程式碼：

        var loader = new THREE.OBJLoader();
        loader.load('../assets/models/pinecone.obj', function (loadedMesh) {
            var material = new THREE.MeshLambertMaterial({color: 0x5C3A21});

            // loadedMesh is a group of meshes. For
            // each mesh set the material, and compute the information
            // three.js needs for rendering.
            loadedMesh.children.forEach(function (child) {
                child.material = material;
                child.geometry.computeFaceNormals();
                child.geometry.computeVertexNormals();
            });

            mesh = loadedMesh;
            loadedMesh.scale.set(100, 100, 100);
            loadedMesh.rotation.x = -0.3;
            scene.add(loadedMesh);
        });

執行示例：

下面的示例是載入模型並直接賦予材質：

<!--引入js：-->
    <script type="text/javascript" src="../libs/OBJLoader.js"></script>
    <script type="text/javascript" src="../libs/MTLLoader.js"></script>
    <script type="text/javascript" src="../libs/OBJMTLLoader.js"></script>
        var loader = new THREE.OBJMTLLoader();

        loader.load('../assets/models/butterfly.obj', '../assets/models/butterfly.mtl', function (object) {

            // configure the wings
            var wing2 = object.children[5].children[0];
            var wing1 = object.children[4].children[0];

            wing1.material.opacity = 0.6;
            wing1.material.transparent = true;
            wing1.material.depthTest = false;
            wing1.material.side = THREE.DoubleSide;

            wing2.material.opacity = 0.6;
            wing2.material.depthTest = false;
            wing2.material.transparent = true;
            wing2.material.side = THREE.DoubleSide;

            object.scale.set(140, 140, 140);
            mesh = object;
            scene.add(mesh);

            object.rotation.x = 0.2;
            object.rotation.y = -1.3;
        });

載入Collada模型（副檔名為.dae）

<!--引入 js-->

    <script type="text/javascript" src="../libs/ColladaLoader.js"></script>

<!--載入模型-->
        var loader = new THREE.ColladaLoader();

        var mesh;
        loader.load("../assets/models/dae/Truck_dae.dae", function (result) {
            mesh = result.scene.children[0].children[0].clone();
            mesh.scale.set(4, 4, 4);
            scene.add(mesh);
        });

效果：

載入STL、CTM、VTK、AWD、Assimp、VRML和Babylon模型

類似上面的方式，省略相關內容。