Три формата файла сцены 2 JS 1 еще не работают

У меня есть приложение, которое отображает 3D-модели из разных программ для моделирования.

У меня есть файл STL, экспортированный из CatiaV5, и файл DAE, экспортированный из последней версии Sketchup.

Я могу создать сцену и свет, а затем загрузить первую модель с помощью StlLoader. Проблема возникает, когда я пытаюсь добавить файл Dae с помощью ColladaLoader.

Я использую Collada, потому что это то, что я мог найти в Интернете, что позволит вам загрузить модель Sketchup в ThreeJS, но любой другой способ сделать это приветствуется.

Я работаю в Angular Scope и использую директиву для обработки 3D-модели с помощью ThreeJS.

Вот моя директива во фрагменте.

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 — моя рабочая модель с форматом файла STL. Я создаю из него сетку. Loader2 — это файл DAE, который вызывает эту ошибку;

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

Я не уверен, что это правильный способ загрузить его, но из какой-то документации они предлагали свести его к этому, чтобы заставить его работать;

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

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

                });

Поэтому я не уверен, как мне с этим справиться. Может быть из-за разного формата файлов, разных загрузчиков. Или я должен создать сетку с этим также.

Я пытался сделать из этого сетку, и у меня было больше ошибок, и одна из них была о неопределенном свойстве центра.

Приветствуется любая помощь.


person MadeInDreams    schedule 24.01.2017    source источник


Ответы (1)


Попробуйте добавить свойство scene из объекта result, как в этом примере:

// 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 );
    },
);
person MartyBoggs    schedule 24.01.2017
comment
Потрясающе Спасибо, сэр! - person MadeInDreams; 24.01.2017