Angular2 使用 Threejs Orbitcontrols

在Angular 2中使用Three.js OrbitControls实现交互式3D场景

bash
npm install three

typescript
import * as THREE from 'three';

typescript
import { Component, ElementRef, NgZone, OnInit, OnDestroy } from '@angular/core';
import { Scene, PerspectiveCamera, WebGLRenderer, BoxGeometry, MeshBasicMaterial, Mesh } from 'three';
@Component({
  selector: 'app-threejs-scene',
  template: '
',
  styleUrls: ['./threejs-scene.component.css']
})
export class ThreejsSceneComponent implements OnInit, OnDestroy {
  private scene: Scene;
  private camera: PerspectiveCamera;
  private renderer: WebGLRenderer;
  private cube: Mesh;
  constructor(private ngZone: NgZone, private el: ElementRef) {}
  ngOnInit() {
    this.initScene();
    this.createCube();
    this.render();
  }
  ngOnDestroy() {
    // Perform cleanup, e.g., dispose of objects to prevent memory leaks
  }
  private initScene() {
    this.scene = new Scene();
    this.camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    this.renderer = new WebGLRenderer();
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.el.nativeElement.querySelector('#sceneContainer').appendChild(this.renderer.domElement);
    this.camera.position.z = 5;
  }
  private createCube() {
    const geometry = new BoxGeometry();
    const material = new MeshBasicMaterial({ color: 0x00ff00 });
    this.cube = new Mesh(geometry, material);
    this.scene.add(this.cube);
  }
  private render() {
    this.ngZone.runOutsideAngular(() => {
      const animate = () => {
        requestAnimationFrame(animate);
        this.cube.rotation.x += 0.01;
        this.cube.rotation.y += 0.01;
        this.renderer.render(this.scene, this.camera);
      };
      animate();
    });
  }
}

bash
npm install three-orbitcontrols

typescript
import { OrbitControls } from 'three-orbitcontrols';

typescript
private setupControls() {
  const controls = new OrbitControls(this.camera, this.renderer.domElement);
  controls.enableDamping = true; // an animation loop is required when damping is enabled
  controls.dampingFactor = 0.25;
  controls.rotateSpeed = 0.35;
}