jsonファイルは角度threeJSでロードされていません

Question

私はブレンダーでシンプルなモデルを作成し、それをアプリケーションに使用するjsonファイルとしてエクスポートしました。私はthreeJSを追加したベースアプリケーションを生成するためにangular cliを使用しました。私は私の新しいモデルを追加することはできませんが、それはjsonファイルdunnoを見つけることができませんなぜ、私は角を持ってこれを達成するためにhttpモジュールを使用する必要がありますか？私はこれを持っている時点では

少し混乱 イム：

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { HttpClientModule } from '@angular/common/http'; 

import { AppComponent } from './app.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    HttpClientModule 
    ], 
    imports: [ 
    BrowserModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

私のコンポーネント

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

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit { 
    public constructor(private http: HttpClient) { 

    } 
    private container: HTMLElement; 

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

    private cube: THREE.Mesh; 

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

    console.log(this.container); 

    this.init(); 
    this.http 
    } 

    init() { 
    let screen = { 
     width: window.innerWidth, 
     height: window.innerHeight, 
     color: 0xffffff 
    }, 
     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.renderer.setClearColor(0x000000, 1); 

    this.scene.add(this.camera); 
    this.scene.add(new THREE.AxisHelper(20)); 

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

    var mesh = null; 
    var loader = new THREE.JSONLoader(); 
    this.http.get('assets/DAMA1.json'); 
    loader.load('./DAMA1.json', function (geometry) { 
     mesh = new THREE.Mesh(geometry); 
     this.scene.add(mesh); 
    }); 

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

    this.cube = new THREE.Mesh(geometry, material); 
    this.cube.position.set(-50, -50, -50); 

    this.scene.add(this.cube); 

    this.render(); 
    } 

    render() { 

    let self: AppComponent = this; 

    (function render() { 
     requestAnimationFrame(render); 
     self.renderer.render(self.scene, self.camera); 
     self.renderer.setClearColor(0xffffff, 1); 

     self.animate(); 
    }()); 

    } 

    onResize(event) { 
    this.renderer.setSize(window.innerWidth, window.innerHeight); 
    } 

    animate() { 
    this.cube.rotateX(0.1); 
    this.cube.rotateY(0.1); 
    this.cube.position.addScalar(0.2); 

    } 


} 

任意のヘルプ？

Answer 1

2つの別個のパスで2回ロードしています。

this.http.get('assets/DAMA1.json'); 
loader.load('./DAMA1.json'); 

パスの問題があります。ところで

は、明らかに、機能

new THREE.Mesh(geometry); 

はJSONを受け入れます。アセットがローカルの場合は、ファイルの一番上にあるインポートを使用してロードしないでください。

あなたが行うことができ

：その後、

import geometry from 'assets/DATA1.json'; 

とを、コンポーネント内：

new THREE.Mesh(geometry); 

このソリューションdoesntの仕事であれば、次の3つのローダーによってthrowedエラーをキャッチすることができますか？ローダー関数はおそらくエラーコールバックを受け入れます。