三种JS 1场景2文件格式尚不起作用

admin

我有一个应用程序，显示从不同的建模软件的3d模型。

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

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

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

我在一个角度范围内工作，我使用一个指令来处理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

                });

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

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

欢迎任何帮助。

转载请注明出处:http://www.intsu.net/article/20230512/1467788.html