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。您不能将全局var重新声明为加载器结果。但是你可以添加到对象

您应该通过函数（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)

或者更清楚的是，不仅创建全局变量而且声明全局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);

在Threejs中加载未定义的OBJ

1 个答案: