Question

我有一个应用程序，它显示来自不同建模软件的3D模型。

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

导出的DAE文件

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

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

我在Angular Scope中工作，我使用指令处理带有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

                });

所以我不确定应该怎么处理这件事。可能是因为文件格式不同，装载机不同。或者我也应该用这个创建一个网格。

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

欢迎任何帮助。

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

三个JS 1场景2文件格式还没有工作

1 个答案: