JSONLoaderでThree.jsとAngular4

Question

Angular 4環境で3つ実装しようとしていますが、JSONLoaderを使用しようとしていますが動作していません.Jsonに正しく定義されたパスがありますが、追加できませんシーンに、ライン上で未定義のメッシュ 『「プロパティを設定することはできません』瞬間

let material = new THREE.MeshBasicMaterial({ color : 0xFFFFFF, wireframe: true }); 
let geometry = new THREE.JSONLoader(); 

geometry.load("./maniqui4.json", function(geometry, materials){ 

this.mesh = new THREE.Mesh(geometry, material); 
this.scene.add(this.mesh); 
}); 

でエラーを取得エラーイムはラインに（this.meshを）this.scene.addされている。

Boxのジオメトリを追加しようとしましたが、JSONLoaderでうまく描画できませんでした。

）私のコンポーネント

import { Component, OnInit, ElementRef, ViewChild} from '@angular/core'; 
import * as THREE from 'three'; 

@Component({ 
selector: 'canvasRender', 
templateUrl: './canvas.component.html', 
}) 

export class canvasComponent{ 

@ViewChild('container') elementRef: ElementRef; 
private container : HTMLElement; 
private scene: THREE.Scene; 
private camera: THREE.PerspectiveCamera; 
private renderer: THREE.WebGLRenderer; 
private mesh : THREE.Mesh; 

constructor(){ 
console.log(THREE); 

} 

ngOnInit(){ 
this.container = this.elementRef.nativeElement; 

console.log(this.container); 

this.init(); 
} 

init(){ 
let screen = { 
    width : 100, 
    height : 300 
}, 
view = { 
    angle : 45, 
    aspect : screen.width/screen.height, 
    near : 0.1, 
    far : 1000 
}; 

this.scene = new THREE.Scene(); 
this.camera = new THREE.PerspectiveCamera(view.angle, view.aspect, view. near, view.far); 
this.renderer = new THREE.WebGLRenderer(); 

this.scene.add(this.camera); 
this.camera.position.set(10,10,10); 
this.camera.lookAt(new THREE.Vector3(0,0,0)); 

this.renderer.setSize(screen.width, screen.height); 
this.container.appendChild(this.renderer.domElement); 


let material = new THREE.MeshBasicMaterial({ color : 0xFFFFFF, wireframe: true }); 
let geometry = new THREE.JSONLoader(); 

geometry.load("./maniqui4.json", function(geometry, materials){ 

this.mesh = new THREE.Mesh(geometry, material); 
this.scene.add(this.mesh); 
}); 


this.render(); 
} 

render(){ 

}; 
animate(){ 

}; 

}; 

Answer 1

はこのように、

init(){ 
    var scope = this; 
    // rest of your code 

} 

が、その後（INIT内scopeでthisへのすべての参照を変更し、あなたのinit（）メソッドの開始時に行var scope = this;を追加している再方法。

は今ローダは

geometry.load("./maniqui4.json", function(geometry, materials){ 
    scope.mesh = new THREE.Mesh(geometry, material); 
    scope.scene.add(scope.mesh); 
}); 

問題は、あなたがJsonLoaderのロード機能からthisを呼び出すとき、あなたはJsonLoader自体にではなく、あなたのcanvasComponentクラスを参照しているということで、このようになります。