three.js funktioniert nicht mit eckigen 5

Question

Ich habe kürzlich ein Projekt und ich verwende three.js für den Grafikteil in eckigen. Bin neu in eckigen und three.js. Das Problem, ich bin nicht in der Lage, die Three.js mit eckigen einzurichten. Im Folgenden sind mein Setup

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); 
    } 
} 

Und das ist mein HTML-Vorlage dieser Komponente app.component.html

<div #rendererContainer></div> 

Der Ausgang ist nur ein großes schwarzes Bildschirm. Ich beziehe mich auf diesen Artikel, um einen grundlegenden Würfel zu schaffen https://medium.com/@necsoft/three-js-101-hello-world-part-1-443207b1ebe1

Kann jemand sagen, was ich falsch mache?

Answer 1

Ich nehme an, das Problem ist in dieser Zeile render(); Sie haben die Renderfunktion nicht aufgerufen. weil dieser Aufruf nicht im Konstruktor oder einer anderen Funktion ist. Bitte rufen Sie render() in ngOnInit() oder in einer anderen Funktion.

P.S. Vielleicht werden diese Beispiele für Sie nützlich sein. https://github.com/makimenko/angular-three-examples