在Angular中创建并管理多个Three.js画布以显示场景

<!-- app.component.html -->
<div class="canvas-container">
  <canvas #webglCanvas class="webgl-canvas"></canvas>
</div>

<!-- 如果需要多个画布，可以重复此结构 -->
<div class="another-canvas-container">
  <canvas #anotherWebglCanvas class="webgl-canvas"></canvas>
</div>

/* app.component.css */
.canvas-container {
  width: 400px;         /* 定义容器宽度 */
  height: 300px;        /* 定义容器高度 */
  position: absolute;   /* 允许绝对定位 */
  top: 50px;            /* 距离页面顶部的距离 */
  left: 50px;           /* 距离页面左侧的距离 */
  border: 1px solid #ccc; /* 可选：方便调试时看到容器边界 */
  overflow: hidden;     /* 确保内容不会溢出容器 */
}

.another-canvas-container {
  width: 300px;
  height: 200px;
  position: absolute;
  top: 400px;
  left: 100px;
  border: 1px solid #aaa;
  overflow: hidden;
}

.webgl-canvas {
  width: 100%;          /* 使canvas填充其父容器的宽度 */
  height: 100%;         /* 使canvas填充其父容器的高度 */
  display: block;       /* 避免canvas元素底部可能出现的额外空间 */
}

// app.component.ts
import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import * as THREE from 'three';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'angular-threejs-multiple-canvases';

  // 使用@ViewChild获取canvas元素
  @ViewChild('webglCanvas') webglCanvasRef!: ElementRef<HTMLCanvasElement>;
  @ViewChild('anotherWebglCanvas') anotherWebglCanvasRef!: ElementRef<HTMLCanvasElement>;

  // 获取canvas容器的引用，以便获取其尺寸
  @ViewChild('webglCanvas', { read: ElementRef }) webglCanvasContainerRef!: ElementRef<HTMLDivElement>;
  @ViewChild('anotherWebglCanvas', { read: ElementRef }) anotherWebglCanvasContainerRef!: ElementRef<HTMLDivElement>;


  private scene1!: THREE.Scene;
  private camera1!: THREE.PerspectiveCamera;
  private renderer1!: THREE.WebGLRenderer;
  private cube1!: THREE.Mesh;

  private scene2!: THREE.Scene;
  private camera2!: THREE.PerspectiveCamera;
  private renderer2!: THREE.WebGLRenderer;
  private sphere2!: THREE.Mesh;


  ngAfterViewInit(): void {
    // 初始化第一个Three.js场景
    this.initScene1();
    this.animate1();

    // 初始化第二个Three.js场景
    this.initScene2();
    this.animate2();
  }

  private initScene1(): void {
    const canvas = this.webglCanvasRef.nativeElement;
    const container = canvas.parentElement as HTMLDivElement; // 获取父容器

    const sizes = {
      width: container.clientWidth,
      height: container.clientHeight
    };

    // Scene
    this.scene1 = new THREE.Scene();

    // Camera
    this.camera1 = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 1000);
    this.camera1.position.z = 3;
    this.scene1.add(this.camera1);

    // Object
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    this.cube1 = new THREE.Mesh(geometry, material);
    this.scene1.add(this.cube1);

    // Renderer
    this.renderer1 = new THREE.WebGLRenderer({
      canvas: canvas,
      antialias: true // 启用抗锯齿
    });
    this.renderer1.setSize(sizes.width, sizes.height);
    this.renderer1.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // 优化高DPI屏幕显示
  }

  private animate1 = () => {
    requestAnimationFrame(this.animate1);

    if (this.cube1) {
      this.cube1.rotation.x += 0.01;
      this.cube1.rotation.y += 0.01;
    }

    if (this.renderer1 && this.scene1 && this.camera1) {
      this.renderer1.render(this.scene1, this.camera1);
    }
  };

  private initScene2(): void {
    const canvas = this.anotherWebglCanvasRef.nativeElement;
    const container = canvas.parentElement as HTMLDivElement; // 获取父容器

    const sizes = {
      width: container.clientWidth,
      height: container.clientHeight
    };

    // Scene
    this.scene2 = new THREE.Scene();

    // Camera
    this.camera2 = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 1000);
    this.camera2.position.z = 3;
    this.scene2.add(this.camera2);

    // Object
    const geometry = new THREE.SphereGeometry(0.7, 32, 16);
    const material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
    this.sphere2 = new THREE.Mesh(geometry, material);
    this.scene2.add(this.sphere2);

    // Renderer
    this.renderer2 = new THREE.WebGLRenderer({
      canvas: canvas,
      antialias: true
    });
    this.renderer2.setSize(sizes.width, sizes.height);
    this.renderer2.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  }

  private animate2 = () => {
    requestAnimationFrame(this.animate2);

    if (this.sphere2) {
      this.sphere2.rotation.y += 0.005;
    }

    if (this.renderer2 && this.scene2 && this.camera2) {
      this.renderer2.render(this.scene2, this.camera2);
    }
  };
}