three.js 不适用于 Angular 5答案

【问题标题】：three.js not working with angular 5three.js 不适用于 Angular 5
【发布时间】：2018-06-08 17:53:21
【问题描述】：

我最近有一个项目，我正在使用 three.js 作为 angular 的图形部分。我对 angular 和 three.js 都是新手。问题我无法用角度设置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

谁能说我做错了什么？

【问题讨论】：

标签： javascript angular three.js

【解决方案1】：

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

附：也许这些例子对你有用。 https://github.com/makimenko/angular-three-examples

【讨论】：