【Three.js】九、three.js模型加載器

• 一、ObjectLoader
• • 1.1 ObjectLoader常用方法
  • • 1.1.1 .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : null
    • 1.1.2 .parse ( json : Object, onLoad : Function ) : Object3D
• 二、LegacyJSONLoader
• • 2.1 LegacyJSONLoader常用方法
  • • 2.1.1 .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : null
• 三、OBJLoader
• • 3.1 OBJLoader常用方法
  • • 3.1.1 .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : null
    • 3.1.2 .setMaterials ( materials : MTLLoader.MaterialCreator ) : OBJLoader
    • 3.1.3 .setPath ( path : String ) : OBJLoader
• 四、MTLLoader
• • 4.1 MTLLoader常用方法
  • • 4.1.1 .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : null
    • 4.1.2 .setPath ( path : String ) : MTLLoader
    • 4.1.3 .setMaterialOptions ( options : Object ) : MTLLoader
• 五、ColladaLoader
• • 5.1 ColladaLoader常用方法
  • • 5.1.1 .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : null
    • 5.1.2 .setPath ( path : String ) : MTLLoader
• 六、BabylonLoader
• 七、GLTFLoader
• 八、MMDLoader
• 九、PCDLoader
• 十、PDBLoader
• 十一、SVGLoader
• 十二、TGALoader
• 十三、PRWMLoader

一、ObjectLoader

用于加載JSON資源的加載器。

1.1 ObjectLoader常用方法

1.1.1 .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : null

從URL中進行加載，并将被解析的響應内容傳遞給onLoad。

參數	說明
url	檔案的URL或者路徑
onLoad	加載完成時将調用。回調參數為将要加載的object.
onProgress	将在加載過程中進行調用。參數為XMLHttpRequest執行個體，執行個體包含total和loaded位元組。
onError	在加載錯誤時被調用。

1.1.2 .parse ( json : Object, onLoad : Function ) : Object3D

解析一個JSON結構，并傳回一個threejs對象. 内部使用.load進行加載, 但也可以直接用于解析先前加載的JSON結構。

參數	說明
json	必選參數，需要被解析的JSON源。
onLoad	當解析完成時被調用，其中參數被解析為object.

示例：

import '../../stylus/index.styl'
import * as THREE from 'three'
import * as dat from 'dat.gui'
import {initTrackballControls, initThree, initStats} from "../../util/util"

async function init() {
    let stats = initStats();
    let {camera, scene, renderer} = initThree();

    let gui = new dat.GUI();
    let storage = {};
    let objLoader = new THREE.ObjectLoader();

    function load() {
        return new Promise((resolve, reject) => {
            objLoader.load('../../static/json/trousKnot.json', (obj) => {
                obj.position.set(20, 0, 0);
                scene.add(obj);
                resolve(obj);
            }, null, (err) => {
                reject(err);
            });
        })
    }

    let torusKnot = await load();
    let controls = {
        save: function () {
            let json = torusKnot.toJSON();
            storage.torusKnot = json;
        },
        load: function () {
            if (storage.torusKnot) {
                let obj = objLoader.parse(storage.torusKnot);
                obj.position.set(-20, 0, 0);
                scene.add(obj);
            }
        }
    };
    gui.add(controls, 'save');
    gui.add(controls, 'load');
    let trackballControls = initTrackballControls(camera, renderer);

    function render() {
        stats.update();
        trackballControls.update();
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }

    render();
}

init();
           

所使用的json資料：

{
    "metadata": {
        "version": 4.5,
        "type": "Object",
        "generator": "Object3D.toJSON"
    },
    "geometries": [
        {
            "uuid": "4562EC9C-1F70-4725-B796-B5A5C8FB0B64",
            "type": "TorusKnotGeometry",
            "radius": 10,
            "tube": 2,
            "tubularSegments": 64,
            "radialSegments": 40
        }
    ],
    "materials": [
        {
            "uuid": "794AD652-5479-42C5-9C05-4B1990722994",
            "type": "MeshNormalMaterial",
            "depthFunc": 3,
            "depthTest": true,
            "depthWrite": true,
            "stencilWrite": false,
            "stencilFunc": 519,
            "stencilRef": 0,
            "stencilMask": 255,
            "stencilFail": 7680,
            "stencilZFail": 7680,
            "stencilZPass": 7680
        }
    ],
    "object": {
        "uuid": "21C4B19D-8989-40CD-8604-AC333BA3F960",
        "type": "Mesh",
        "layers": 1,
        "matrix": [1,0,0,0,0,1,0,0,0,0,1,0,20,0,0,1],
        "geometry": "4562EC9C-1F70-4725-B796-B5A5C8FB0B64",
        "material": "794AD652-5479-42C5-9C05-4B1990722994"
    }
}
           

上述例子展示一個從外部加載的圓環扭結幾何體，并可通過右側控制欄複制一個幾何體（依次點選save、load）。

完整示例(src/pages/three_ObjectLoader_demo):https://github.com/MAXLZ1/threejs_demo

二、LegacyJSONLoader

JSONLoader在r99及之後版本被移除，取而代之的是LegacyJSONLoader，位于examples/js/loaders/deprecated/LegacyJSONLoader.js下

加載json資源。

2.1 LegacyJSONLoader常用方法

2.1.1 .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : null

同ObjectLoader.load。

示例：

import '../../stylus/index.styl'
import * as THREE from 'three'
import * as dat from 'dat.gui'
import {initTrackballControls, initThree, initStats} from "../../util/util"
import {LegacyJSONLoader} from "../../libs/LegacyJSONLoader"

function init() {
    let stats = initStats();
    let {camera, scene, renderer} = initThree();

    let spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(0, 200, 300);
    spotLight.shadow.camera.far = 1400;
    spotLight.shadow.mapSize.set(2048, 2048);
    spotLight.castShadow = true;
    scene.add(spotLight);

    let ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
    scene.add(ambientLight);

    let planeGeometry = new THREE.PlaneBufferGeometry(1000, 1000, 1,1);
    let planeMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff
    });
    let plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.rotation.x = -0.5 * Math.PI;
    plane.receiveShadow = true;
    scene.add(plane);

    let jsonLoader = new LegacyJSONLoader();
    jsonLoader.load('../../static/modules/house/house.json', (geo, mater) => {
        let house = new THREE.Mesh(geo, mater);
        house.castShadow  = true;
        house.receiveShadow = true;
        house.position.set(0,2,15);
        scene.add(house);
        spotLight.target = house;
    });

    let trackballControls = initTrackballControls(camera, renderer);

    function render() {
        stats.update();
        trackballControls.update();
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }

    render();
}

init();
           

完整示例(src/pages/three_LegacyJSON_demo):https://github.com/MAXLZ1/threejs_demo

三、OBJLoader

位于examples/js/loaders

加載.obj資源檔案。與MTLLoader一起使用可為對象添加材質。

使用npm或cnpm安裝

cnpm install three-obj-loader -S

npm install three-obj-loader -S

3.1 OBJLoader常用方法

3.1.1 .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : null

同ObjectLoader.load。

3.1.2 .setMaterials ( materials : MTLLoader.MaterialCreator ) : OBJLoader

設定由MTLLoader. materialcreator或MTLLoader. materialcreator的任何其他的材料。

3.1.3 .setPath ( path : String ) : OBJLoader

設定加載檔案的基本路徑或URL。

四、MTLLoader

位于examples/js/loaders下

加載.mtl資源檔案。該檔案儲存了.obj中對象所使用的材質資訊。

使用npm或cnpm安裝

cnpm install three-mtl-loader -S

npm install three-mtl-loader -S

4.1 MTLLoader常用方法

4.1.1 .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : null

同ObjectLoader.load。

4.1.2 .setPath ( path : String ) : MTLLoader

同OBJLoader。

4.1.3 .setMaterialOptions ( options : Object ) : MTLLoader

設定材料屬性。

1. side: 設定材料渲染哪一面，同Material的side。
2. wrap
3. normalizeRGB
4. ignoreZeroRGBs
5. invertTrProperty

示例：

import '../../stylus/index.styl'
import * as THREE from 'three'
import {initTrackballControls, initThree, initStats} from "../../util/util";
import OBJLoader from 'three-obj-loader'
import MTLLoader from 'three-mtl-loader'
OBJLoader(THREE);

async function init () {
    let stats = initStats();
    let {camera, renderer, scene} = initThree();
    let trackballControls = initTrackballControls(camera, renderer);
    camera.position.set(-20, 40, 50);

    let spotLight = new THREE.SpotLight(0xc2c2c2);
    spotLight.position.set(0, 100, 100);
    spotLight.castShadow = true;
    spotLight.shadow.mapSize.set(8000, 8000);
    scene.add(spotLight);
    let ambientLight = new THREE.AmbientLight(0xEEEEEE, .4);
    scene.add(ambientLight);

    let planeGeometry = new THREE.PlaneBufferGeometry(60, 40, 1,1);
    let planeMaterial = new THREE.MeshLambertMaterial({
        color:0xffffff
    });
    let plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.rotation.x = - 0.5 * Math.PI;
    plane.position.set(0,0,0);
    plane.receiveShadow = true;
    scene.add(plane);

    let objLoader = new THREE.OBJLoader();
    let mtlLoader = new MTLLoader();
    objLoader.setPath('../../static/modules/store/');
    mtlLoader.setPath('../../static/modules/store/');
    mtlLoader.setMaterialOptions({
        side: THREE.FrontSide,
        wrap: THREE.RepeatWrapping,
        normalizeRGB: false,
        ignoreZeroRGBs: false,
        invertTrProperty: true
    });
    function loadObj (material) {
        return new Promise((resolve, reject) => {
            objLoader.setMaterials(material);
            objLoader.load('storeHouse.obj', (object) => {
                resolve(object);
            }, null, (error) => {
                reject(error);
            });
        });
    }
    function loadMTL () {
        return new Promise((resolve, reject) => {
            mtlLoader.load('storeHouse.mtl', (object) => {
                object.preload();
                resolve(object);
            }, null, (error) => {
                reject(error);
            });
        });
    }
    let material = await loadMTL();
    let obj = await loadObj(material);
    obj.rotation.y = -0.5 * Math.PI;
    // 設定陰影
    for (let i in obj.children) {
        obj.children[i].castShadow = true;
        obj.children[i].receiveShadow = true;
    }
    scene.add(obj);
    function render(){
        stats.update();
        trackballControls.update();
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
    render();
}

init();
           

注意為obj添加陰影的方式，直接設定obj.castShadow=true無效，需要為每個obj.children設定castShadow。

完整示例(src/pages/three_ObjLoader_demo):https://github.com/MAXLZ1/threejs_demo

五、ColladaLoader

加載.dar資源。

5.1 ColladaLoader常用方法

5.1.1 .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : null

同ObjectLoader.load。

5.1.2 .setPath ( path : String ) : MTLLoader

同OBJLoader。

使用示例：

import '../../stylus/index.styl'

import * as THREE from 'three'
import {initThree, initStats} from "../../util/util";
import {ColladaLoader} from "../../libs/loaders/ColladaLoader";
import {Vector3} from "../../libs/three.module";

async function init () {
    let stats = initStats();
    let {camera, scene, renderer} = initThree();
    camera.position.set(8, 10, 8);
    camera.lookAt(new Vector3(0,3,0));

    let ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
    scene.add(ambientLight);
    let directionLight = new THREE.DirectionalLight(0xffffff, 0.8);
    directionLight.position.set(1,1,0).normalize();
    scene.add(directionLight);

    let colladaLoader = new ColladaLoader();
    let load = () => new Promise((resolve, reject) => {
        colladaLoader.setPath('../../static/modules/elf/');
        colladaLoader.load('elf.dae', (object) => {
            resolve(object);
        }, null, (err) => {
            reject(err);
        });
    });
    let obj = (await load()).scene;
    scene.add(obj);
    function render(){
        stats.update();
        obj.rotation.z += 0.01;
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
    render();
}
init();
           

完整示例(src/pages/three_ColladaLoader_demo):https://github.com/MAXLZ1/threejs_demo

下面幾個加載器方法參考ColladaLoader。

六、BabylonLoader

加載.babylon資源，該加載器會加載一個完整場景，包括光源。

示例：

import '../../stylus/index.styl'
import * as THREE from 'three'
import {initTrackballControls, initThree, initStats} from "../../util/util";
import {BabylonLoader} from "../../libs/loaders/BabylonLoader";
import {MeshPhongMaterial} from "../../libs/three.module";

async function init () {
    let stats = initStats();
    let {camera, scene, renderer} = initThree();
    let trackballControls = initTrackballControls(camera, renderer);
    camera.position.set(0, 10, 100);

    let ambientLight = new THREE.AmbientLight(0xcccccc, 0.3);
    scene.add(ambientLight);

    let babylonLoader = new BabylonLoader();
    babylonLoader.setPath('../../static/modules/babylon/');
    let load = () => new Promise((resolve, reject) => {
        babylonLoader.load('skull.babylon', (object) => {
            resolve(object);
        }, null, (err) => {
            reject(err);
        });
    }) ;
    let obj = await load();
    obj.traverse((item) => {
        if (item.isMesh) {
            item.material = new MeshPhongMaterial({
                color: 0xffffff * Math.random()
            })
        }
    });
    // 重新設定對象位置
    obj.children.forEach( item => {
        if (item.type === 'Mesh') {
            item.position.set(0,0,0);
        }
    });
    scene.add(obj);

    function render() {
        stats.update();
        trackballControls.update();
        obj.rotation.y += 0.005;
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
    render();
}

init();
           

完整示例(src/pages/three_BabylonLoader_demo):https://github.com/MAXLZ1/threejs_demo

七、GLTFLoader

加載.gltf資源。

使用npm或cnpm安裝

cnpm install three-gltf-loader -S

npm install three-gltf-loader -S

示例：

import '../../stylus/index.styl'

import * as THREE from 'three'
import GLTFLoader from 'three-gltf-loader'
import {initTrackballControls, initThree, initStats} from "../../util/util";

async function init () {
    let stats = initStats();
    let {camera, renderer, scene} = initThree();
    let trackballControls = initTrackballControls(camera, renderer);
    renderer.setClearColor(0xff0000, 0.2)
    let ambientLight = new THREE.AmbientLight(0xcccccc);
    scene.add(ambientLight);
    let directionLight = new THREE.DirectionalLight(0xffffff);
    directionLight.position.set(0,20,40);
    scene.add(directionLight);
    
    let gltfLoader = new GLTFLoader();
    gltfLoader.setPath('../../static/modules/glTF/');
    let load = () => new Promise((resolve, reject) => {
        gltfLoader.load('DamagedHelmet.gltf', (object) => {
            resolve(object);
        }, null, (error) => {
            reject(error);
        });
    });
    let obj = (await load()).scene;
    obj.scale.set(12,12,12);
    scene.add(obj);
    function render(){
        stats.update();
        trackballControls.update();
        obj.rotation.y += 0.005;
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
    render();
}

init();
           

完整示例(src/pages/three_GLTFLoader):https://github.com/MAXLZ1/threejs_demo

八、MMDLoader

加載.pmd、.pmx、.vmd、.vpd資源。

示例：

import '../../stylus/index.styl'
import * as THREE from 'three'
import {initTrackballControls, initThree, initStats} from "../../util/util";
const AmmoObj = require('../../libs/ammo');
import {MMDLoader} from "../../libs/loaders/MMDLoader";
import {MMDAnimationHelper} from "../../libs/animation/MMDAnimationHelper";
import {OutlineEffect} from '../../libs/OutlineEffect';
AmmoObj().then( function ( AmmoLib ) {
    Ammo = AmmoLib;
    init();
} );

async function init() {
    let stats = initStats();
    let {camera, scene, renderer} = initThree({
        color: 0xffffff
    });
    let trackballControls = initTrackballControls(camera, renderer);
    let clock = new THREE.Clock();

    let ambientLight = new THREE.AmbientLight(0xcccccc, 0.2);
    scene.add(ambientLight);

    let directionLight = new THREE.DirectionalLight(0xffffff, 0.6);
    directionLight.position.set(20, 40, 30);
    directionLight.castShadow = true;
    directionLight.shadow.mapSize.set(2048, 2048);
    directionLight.shadow.camera.near = 10;
    directionLight.shadow.camera.far = 70;
    directionLight.shadow.camera.left = -10;
    directionLight.shadow.camera.right = 10;
    directionLight.shadow.camera.top = 30;
    directionLight.shadow.camera.bottom = -10;
    scene.add(directionLight);

    // let helperLight = new THREE.DirectionalLightHelper(directionLight);
    // scene.add(helperLight);
    //
    // let lightShadow = new THREE.CameraHelper(directionLight.shadow.camera);
    // scene.add(lightShadow);

    let planeGeometry = new THREE.PlaneBufferGeometry(60,60, 1, 1);
    let planeMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff
    });
    let plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.rotation.x = -0.5 * Math.PI;
    plane.receiveShadow = true;
    scene.add(plane);

    let mmdLoader = new MMDLoader();
    let load = () => new Promise((resolve, reject) => {
        mmdLoader.loadWithAnimation('../../static/modules/mmd/miku/miku_v2.pmd',
            ['../../static/modules/mmd/vmds/wavefile_v2.vmd'], (object) => {
            resolve(object);
        }, null, (error) => {
            reject(error);
        });
    });
    let obj = await load();
    let {mesh, animation} = obj;
    directionLight.target = mesh;
    mesh.castShadow = true;
    scene.add(mesh);
    let helper = new MMDAnimationHelper();
    helper.add( mesh, {
        animation,
        physics: true
    });

    // let ikHelper = helper.objects.get( mesh ).ikSolver.createHelper();
    // ikHelper.visible = false;
    // scene.add( ikHelper );
    //
    // let physicsHelper = helper.objects.get(mesh).physics.createHelper();
    // physicsHelper.visible = false;
    // scene.add( physicsHelper );


    function render() {
        stats.update();
        trackballControls.update();
        helper.update(clock.getDelta());
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
    render();
}
           

完整示例(src/pages/three_MMDLoader_demo):https://github.com/MAXLZ1/threejs_demo

九、PCDLoader

加載.pcd資源。

import '../../stylus/index.styl'
import * as THREE from 'three'
import * as gui from 'dat.gui'
import {initTrackballControls, initThree, initStats} from '../../util/util'
import {PCDLoader} from '../../libs/loaders/PCDLoader';

async function init() {
    let stats = initStats();
    let {camera, scene, renderer} = initThree();
    let trackballControls = initTrackballControls(camera, renderer);
    let loader = new PCDLoader();
    camera.position.set(0.2, 0.5, -0.5);
    camera.up.y = -1;

    let load = () => new Promise((resolve, reject) => {
        loader.load('../../static/modules/pcd/Zaghetto.pcd', (points) => {
            if (points ){
                resolve(points);
            } else {
                reject(new Error('檔案加載失敗'));
            }
        });
    });
    let points = await load();
    points.material.color.set(0xfff000);
    scene.add(points);
    let center = points.geometry.boundingSphere.center;
    trackballControls.target.set( center.x, center.y, center.z );
    trackballControls.update();
    let render = () => {
        stats.update();
        trackballControls.update();
        requestAnimationFrame(render);
        renderer.render(scene,camera);
    };
    render();
}

init();
           

完整示例(src/pages/three_PCDLoader_demo):https://github.com/MAXLZ1/threejs_demo

十、PDBLoader

加載.pdb資源。

import '../../stylus/index.styl'
import * as THREE from 'three'
import * as dat from 'dat.gui'
import {initThree, initStats, initTrackballControls} from '../../util/util'
import {PDBLoader} from '../../libs/loaders/PDBLoader'
import {CSS2DObject, CSS2DRenderer} from '../../libs/CSS2DRenderer'
const path = '../../static/modules/molecules/';
const MODULES = [
    'Al2O3.pdb',
    'aspirin.pdb',
    'buckyball.pdb',
    'caf2.pdb',
    'caffeine.pdb',
    'cholesterol.pdb',
    'cocaine.pdb',
    'cu.pdb',
    'cubane.pdb',
    'diamond.pdb',
    'ethanol.pdb',
    'glucose.pdb',
    'graphite.pdb',
    'lsd.pdb',
    'lycopene.pdb',
    'nacl.pdb',
    'nicotine.pdb',
    'ybco.pdb'
];

async function init () {
    let stats = initStats();
    let {camera, renderer, scene} = initThree();
    camera.position.z = 1000;
    let trackballControls = initTrackballControls(camera, renderer);

    let light = new THREE.DirectionalLight( 0xffffff, 0.8 );
    light.position.set( 1, 1, 1 );
    scene.add( light );
    let light2 = new THREE.DirectionalLight( 0xffffff, 0.5 );
    light2.position.set( - 1, - 1, -1 );
    scene.add( light2 );

    let loader = new PDBLoader();
    let offset = new THREE.Vector3();
    let root = new THREE.Group();
    let labelRenderer = new CSS2DRenderer();
    labelRenderer.setSize( window.innerWidth, window.innerHeight );
    labelRenderer.domElement.style.position = 'absolute';
    labelRenderer.domElement.style.top = '0';
    labelRenderer.domElement.style.pointerEvents = 'none';
    document.body.appendChild( labelRenderer.domElement );
    scene.add(root);
    let load = (url) => new Promise((resolve, reject) => {
        loader.load(url, (pdb) => {
            if (pdb) {
                let {geometryAtoms, geometryBonds, json} = pdb;
                let boxGeometry = new THREE.BoxBufferGeometry(1,1,1);
                let sphereGeometry = new THREE.IcosahedronBufferGeometry(1, 3);
                geometryAtoms.computeBoundingBox();
                geometryAtoms.boundingBox.getCenter(offset).negate();
                geometryAtoms.translate(offset.x, offset.y, offset.z);
                geometryBonds.translate(offset.x, offset.y, offset.z);
                let positions = geometryAtoms.getAttribute( 'position' );
                let colors = geometryAtoms.getAttribute( 'color' );
                let position = new THREE.Vector3();
                let color = new THREE.Color();
                // 建立原子
                for (let i = 0; i < positions.count; i++) {
                    position.set(positions.getX(i), positions.getY(i), positions.getZ(i));
                    color.setRGB(colors.getX(i), colors.getY(i), colors.getZ(i));
                    let material = new THREE.MeshPhongMaterial({color});
                    let obj = new THREE.Mesh(sphereGeometry, material);
                    obj.position.copy(position);
                    obj.position.multiplyScalar( 75 );
                    obj.scale.multiplyScalar( 25 );
                    root.add(obj);
                    let  atom = json.atoms[ i ];
                    let text = document.createElement( 'div' );
                    text.className = 'label';
                    text.style.color = 'rgb(' + atom[ 3 ][ 0 ] + ',' + atom[ 3 ][ 1 ] + ',' + atom[ 3 ][ 2 ] + ')';
                    text.textContent = atom[ 4 ];
                    let label = new CSS2DObject( text );
                    label.position.copy( obj.position );
                    root.add( label );
                }

                positions = geometryBonds.getAttribute( 'position' );
                let start = new THREE.Vector3();
                let end = new THREE.Vector3();
                // 建立原子間的鍵
                for (let i = 0; i < positions.count; i+=2) {
                    start.set(positions.getX(i), positions.getY(i), positions.getZ(i));
                    end.set(positions.getX(i + 1), positions.getY(i + 1), positions.getZ(i + 1));
                    start.multiplyScalar( 75 );
                    end.multiplyScalar( 75 );
                    let obj = new THREE.Mesh( boxGeometry, new THREE.MeshPhongMaterial( 0xffffff ) );
                    obj.position.copy( start );
                    obj.position.lerp( end, 0.5 );
                    obj.scale.set( 5, 5, start.distanceTo( end ) );
                    obj.lookAt( end );
                    root.add( obj );
                }
                resolve(pdb);
            } else {
                reject(new Error(`${url}讀取失敗！`));
            }
        });
    });
    await load(path+'caffeine.pdb');

    let gui = new dat.GUI();
    let controls = {
        modules: 'caffeine.pdb'
    };
    gui.add(controls, 'modules', MODULES).onChange(async item => {
        while (root.children.length > 0) {
            let object = root.children[ 0 ];
            object.parent.remove( object );
        }
        await load(path + item);
    });
    
    let render = () => {
        stats.update();
        trackballControls.update();
        requestAnimationFrame(render);
        renderer.render(scene, camera);
        labelRenderer.render(scene, camera);
    }
    render();
}

init();
           

完整示例(src/pages/three_PDBLoader_demo):https://github.com/MAXLZ1/threejs_demo

十一、SVGLoader

加載svg

import * as THREE from 'three'
import {initTrackballControls, initThree, initStats} from "../../util/util";
import {SVGLoader} from '../../libs/loaders/SVGLoader'

async function init () {
    let stats = initStats();
    let {camera, scene, renderer} = initThree({
        color: 0xffffff
    });
    camera.position.set(0,0, 500);
    let trackballControls = initTrackballControls(camera, renderer);

    let loader = new SVGLoader();
    let load = () => new Promise((resolve, reject) => {
        loader.load('../../static/modules/svg/tiger.svg', (data) => {
            let {paths} = data;
            let group = new THREE.Group();
            group.scale.multiplyScalar( 0.25 );
            group.position.x = - 70;
            group.position.y = 70;
            group.scale.y *= - 1;
            paths.forEach((item, index) => {
                let path = item;
                let fillColor = path.userData.style.fill;
                if (fillColor && fillColor !== 'none') {
                    let material = new THREE.MeshBasicMaterial( {
                        color: new THREE.Color().setStyle( fillColor ),
                        opacity: path.userData.style.fillOpacity,
                        transparent: path.userData.style.fillOpacity < 1,
                        side: THREE.DoubleSide,
                        depthWrite: false,
                        wireframe: false
                    } );
                    let shapes = path.toShapes( true );
                    for ( let j = 0; j < shapes.length; j ++ ) {
                        let shape = shapes[ j ];
                        let geometry = new THREE.ShapeBufferGeometry( shape );
                        let mesh = new THREE.Mesh( geometry, material );
                        group.add( mesh );
                    }
                }
                let strokeColor = path.userData.style.stroke;
                if (strokeColor && strokeColor !== 'none' ) {
                    let material = new THREE.MeshBasicMaterial( {
                        color: new THREE.Color().setStyle( strokeColor ),
                        opacity: path.userData.style.strokeOpacity,
                        transparent: path.userData.style.strokeOpacity < 1,
                        side: THREE.DoubleSide,
                        depthWrite: false,
                        wireframe: false
                    } );
                    for ( let j = 0, jl = path.subPaths.length; j < jl; j ++ ) {
                        let subPath = path.subPaths[ j ];
                        let geometry = SVGLoader.pointsToStroke( subPath.getPoints(), path.userData.style );
                        if ( geometry ) {
                            let mesh = new THREE.Mesh( geometry, material );
                            group.add( mesh );
                        }
                    }
                }
            });
            scene.add(group);
            resolve(data);
        });
    });
    await load();

    let render = () => {
        stats.update();
        trackballControls.update();
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    };
    render();
}

init();
           

完整示例(src/pages/three_SVGLoader_demo):https://github.com/MAXLZ1/threejs_demo

十二、TGALoader

加載.tga材質。

import '../../stylus/index.styl'
import * as THREE from 'three'
import {initTrackballControls, initThree, initStats} from "../../util/util"
import {TGALoader} from "../../libs/loaders/TGALoader"

function init () {
    let stats = initStats();
    let {camera, renderer, scene} = initThree();
    let trackballControls = initTrackballControls(camera, renderer);

    let light = new THREE.SpotLight(0xffffff);
    light.position.set(-50, 80, 70);
    scene.add(light);
    let ambientLight = new THREE.AmbientLight(0xdddddd, 0.5);
    scene.add(ambientLight);

    let loader = new TGALoader();
    let texture = loader.load('../../static/modules/tga/crate_color8.tga', );
    let boxGeometry = new THREE.BoxBufferGeometry(20,20, 20);
    let material = new THREE.MeshPhongMaterial({
        map: texture,
        color: 0xffffff
    });
    let box  = new THREE.Mesh(boxGeometry, material);
    scene.add(box);

    let render = () => {
        stats.update();
        trackballControls.update();
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
    render();
}

init();
           

完整示例(src/pages/three_TGALoader_demo):https://github.com/MAXLZ1/threejs_demo

十三、PRWMLoader

加載.prwm資源。

import '../../stylus/index.styl'
import * as THREE from 'three'
import * as dat from 'dat.gui'
import {initTrackballControls, initThree, initStats} from "../../util/util";
import {PRWMLoader} from "../../libs/loaders/PRWMLoader";

async function init () {
    let stats = initStats();
    let {camera, scene, renderer} = initThree();
    let trackballControls = initTrackballControls(camera, renderer);
    camera.position.set(0, 0, 10);
    let loader = new PRWMLoader();
    let load = (url) => new Promise((resolve, reject) => {
        loader.load(url, (bufferGeometry) => {
            let object = new THREE.Mesh( bufferGeometry, new THREE.MeshNormalMaterial() );
            scene.add( object );
            resolve(object);
        });
    });
    let obj = await load('../../static/modules/prwm/faceted-nefertiti.be.prwm');
    let render = () => {
        stats.update();
        trackballControls.update();
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    };

    let gui = new dat.GUI();
    let controls = {
        modules: 'faceted-nefertiti.be.prwm'
    };
    gui.add(controls, 'modules', [
        'faceted-nefertiti.be.prwm',
        'faceted-nefertiti.le.prwm',
        'smooth-suzanne.be.prwm',
        'smooth-suzanne.le.prwm',
        'vive-controller.be.prwm',
        'vive-controller.le.prwm'
    ]).onChange(async item => {
        scene.remove(obj);
        obj = await load(`'../../static/modules/prwm/${item}`);
    });

    render();
}

init();
           

完整示例(src/pages/three_PRWMLoader_demo):https://github.com/MAXLZ1/threejs_demo