FBXLoader:我不能加载多个对象

时间:2018-08-13 19:28:31

标签: three.js loader fbx

我只是想尝试一些例子,让自己将自己的模型放到场景中。但是,在使用FBXLoader时,我不确定我做的是否正确。一次只能加载一个FBX。我首先不是编码人员,所以对不起,如果我的代码看起来草率:

我有一个名为range_burners.fbx的对象。它本身可以很好地加载。我有一个名为range_main.fbx的模型,它本身可以很好地工作。但是他们两个在一起,很好,range_main.fbx似乎总是有先例。

<!DOCTYPE html>
<!-- saved from url=(0022)http://127.0.0.1:1024/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>three.js webgl - FBX loader</title>

        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                font-family: Monospace;
                background-color: #000;
                color: #fff;
                margin: 0px;
                overflow: hidden;
            }
            #info {
                color: #fff;
                position: absolute;
                top: 10px;
                width: 100%;
                text-align: center;
                z-index: 100;
                display:block;
            }
            #info a {
                color: #046;
                font-weight: bold;
            }
        </style>
    </head>

    <body>
        <div id="info">
            <a href="http://threejs.org/" target="_blank" rel="noopener">three.js</a> - FBXLoader<br>
            Character and animation from <a href="https://www.mixamo.com/" target="_blank" rel="noopener">Mixamo</a>
        </div>

        <script src="./index_files/three.js.download"></script>

        <script src="./index_files/inflate.min.js.download"></script>
        <script src="./index_files/FBXLoader.js.download"></script>

        <script src="./index_files/OrbitControls.js.download"></script>

        <script src="./index_files/Detector.js.download"></script>
        <script src="./index_files/stats.min.js.download"></script>

        <script>

            if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

            var container, stats, controls;
            var camera, scene, renderer, light;

            var clock = new THREE.Clock();

            var mixers = [];

            init();
            animate();

            function init() {

                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 );

                // scene.add( new THREE.CameraHelper( light.shadow.camera ) );

                // ground
                var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 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 );

                var burners = new THREE.FBXLoader();
                burners.load( '/fbx/range_burners.fbx', function ( object ) {
                    object.traverse( function ( child ) {
                        if( child.material ) {
                            child.material = new THREE.MeshStandardMaterial ( {
                                color: 0x151515,
                                metalness: 0.8,
                                roughness: 0.6

                            } );
                        }
                    } )
                    object.position.set(0, 200, 0);
                    scene.add ( object );
                } );

                // model
                var range = new THREE.FBXLoader();
                range.load( '/fbx/range_main.fbx', function ( object2 ) {
                    object2.traverse( function ( child2 ) {
                        if( child2.material ) {
                            child2.material = new THREE.MeshStandardMaterial ( {
                                color: 0xffffff,
                                metalness: 0.8,
                                roughness: 0.4
                            } );
                        }
                    } )
                    object2.position.set(-150, 0, 0);
                    scene.add ( object2 );
                } );

                //burners




                renderer = new THREE.WebGLRenderer( { antialias: true } );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                renderer.shadowMap.enabled = true;
                container.appendChild( renderer.domElement );

                window.addEventListener( 'resize', onWindowResize, false );

                // stats
                stats = new Stats();
                container.appendChild( stats.dom );

            }

            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            //

            function animate() {

                requestAnimationFrame( animate );

                if ( mixers.length > 0 ) {

                    for ( var i = 0; i < mixers.length; i ++ ) {

                        mixers[ i ].update( clock.getDelta() );

                    }

                }

                renderer.render( scene, camera );

                stats.update();

            }

        </script><div><canvas width="1920" height="898" style="width: 1920px; height: 898px;"></canvas><div style="position: fixed; top: 0px; left: 0px; cursor: pointer; opacity: 0.9; z-index: 10000;"><canvas width="80" height="48" style="width: 80px; height: 48px; display: block;"></canvas><canvas width="80" height="48" style="width: 80px; height: 48px; display: none;"></canvas><canvas width="80" height="48" style="width: 80px; height: 48px; display: none;"></canvas></div></div><div><canvas width="928" height="898" style="width: 928px; height: 898px;"></canvas><div style="position: fixed; top: 0px; left: 0px; cursor: pointer; opacity: 0.9; z-index: 10000;"><canvas width="80" height="48" style="width: 80px; height: 48px; display: block;"></canvas><canvas width="80" height="48" style="width: 80px; height: 48px; display: none;"></canvas><canvas width="80" height="48" style="width: 80px; height: 48px; display: none;"></canvas></div></div>




</body></html>

1 个答案:

答案 0 :(得分:0)

您的代码看起来不错。对我而言,一个人为什么会超越另一个人(除非它隐藏在另一个人的身后),这并不明显。 可以尝试移动其初始位置吗?

另外,您可能要在启动加载程序之前先进行THREE.WebGLRenderer初始化。也就是说,将加载程序放在初始化的末尾... 调试的另一种方法是在材料上设置'wireframe:true',这样您就可以看到其中一个隐藏在另一个内部...