带有 JSONLoader 的 Three.js 和 Angular4答案

【问题标题】：Three.js and Angular4 with a JSONLoader带有 JSONLoader 的 Three.js 和 Angular4
【发布时间】：2018-05-23 16:06:45
【问题描述】：

我正在尝试在 Angular 4 环境中实现三个，我正在尝试使用 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.scene.add(this.mesh); 行中

我尝试添加一个 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(){

};

};

【问题讨论】：

标签： javascript json angular three.js

【解决方案1】：

在 init() 方法的开头添加行 var scope = this;，如下所示，

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

}

然后在 init() 方法中使用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 类。

【讨论】：