three.js无法与angular 5一起使用

Question

我最近有一个项目，我在angular的图形部分中使用three.js。 对angular和three.js来说都是新手。 问题是我无法使用angular设置three.js。 以下是我的设置

app.component.ts

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('rendererContainer') rendererContainer: ElementRef;
  title = 'app';
  camera; 
  renderer;
  geometry;
  material;
  mesh;
  cube;
  scene;

  constructor() {
    this.scene = new THREE.Scene();

    // Create a basic perspective camera
    this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
    this.camera.position.z = 4;

    // Create a renderer with Antialiasing
    this.renderer = new THREE.WebGLRenderer({antialias:true});

    // Configure renderer clear color
    this.renderer.setClearColor("#000000");

    // Configure renderer size
    this.renderer.setSize( window.innerWidth, window.innerHeight );

    // Append Renderer to DOM
    document.body.appendChild( this.renderer.domElement );

    // ------------------------------------------------
    // FUN STARTS HERE
    // ------------------------------------------------

    // Create a Cube Mesh with basic material
    this.geometry = new THREE.BoxGeometry( 1, 1, 1 );
    this.material = new THREE.MeshBasicMaterial( { color: "#433F81" } );
    this.cube = new THREE.Mesh( this.geometry, this.material );

    // Add cube to Scene
    this.scene.add( this.cube );

  }  
  render();
  render () {
  requestAnimationFrame( this.render );

    this.cube.rotation.x += 0.01;
    this.cube.rotation.y += 0.01;

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

这是我该组件的HTML模板app.component.html

<div #rendererContainer></div>

输出是一个大黑屏。 我指的是这篇文章以创建一个基本的多维数据集https://medium.com/@necsoft/three-js-101-hello-world-part-1-443207b1ebe1

谁能说我做错了吗？

Answer 1

我想问题出在这行render() ; 您没有调用渲染函数。 因为此调用不在构造函数或其他函数中。 请在ngOnInit()或其他函数中调用render() 。

PS也许这些示例对您有用。 https://github.com/makimenko/angular-three-examples