json文件未通过角度threeJS加载

Question

我在搅拌机中制作了一个简单的模型并将其导出为 json 文件以在我的应用程序上使用，我使用 angular cli 生成了一个基本应用程序，我在其中添加了threeJS，一切正常，除了我无法添加我的新模型，它找不到json文件不知道为什么，我需要使用带有角度的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

您使用两个不同的路径加载它两次。

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

如果这个解决方案不起作用，你能捕捉到三个加载器抛出的错误吗？ loader 函数可能接受错误回调。

Answer 2

你的代码有两个问题：

1. 调用 loader.load(path_to_your_object) ：

   loader.load('assets/DAMA1.json');

2. 你应该为你的对象创建材料

   loader.load('assets/DAMA1.json',(geometry) => { mesh = new THREE.Mesh(geometry, material_for_your_object); this.scene.add(mesh); });