在Threejs中加載未定義的OBJ

Question

我已經聲明了一個全局變量，以便以后存儲通過THREE.OBJLoader加載的OBJ，但是當我嘗試為所述對象的位置或旋轉設置動畫時（甚至使用console.log（）進行了嘗試），我發現該變量未定義。

這是設置場景的方式（請注意變量spaceCraft）：

    <script>
    var container;

    var camera, scene, renderer;

    var mouseX = 0,
        mouseY = 0;

    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;

    var spaceCraft;

    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.z = 250;


        // scene

        scene = new THREE.Scene();
        var clearColor = 0xaaaaaa;
        scene.background = new THREE.Color(clearColor);

        var ambient = new THREE.AmbientLight(0xffffff);
        scene.add(ambient);

        var directionalLight = new THREE.DirectionalLight(0xffeedd, 100);
        directionalLight.position.set(0, 10, 0);
        scene.add(directionalLight);

        var ambientLight = new THREE.AmbientLight(0xffeedd, 100);
        ambientLight.position.set(0, 0, 0);
        scene.add(ambientLight);


        var manager = new THREE.LoadingManager();
        manager.onProgress = function(item, loaded, total) {

            console.log(item, loaded, total);

        };


        var onProgress = function(xhr) {
            if (xhr.lengthComputable) {
                var percentComplete = xhr.loaded / xhr.total * 100;
                console.log(Math.round(percentComplete, 2) + '% downloaded');
            }
        };

        var onError = function(xhr) {
        };

這是我加載模型的方式

        // model

        var loaderModello = new THREE.OBJLoader(manager);
        var OBJPath = 'spaceCraft3.obj';
        spaceCraft = loaderModello.load(OBJPath, function(object) {

            spaceCraft = object;
            spaceCraft.traverse(function(child) {

                if (child instanceof THREE.Mesh) {

                    child.material.map = texture;

                }

            });
            var scaleFactor = 7;
            spaceCraft.scale.set(scaleFactor, scaleFactor, scaleFactor);
            spaceCraft.rotation.set(0, 9.42, 0);
            scene.add(spaceCraft);

        }, onProgress, onError);

這是animate（）和render（）函數的最后一部分。

        //
        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

        document.addEventListener('mousemove', onDocumentMouseMove, false);

        //

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

    }

    function onWindowResize() {

        windowHalfX = window.innerWidth / 2;
        windowHalfY = window.innerHeight / 2;

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

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

    }

    function onDocumentMouseMove(event) {

        mouseX = (event.clientX - windowHalfX) / 2;
        mouseY = (event.clientY - windowHalfY) / 2;

    }

    //

    function animate() {

        requestAnimationFrame(animate);
        render();

    }

    function render() {

        camera.position.x += (mouseX - camera.position.x) * .05;
        camera.position.y += (-mouseY - camera.position.y) * .05;
        camera.lookAt(scene.position);

        renderer.render(scene, camera);

    }

</script>

有人可以給我提示嗎？ 也許我還不清楚編譯器的工作方式/指令的處理順序。 另外，請告訴我是否可以說得更清楚。

Answer 1

它不是THREE.js相對的，而是javascript。 您不能將全局變量聲明為加載程序結果。 但是你可以添加到對象

您應該通過函數（ES6 +）傳遞該var：

(function(spacecraft, object) {

THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );

var mtlLoader = new THREE.MTLLoader();

mtlLoader.load( 'js/m.mtl', (function( weapon, object ) {

  return function(materials) {        
        materials.preload();
    var objLoader = new THREE.OBJLoader();
            objLoader.setMaterials( materials );
            objLoader.load( 'js/m.obj', (function ( weapon, object ) {
            return function(wp) {                

                // anything you want with object
                wp.position.set(weaponslot.x,weaponslot.y,weaponslot.z);
                wp.rotateZ(Math.PI);
                object.add( wp );

                }
            })(weaponslot, object));

  }

})(weaponslot, object));
})(weaponslot, object)

更明確地說，不僅創建全局var，而且聲明全局THREE.Object3D（）並向其中添加模型，您可以移動或縮放該對象；

    var spaceCraft = new THREE.Object3D();
        scene.add(spaceCraft);
    var loaderModello = new THREE.OBJLoader(manager);
    var OBJPath = 'spaceCraft3.obj';
    //spaceCraft = loaderModello.load(OBJPath, function(object) {
    loaderModello.load(OBJPath, function(object) {

        //spaceCraft = object;
        object.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
                child.material.map = texture;
            }
        });
        var scaleFactor = 7;
        spaceCraft.scale.set(scaleFactor, scaleFactor, scaleFactor);
        spaceCraft.rotation.set(0, 9.42, 0);
        spaceCraft.model = object;            
        spaceCraft.add(spaceCraft.model);

    }, onProgress, onError);

或者，您可以將模型定義為全局對象window.myobject的元素。

window.spaceCraft = {};
loaderModello.load(OBJPath, function(object) { .....////// 
window.spaceCraft = object;
scene.add(window.spaceCraft);