angular - 三.js + Angular : texture loading fails

Question

Three.js 由于纹理加载而呈现黑色场景。

我在 Angular 组件( Angular 版本 8)中使用了 Three.js。

我试图遵循 rendering Earth in WebGL 上的旧的 Three.js 教程现在已弃用 THREE.ImageUtils.loadTexture()加载网格 Material 贴图的纹理。

它对我不起作用，所以我尝试使用现代 THREE.TextureLoader().load() .但是，由于某种原因，它从未对回调采取行动。

所以我尝试使用 THREE.TextureLoader().load()配对 THREE.LoadingManager() .虽然 THREE.LoadingManager()的回调似乎有效，但它仍然只产生带有一些光线的黑色场景。

虽然我是使用 Three.js 的新手，
在我看来，我的代码:

是否包括灯

似乎不只渲染一次

不会向控制台抛出任何错误

代码 :

在我的 component.html 中:

...
<div #rendererContainer></div>
...

在我的 component.ts 中:

import {Component, OnInit, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
import * as THREE from 'three';

export class MyComponent implements OnInit, AfterViewInit {

  @ViewChild('rendererContainer', {static: false}) rendererContainer: ElementRef;

  renderer = new THREE.WebGLRenderer();
  scene = null;
  camera = null;
  mesh = null;
  earthSurface = new THREE.MeshStandardMaterial({color: 0xaaaaaa});

  constructor() {
    // scene and camera
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000);
    this.camera.position.z = 1.5;

    // light
    this.scene.add(new THREE.AmbientLight(0x333333));
    const light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(5, 3, 5);
    this.scene.add(light);

    const manager = new THREE.LoadingManager();
    const textureLoader = new THREE.TextureLoader(manager);
    this.earthSurface.map = textureLoader.load('planet.jpg');
    manager.onLoad = () => {
      // call back
      const geometry = new THREE.SphereGeometry(0.5, 32, 32);
      this.mesh = new THREE.Mesh(
        geometry,
        this.earthSurface
      );
      this.scene.add(this.mesh);
      this.rerender();
      console.log(this.earthSurface);
    };
  }

  ngOnInit() {}

  ngAfterViewInit() {
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.rendererContainer.nativeElement.appendChild(this.renderer.domElement);
      this.animate();
      // setInterval(() => {this.rerender();}, 1.5 * 1000);
  }

  rerender() {
    this.renderer.render(this.scene, this.camera);
  }

  animate() {
    this.renderer.render(this.scene, this.camera);
    window.requestAnimationFrame(() => this.animate());
  }

}

Answer 1

我测试过了，你的代码有一些建议

您可以完全放弃重新渲染功能，只需确保像这样加载场景的颜色:

this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0xf5f5f5);

确保您加载的图像具有正确的路径，您可以尝试:

this.earthSurface.map = textureLoader.load('https://upload.wikimedia.org/wikipedia/commons/b/b8/Exploding_planet.jpg');