Undefined OBJ geladen in Threejs

Question

Ich habe eine globale Variable deklariert, um später ein OBJ geladen durch THREE.OBJLoader zu speichern, aber wenn ich versuche, die Position oder Rotation des genannten Objekts zu animieren (sogar mit console.log() versucht) bekomme ich dass die Variable nicht definiert ist. Hier

ist die Art, wie ich die Szene eingerichtet (man beachte das variable Raumfahrzeug):

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

Hier ist die Art, wie ich mein Modell

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

laden Und hier ist der letzte Teil mit der animate() und render() Funktionen.

 // 
     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> 

Kann mir jemand einen Tipp geben? Vielleicht habe ich nicht klar, wie der Compiler Dinge tut/die Reihenfolge, in der die Anweisungen verarbeitet werden. Bitte sag mir auch, ob ich etwas klarer machen kann.

Answer 1

Es ist nicht THREE.js relativ, aber Javascript. Sie können Global Var nicht als Loader-Ergebnis deklarieren. Aber Sie können

Sie sollten diese var passieren durch die Funktion (ES6 +) zum Objekt hinzufügen:

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

Oder deutlicher Weise schaffen nicht nur global var sondern eine globale THREE.Object3D erklären() und fügen Sie Ihre Modell zu ihnen, können Sie dieses Objekt bewegen oder skalieren;

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

Oder Sie können Ihr Modell als ein Element des globalen Objekts window.myobject definieren.

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