three.js


【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
设置材料属性。

side: 设置材料渲染哪一面，同Material的side。
wrap
normalizeRGB
ignoreZeroRGBs
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
参数	说明
url	文件的URL或者路径
onLoad	加载完成时将调用。回调参数为将要加载的object.
onProgress	将在加载过程中进行调用。参数为XMLHttpRequest实例，实例包含total和loaded字节。
onError	在加载错误时被调用。