three.js가 각도 5로 작동하지 않습니다.

최근 프로젝트가 생겼습니다. 각도가있는 그래픽 부분에 three.js를 사용하고 있습니다. angular와 three.js에 익숙하지 않습니다. 문제는 각도로 three.js를 설정할 수 없다는 것입니다. 다음은 내 설치three.js가 각도 5로 작동하지 않습니다.

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

을 app.component.ts 및 해당 구성 요소의 내 HTML 템플릿 app.component.html

<div #rendererContainer></div>

출력은, 단지 하나의 큰 검은 색 화면. 기본 큐브를 만들려면이 기사를 참조하십시오. https://medium.com/@necsoft/three-js-101-hello-world-part-1-443207b1ebe1

누구나 내가 뭘 잘못하고 있다고 말할 수 있습니까?

출처

2017-12-28 Akhil Biju

이 줄에 문제가 있다고 가정합니다. render(); 렌더링 기능을 호출하지 않았습니다. 이 호출이 생성자 또는 다른 함수에 없기 때문입니다. ngOnInit() 또는 다른 기능으로 render()으로 전화하십시오.

P. 어쩌면 그 예제들이 당신에게 유용 할 것입니다. https://github.com/makimenko/angular-three-examples

출처

2017-12-28 07:38:29

three.js가 각도 5로 작동하지 않습니다.

답변

관련 문제