Three.js 导入fbx

其实可以先看看官方案例
你想要的东西 官方里面都有，就看你找不找得到了。。。。
话不多说
我们先看看这个例子吧

    
        
        
        
        
    

    
        

            three.js - FBXLoader

            Character and animation from Mixamo
        

        

        
        

        

        
        

        

    

首先我们找到这个例子，然后对其解析，化为自己的知识

image.png

我们看到引入的js库有以上几类
首当其先的为three.js
然后是inflate.min.js，我也不知道这是干撒的，但是当我百度这个找到了后，怀着崇敬的心情以及准备自我翻译作用的时候，我看到了汉字+五十音的时候，心中崩腾过了emmm。2只羊驼。只好勉强看汉字，应该是压缩用的吧。。。知道的麻烦给个准信。。。

image.png

接着是FBXLoader.js库，看名字就知道是fbx文件的加载库
所以，我们这个时候应该看看源码。

image.png

恩，一来就看到要求fbx格式以及一串的支持。
看正文

( function () {
//构造函数
    THREE.FBXLoader = function ( manager ) {

        this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;

    };

    Object.assign( THREE.FBXLoader.prototype, {
//加载函数
        load: function ( url, onLoad, onProgress, onError ) {

            var self = this;

            var resourceDirectory = THREE.LoaderUtils.extractUrlBase( url );

            var loader = new THREE.FileLoader( this.manager );
            loader.setResponseType( 'arraybuffer' );
            loader.load( url, function ( buffer ) {

                try {
//解析
                    var scene = self.parse( buffer, resourceDirectory );
                    onLoad( scene );

                } catch ( error ) {

                    window.setTimeout( function () {

                        if ( onError ) onError( error );

                        self.manager.itemError( url );

                    }, 0 );

                }

            }, onProgress, onError );

        },

        parse: function ( FBXBuffer, resourceDirectory ) {

            var FBXTree;
                  //判断类型
            if ( isFbxFormatBinary( FBXBuffer ) ) {

                FBXTree = new BinaryParser().parse( FBXBuffer );

            } else {

                var FBXText = convertArrayBufferToString( FBXBuffer );

                if ( ! isFbxFormatASCII( FBXText ) ) {

                    throw new Error( 'THREE.FBXLoader: Unknown format.' );

                }

                if ( getFbxVersion( FBXText ) < 7000 ) {

                    throw new Error( 'THREE.FBXLoader: FBX version not supported, FileVersion: ' + getFbxVersion( FBXText ) );

                }

                FBXTree = new TextParser().parse( FBXText );

            }

            // console.log( FBXTree );
//一连串的emmmmm，解析以及构建（你猜）
            var connections = parseConnections( FBXTree );
            var images = parseImages( FBXTree );
            var textures = parseTextures( FBXTree, new THREE.TextureLoader( this.manager ).setPath( resourceDirectory ), images, connections );
            var materials = parseMaterials( FBXTree, textures, connections );
            var skeletons = parseDeformers( FBXTree, connections );
            var geometryMap = parseGeometries( FBXTree, connections, skeletons );
            var sceneGraph = parseScene( FBXTree, connections, skeletons, geometryMap, materials );
            return sceneGraph;
        }
    } );

上面最后的一串方法都在库后面放着的，有兴趣的可以看看。
然后是OrbitControls.js 接收的camera参数

image.png

这就是它的介绍，至于源码有兴趣的看看吧。
剩下的库有兴趣自己看看源码吧，找不到，去three.js官网下载压缩包，撒都有。
然后我们开始了解如何构造的

开始

上图emmm，不用说了

兼容

这句我想知道什么意思，查了一下原来是检查兼容性。一句话就解决了。。给个赞！

container = document.createElement( 'div' );
        document.body.appendChild( container );
//相机
        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
        camera.position.set( 100, 200, 300 );
//控制器     相应鼠标左键右键点击
        controls = new THREE.OrbitControls( camera );
        controls.target.set( 0, 100, 0 );
        controls.update();
//舞台（场景）
        scene = new THREE.Scene();
        scene.background = new THREE.Color( 0xa0a0a0 );
        scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
//灯光
        light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
        light.position.set( 0, 200, 0 );
        scene.add( light );

        light = new THREE.DirectionalLight( 0xffffff );
        light.position.set( 0, 200, 100 );
        light.castShadow = true;
        light.shadow.camera.top = 180;
        light.shadow.camera.bottom = -100;
        light.shadow.camera.left = -120;
        light.shadow.camera.right = 120;
        scene.add( light );

// ground
        var mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
        mesh.rotation.x = - Math.PI / 2;
        mesh.receiveShadow = true;
        scene.add( mesh );

        var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
        grid.material.opacity = 0.2;
        grid.material.transparent = true;
        scene.add( grid );

明显的构建广场。最后就是加载model

// model
      //得到加载器
        var loader = new THREE.FBXLoader();
     //开始加载，并且异步加载，别问我，我也不知道，方法体里参数是
    //(url,onLoad,onProgress,onError)
    //所以对应咯
        loader.load( '../fbx/aa.FBX', function ( object ) {
            //动画
            object.mixer = new THREE.AnimationMixer( object );
            mixers.push( object.mixer )；
            var action = object.mixer.clipAction( object.animations[ 0 ] );
            action.play();
            //那个，纹理maybe，理解错了 请指出
            object.traverse( function ( child ) {

                if ( child.isMesh ) {

                    child.castShadow = true;
                    child.receiveShadow = true;

                }

            } );

            scene.add( object );

        } );

好了，看不看得懂，不要紧，要懂得基本操作就好了，是在不行，自己去例子里面现学现卖。当然懂了最好
最后我们实际运行一下。

这鱼是在游的

ok，一切完美。
对了这些代码需要在服务器上执行，没有服务器？你的ide没有自带么？(webstorm)
最后，给个“毒”福利。
希望你们在看例子的时候
https://threejs.org/examples/#webgl_loader_fbx
能听这首歌 Its love -张碧晨
很带感！！！