Question

我正在尝试使用threeJS在角度应用上从blender加载外部模型，然后我按照this教程进行操作。问题是，当我到达需要加载外部文件的位置时：

loader.load('./marmelab-logo.json', function(geometry) {
    mesh = new THREE.Mesh(geometry);
    mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.75;
    mesh.translation = THREE.GeometryUtils.center(geometry);
    scene.add(mesh);
});

永远找不到json，路径正确但找不到文件，不知道为什么。

这就是我目前所拥有的：

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

@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("http://localhost:4200/assets/dama.json")


    loader.load('./dama.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("http://localhost:4200/assets/dama.json")我猜json文件位于assets文件夹中。

如果您的文件夹结构如下所示，

-assets

dama.json

-index.html

然后你可以试试这个，

loader.load('assets/dama.json', function (geometry) { 
//rest of your code. 
});

找不到要在ThreeJS上加载的json文件

1 个答案: