在 Angular 应用中精确控制 Three.js 画布的大小与位置

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

/* app.component.css */
.canvas-container {
  width: 400px; /* 设置容器的固定宽度 */
  height: 300px; /* 设置容器的固定高度 */
  position: absolute; /* 允许通过 top/left/right/bottom 定位 */
  top: 50px; /* 距离页面顶部的距离 */
  left: 50px; /* 距离页面左侧的距离 */
  border: 1px solid #ccc; /* 可选：为容器添加边框以便观察 */
  overflow: hidden; /* 确保内容不会溢出容器 */
}

.webgl-canvas {
  width: 100%; /* 画布宽度填充其父容器 */
  height: 100%; /* 画布高度填充其父容器 */
  display: block; /* 移除画布底部的额外空白 */
}

// app.component.ts
import { Component, OnInit, ViewChild, ElementRef, AfterViewInit, OnDestroy } 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, OnDestroy {
  @ViewChild('canvasContainer') private canvasContainerRef!: ElementRef<HTMLDivElement>;
  @ViewChild('webglCanvas') private webglCanvasRef!: ElementRef<HTMLCanvasElement>;

  private scene!: THREE.Scene;
  private camera!: THREE.PerspectiveCamera;
  private renderer!: THREE.WebGLRenderer;
  private animationFrameId!: number;

  ngAfterViewInit(): void {
    // 确保 DOM 元素已经可用
    if (this.canvasContainerRef && this.webglCanvasRef) {
      this.initThreeJs();
      this.animate();
    }
  }

  private initThreeJs(): void {
    // 1. 获取容器和画布元素
    const container = this.canvasContainerRef.nativeElement;
    const canvas = this.webglCanvasRef.nativeElement;

    // 2. 根据容器尺寸定义渲染区域
    const sizes = {
      width: container.clientWidth,
      height: container.clientHeight
    };

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

    // 4. 相机
    this.camera = new THREE.PerspectiveCamera(
      75, // 视角
      sizes.width / sizes.height, // 宽高比
      0.1, // 近截面
      1000 // 远截面
    );
    this.camera.position.z = 5;
    this.scene.add(this.camera);

    // 5. 物体 (示例：一个立方体)
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    this.scene.add(cube);

    // 6. 渲染器
    this.renderer = new THREE.WebGLRenderer({
      canvas: canvas, // 将渲染器绑定到指定的 canvas 元素
      antialias: true // 启用抗锯齿
    });
    this.renderer.setSize(sizes.width, sizes.height); // 设置渲染器尺寸与容器一致
    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // 优化高DPI屏幕显示

    // 7. 监听窗口大小变化（可选，用于响应式布局）
    window.addEventListener('resize', this.onWindowResize.bind(this));
  }

  private animate = () => {
    // 示例：旋转立方体
    const cube = this.scene.children[1] as THREE.Mesh; // 假设立方体是第二个添加到场景的
    if (cube) {
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
    }

    this.renderer.render(this.scene, this.camera);
    this.animationFrameId = requestAnimationFrame(this.animate);
  };

  private onWindowResize(): void {
    if (this.canvasContainerRef && this.webglCanvasRef) {
      const container = this.canvasContainerRef.nativeElement;
      const sizes = {
        width: container.clientWidth,
        height: container.clientHeight
      };

      // 更新相机宽高比
      this.camera.aspect = sizes.width / sizes.height;
      this.camera.updateProjectionMatrix();

      // 更新渲染器尺寸
      this.renderer.setSize(sizes.width, sizes.height);
      this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    }
  }

  ngOnDestroy(): void {
    // 清理资源，防止内存泄漏
    if (this.animationFrameId) {
      cancelAnimationFrame(this.animationFrameId);
    }
    if (this.renderer) {
      this.renderer.dispose();
      this.renderer.domElement.remove(); // 移除 DOM 元素（如果之前是动态添加的）
    }
    window.removeEventListener('resize', this.onWindowResize.bind(this));
  }
}

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