JSONLoader를 사용하여 Three.js 및 Angular4

Question

각도 4 환경에서 JSONLoader를 사용하려고 시도했지만 작동하지 않는 경우 3 단계를 구현하려고하는데 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 라인에,

상자 기하학을 추가하려고 시도했지만 괜찮 았지만 JSONLoader로는 아무런 반응이 없었습니다.

he 재) (이 같은 당신의 init() 메소드의 시작 라인 var scope = this; 추가

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

} 

다음 초기화 내부 scope으로 this에 대한 모든 참조를 변경 내 구성 요소

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

입니다 방법.

지금 로더는

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

문제는 당신이 JsonLoader의 부하 함수에서 this를 호출 할 때, 당신은 JsonLoader 자체에, 아닌 canvasComponent 클래스를 참조하는 것입니다, 같이 표시됩니다.