0
最近私はプロジェクトを持っていて、グラフィックス部分にthree.jsを使用しています。 angleとthree.jの両方に新しい。 問題は、角度のある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
私は間違っていると誰が言うことができますか？