Question

我在blender中创建了一个简单的模型并将其导出为json文件以便在我的应用程序中使用，我使用angular cli生成一个基本应用程序，其中我添加了threeJS，一切都运行正常，除了我可以＆＃t; t添加我的新模型，它找不到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

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

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

如果此解决方案不起作用，您能否捕获THREE加载程序抛出的错误？加载器函数可能接受错误回调。

Answer 2

您的代码中有两个问题：

调用loader.load（path_to_your_object）：

loader.load('assets/DAMA1.json');
您应该为您的对象创建材质

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

json文件未通过angular threeJS加载

2 个答案: