Загрузка текстур в THREE.js и Angular

Question

Я пытаюсь воспроизвести пример куба three.js в приложении Angular, но я получаю куб с черными гранями.Нет ошибок в консоли.

При использовании обычного сетчатого материала (var material = new THREE.MeshNormalMaterial();) все работает нормально.

Угловая: 7.0.4, three.js: 0.99

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

@Component({
  selector: 'app-cube',
  templateUrl: './cube.component.html',
  styleUrls: ['./cube.component.scss']
})
export class CubeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    var camera, scene, renderer;
    var mesh;

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 400;

    scene = new THREE.Scene();

    var texture = new THREE.TextureLoader().load('assets/model/crate.gif');

    var geometry = new THREE.BoxBufferGeometry(200, 200, 200);
    var material = new THREE.MeshBasicMaterial({ map: texture });
    // var material = new THREE.MeshNormalMaterial();

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xffffff, 1);
    document.body.appendChild(renderer.domElement);  

    renderer.render(scene, camera);
  }

}

Answer 1

Загрузка текстуры асинхронная.Вы визуализируете только один раз, до того, как текстуры будут загружены, чтобы они выглядели черными.

Если вы не хотите выполнять рендеринг непрерывно, Three.JS предлагает LoadingManager с событием onLoad, которое срабатывает, когда текстуры полностью загружены: вы можете выполнить рендеринг внутри этого события.Вы также можете обернуть поведение загрузки внутри обещания , это ваш стиль.