如何在Angular应用中精确控制Three.js场景的Canvas显示

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

<div class="canvas-container" #canvasContainer2>
  <canvas class="webgl-canvas" #webglCanvas2></canvas>
</div>

<!-- 可以根据需要添加更多容器和Canvas -->

/* app.component.css */
.canvas-container {
  width: 300px; /* 定义容器宽度 */
  height: 300px; /* 定义容器高度 */
  position: absolute; /* 示例：使用绝对定位控制位置 */
  top: 50px; /* 示例：距离顶部50px */
  left: 50px; /* 示例：距离左侧50px */
  border: 1px solid #ccc; /* 可选：方便调试容器边界 */
  overflow: hidden; /* 确保内容不会溢出容器 */
}

/* 如果有多个Canvas，可以通过id或更具体的类名区分 */
/* 例如，第一个容器 */
.canvas-container:nth-of-type(1) {
  top: 50px;
  left: 50px;
}

/* 第二个容器 */
.canvas-container:nth-of-type(2) {
  top: 50px;
  left: 400px; /* 与第一个容器错开 */
}


.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'; // 导入Three.js库

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

  // 获取第一个Canvas容器和Canvas元素的引用
  @ViewChild('canvasContainer1', { static: true }) canvasContainerRef1!: ElementRef<HTMLDivElement>;
  @ViewChild('webglCanvas1', { static: true }) webglCanvasRef1!: ElementRef<HTMLCanvasElement>;

  // 获取第二个Canvas容器和Canvas元素的引用
  @ViewChild('canvasContainer2', { static: true }) canvasContainerRef2!: ElementRef<HTMLDivElement>;
  @ViewChild('webglCanvas2', { static: true }) webglCanvasRef2!: ElementRef<HTMLCanvasElement>;

  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 {
    // 初始化第一个场景
    this.initScene1();
    this.animate1();

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

  private initScene1(): void {
    const container = this.canvasContainerRef1.nativeElement;
    const canvas = this.webglCanvasRef1.nativeElement;

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

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

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

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

    // 渲染器
    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);

    this.cube1.rotation.x += 0.01;
    this.cube1.rotation.y += 0.01;

    this.renderer1.render(this.scene1, this.camera1);
  }

  private initScene2(): void {
    const container = this.canvasContainerRef2.nativeElement;
    const canvas = this.webglCanvasRef2.nativeElement;

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

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

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

    // 物体
    const geometry = new THREE.SphereGeometry(1, 32, 32);
    const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    this.sphere2 = new THREE.Mesh(geometry, material);
    this.scene2.add(this.sphere2);

    // 渲染器
    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);

    this.sphere2.rotation.y += 0.005;

    this.renderer2.render(this.scene2, this.camera2);
  }
}