3つのJS 1シーン2ファイルフォーマットがまだ機能していません

Question

私は別のモデリングソフトウェアの3Dモデルを表示しているアプリを持っています。

私は最新バージョン

SketchUpのからエクスポートCatiaV5 からエクスポートSTLファイルとDAEファイルを持っている私は、シーンと光を作成し、私が追加しようとしたときに問題が発生したStlLoader との最初のモデルをロードすることができますDaeファイルはColladaLoaderを使用しています。

私はColladaを使用しています。これは、Web上でThreeJSにSketchupモデルを読み込ませることができるためですが、他の方法であれば歓迎します。

私は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…} 

私は、これはそれをロードするための正しい方法ですが、彼らはそれが仕事を得るために、このにそれをダウンさせるために示唆されたいくつかのdocumentaionからかどうかわからないです。

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

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

       }); 

私はこれにどのように対処すべきか分かりません。異なったファイル形式、異なったローダーのためかもしれません。それともメッシュを作成してもいいですか？

私はそれからメッシュを作ろうとしましたが、私はエラーが増えていて、そのうちの1つは未定義の中心的なものでした。

助けてください。

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