Trois format de fichier JS 1 scène 2 ne fonctionne pas encore

Question

J'ai une application qui affiche des modèles 3D de différents logiciels de modélisation.

Je dispose d'un fichier STL exporté à partir CatiaV5 et un fichier DAE exporté de Sketchup dernière version

Je peux créer la scène et de la lumière, puis charger le premier modèle avec StlLoader Le problème se produit lorsque je tente d'ajouter le fichier Dae en utilisant ColladaLoader. J'utilise Collada parce que c'est ce que j'ai pu trouver sur le web qui vous permettrait de charger un modèle Sketchup dans ThreeJS mais toute autre façon de le faire est la bienvenue. Je travaille dans un périmètre angulaire et j'utilise une directive pour gérer le modèle 3D avec ThreeJS.

Voici ma directive dans un extrait.

mid.directive('ngWebgl', function() { 
 
    
 
     return { 
 
     restrict: 'A', 
 
     scope: { 
 
       'width': '=', 
 
       'height': '=', 
 
       'fillcontainer': '=', 
 
       'scale': '=', 
 
       'materialType': '=' 
 
       }, 
 

 
     link: function postLink(scope, element, attrs) { 
 
      var camera, scene, renderer, 
 
      shadowMesh, icosahedron, light, 
 
      mouseX = 0, mouseY = 0, 
 
      contW = (scope.fillcontainer) ? 
 
      element[0].clientWidth : scope.width, 
 
      contH = scope.height, 
 
      windowHalfX = contW/2, 
 
      windowHalfY = contH/2, 
 
      materials = {}, controls, update 
 
      
 

 
      scope.init = function() { 
 
      // CAMERA 
 
      camera = new THREE.PerspectiveCamera(1000, document.getElementById('test').offsetWidth/document.getElementById('test').offsetHeight, 1, 10000); 
 
      camera.position.set(50,-20, -10); 
 
      //SCENE 
 
      scene = new THREE.Scene(); 
 
      scene.add(camera); // required, because we are adding a light as a child of the camera 
 

 
      light = new THREE.PointLight(0xffffff, 1);// the child 
 
      camera.add(light); 
 
      scene.add(new THREE.AmbientLight(0x000000));// another light 
 

 
      renderer = new THREE.WebGLRenderer({ antialias: true }); 
 
      renderer.setClearColor(0xffffff);// background color 
 
      renderer.setSize(document.getElementById('test').offsetWidth, document.getElementById('test').offsetHeight-10); 
 

 
      controls = new THREE.OrbitControls(camera, renderer.domElement); 
 
      element[0].appendChild(renderer.domElement); 
 

 

 

 
       var loader2 = new THREE.ColladaLoader(); 
 
        loader2.load('http://localhost/frame.dae', function (result) { 
 
       
 
       scene.add(result);// adding model to the scene 
 

 
       }); 
 

 
      
 

 
      var loader = new THREE.STLLoader(); //// Loading STL file 
 
       loader.load('Sac_Fuel_Tank.stl', function (geometry) { 
 
        //Material 
 
      var material = new THREE.MeshLambertMaterial({ 
 
       color: 0x286617, 
 
       wireframe: false 
 
       }); 
 
        //Geometry 
 
      var mesh = new THREE.Mesh(geometry, material); 
 
       mesh.rotation.x = Math.PI/2; 
 
       mesh.position.set(20,10,-10); 
 
       scene.add(mesh);// adding model to the scene 
 
       // view control 
 
      // controls = new THREE.OrbitControls(camera, renderer.domElement) 
 

 

 

 
       }); 
 

 
       
 

 
      // resize if needed 
 
      document.addEventListener('resize', scope.onWindowResize, false); 
 
      // element[0].append(renderer.domElement); 
 
      } //EOF 
 

 
       // Refresh aspect ratio 
 
      scope.onWindowResize = function() { 
 
       camera.aspect = window.innerWidth/window.innerHeight; 
 
       camera.updateProjectionMatrix(); 
 
       renderer.setSize(window.innerWidth, window.innerHeight); 
 

 
      } 
 

 
       // 
 
      scope.animate = function() { 
 
       setTimeout (function(){ 
 
        requestAnimationFrame(scope.animate); 
 
       }, 1000/30) 
 
       scope.render(); 
 
       controls.update(); 
 

 
      } 
 

 
      scope.render = function() { 
 
       var timer = Date.now() * 0.0005; 
 
       camera.lookAt(scene.position); 
 
       renderer.render(scene, camera); 
 

 
      } 
 

 
     
 
     
 
     scope.init(); 
 
      scope.animate(); 
 
} 
 
}; 
 
});

Loader est mon modèle de travail avec le format de fichier STL. Je crée un maillage à partir de celui-ci. Loader2 est le fichier DAE qui provoque cette erreur;

THREE.Object3D.add: object not an instance of THREE.Object3D. Object 
{scene: Bc, morphs: Array[0], skins: Array[0], animations: Array[0], kinematics: Object…} 

Je ne suis pas sûr que ce soit la bonne façon de le charger, mais de certains documentaion ils suggéraient de le ramener à cela pour le faire fonctionner;

var loader2 = new THREE.ColladaLoader(); 
    loader2.load('http://localhost/frame.dae', function (result) { 

       scene.add(result);// adding model to the scene 

       }); 

Donc, je ne sais pas comment je devrais gérer cela. Pourrait-il être en raison du format de fichier différent, différents chargeurs. Ou devrais-je créer un maillage avec celui-ci aussi. J'ai essayé d'en faire un maillage et j'ai eu plus d'erreurs et l'une d'entre elles concernait une propriété centrale non définie.

Toute aide bienvenue.

Answer 1

Essayez d'ajouter la propriété scene de l'objet result comme dans cet exemple:

// instantiate a loader 
var loader = new THREE.ColladaLoader(); 

loader.load(
    // resource URL 
    'models/collada/monster/monster.dae', 
    // Function when resource is loaded 
    function (collada) { 
     scene.add(collada.scene); 
    }, 
);