三个 JS 1 场景 2 文件格式尚未工作

Posted 2023-03-23

【中文标题】三个 JS 1 场景 2 文件格式尚未工作

【英文标题】：Three JS 1 scene 2 file format not working yet

【发布时间】：2017-06-08 16:52:32

【问题描述】：

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

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

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

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

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

这是我在 sn-p 中的指令。

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

                );

所以我不确定我应该如何处理这个问题。可能是因为不同的文件格式，不同的加载器。或者我也应该用这个创建一个网格。

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

欢迎任何帮助。

【参考方案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 );
    ,
);

【讨论】：

太棒了，谢谢先生！