在Angular中管理Three.js Canvas的灵活布局与显示

<div class="canvas-container">
  <canvas class="webgl-canvas"></canvas>
</div>

.canvas-container {
  width: 300px; /* 设置容器的固定宽度 */
  height: 300px; /* 设置容器的固定高度 */
  position: absolute; /* 允许绝对定位 */
  top: 50px; /* 距离页面顶部的距离 */
  left: 50px; /* 距离页面左侧的距离 */
  border: 1px solid #ccc; /* 可选：为容器添加边框以便观察 */
}

.webgl-canvas {
  width: 100%; /* Canvas宽度充满父容器 */
  height: 100%; /* Canvas高度充满父容器 */
  display: block; /* 移除Canvas底部可能存在的额外空间 */
}

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 { // 使用AfterViewInit确保DOM已加载
  @ViewChild('canvasContainer', { static: true }) canvasContainerRef!: ElementRef;
  @ViewChild('webglCanvas', { static: true }) webglCanvasRef!: ElementRef<HTMLCanvasElement>;

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

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

  private initThreeJs(): void {
    const container = this.canvasContainerRef.nativeElement;
    const canvas = this.webglCanvasRef.nativeElement;

    // 获取容器的实际尺寸
    const sizes = {
      width: container.clientWidth,
      height: container.clientHeight
    };

    // 1. 创建场景
    this.scene = new THREE.Scene();

    // 2. 创建相机
    this.camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 1000);
    this.camera.position.z = 5;
    this.scene.add(this.camera);

    // 3. 创建渲染器，并指定渲染目标Canvas
    this.renderer = new THREE.WebGLRenderer({
      canvas: canvas, // 将渲染器关联到HTML中的Canvas元素
      antialias: true // 开启抗锯齿
    });
    this.renderer.setSize(sizes.width, sizes.height); // 设置渲染器尺寸与容器一致
    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // 优化高DPI屏幕显示

    // 可选：添加一个简单的几何体进行测试
    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);
  }

  private animate = () => {
    requestAnimationFrame(this.animate);
    // 旋转立方体 (如果已添加)
    if (this.scene.children.length > 1 && this.scene.children[1] instanceof THREE.Mesh) {
      const cube = this.scene.children[1] as THREE.Mesh;
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
    }
    this.renderer.render(this.scene, this.camera);
  }
}

<div class="canvas-container" #canvasContainer>
  <canvas class="webgl-canvas" #webglCanvas></canvas>
</div>