Three JS 1 scene 2 file format not working yet

Question

I have an app that is displaying 3d models from different modeling software.

I have a STL file exported from CatiaV5 and a DAE file exported from Sketchup latest version

I can create the scene and light and then load the first model with StlLoader The problem occurs when I try to add the Dae file using ColladaLoader.

I am using Collada because this is what I could find on the web that would let you load a Sketchup model into ThreeJS but any other way of doing so is welcome.

Im working within a Angular Scope and i use a directive to handle 3d model with ThreeJS.

Here is my directive in a snippet.

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 is my working model with the STL file format. I create a mesh out of it. Loader2 is the DAE file that is causing this error;

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

I am not sure if this is the right way to load it but from some documentaion they were suggesting to bring it down to this to get it to work;

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

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

                });

So I'm not sure how I should deal with this. Could it be because of the different file format, different Loaders. Or should I create a mesh with this one also.

I did try to make a mesh out of it and I was getting more errors and one of them was about an undefined center proprety.

Any help welcome.

Answer 1

Try adding the scene property from the result object like in this example:

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