三个 JS 1 场景 2 文件格式还不能用

Question

我有一个应用程序可以显示来自不同建模软件的 3d 模型。

我有一个从 CatiaV5 导出的 STL 文件和从 Sketchup 最新版本导出的 DAE 文件

我可以创建场景和灯光，然后使用 StlLoader 加载第一个模型当我尝试使用 ColladaLoader 添加 Dae 文件时出现问题。

我正在使用 Collada，因为我可以在网上找到它，它可以让您将 Sketchup 模型加载到 ThreeJS 中，但欢迎任何其他方式这样做。

我在 Angular 范围内工作，我使用一个指令来处理 ThreeJS 的 3d 模型。

这是我的指令片段。

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

                });

所以我不确定该如何处理。会不会是因为不同的文件格式，不同的Loader。或者我也应该用这个创建一个网格。

我确实尝试用它制作网格，但我遇到了更多错误，其中一个是关于未定义的中心属性。

欢迎任何帮助。

Answer 1

尝试从 result 对象添加 scene 属性，如本例所示：

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

三个 JS 1 场景 2 文件格式还不能用

Three JS 1 scene 2 file format not working yet

catia

collada

three.js

angularjs

sketchup