JSON-Datei nicht geladen über eckige threeJS

Question

Ich habe ein einfaches Modell in Blender und exportiert es als JSON-Datei auf meiner App zu verwenden, ich verwendet eckigen CLI, um eine Basisanwendung zu generieren, wo ich die ThreeJS hinzugefügt, alles funktioniert gut außer ich kann mein neues modell nicht hinzufügen, es kann die json-datei nicht finden wieso, muss ich http-modul mit angular verwenden, um dies zu erreichen? im ein wenig verwirrt

Im Moment ist diese:

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 { } 

meine Komponente

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

    } 


} 

jede mögliche Hilfe?

Answer 1

Sie laden es zweimal mit zwei verschiedenen Pfaden.

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

Könnte ein Weg Problem sein.

By the way, offenbar die Funktion

new THREE.Mesh(geometry); 

akzeptiert eine json. Wenn Ihre Assets lokal sind, laden Sie sie am Anfang der Datei über Importe hoch.

Sie könnten tun:

import geometry from 'assets/DATA1.json'; 

Und dann, im Inneren des Bauteils:

new THREE.Mesh(geometry); 

Wenn diese Lösung nicht funktioniert, können Sie den Fehler durch die drei loader throwed fangen? Die Ladefunktion akzeptiert wahrscheinlich einen Fehlerrückruf.