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

碧海醫心

发布时间：2025-11-11 12:10:20

988人浏览过

来源于php中文网

原创

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

本文将指导您如何在 Angular 应用中集成 Three.js，并精确控制其渲染画布的大小和位置，而非让其占据整个屏幕。通过结合适当的 HTML 结构、CSS 样式、Angular 的 `@ViewChild` 机制以及 Three.js 渲染器的配置，您可以轻松地将 Three.js 场景嵌入到应用的特定区域，实现灵活的布局和多画布展示。

引言

在 Angular 等现代前端框架中集成 Three.js 3D 场景时，一个常见的需求是将其渲染到一个特定大小和位置的画布上，而不是默认地全屏显示。这对于将 3D 内容作为 UI 组件的一部分、实现多个 3D 视图或响应式布局至关重要。本文将详细介绍如何通过标准的前端技术和 Three.js API 实现这一目标。

1. HTML 结构设计

首先，在您的 Angular 组件模板中，为 Three.js 场景创建一个专用的容器 div 和一个

这里，我们给容器和画布都添加了类名，以便后续通过 CSS 和 Angular 轻松引用。

2. CSS 样式定义

为了精确控制画布容器的大小和位置，以及确保画布本身填充其父容器，我们需要定义相应的 CSS 样式。

/* 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; /* 移除画布底部的额外空白 */
}

关键点解释：

.canvas-container：
- width 和 height：定义了 Three.js 场景将渲染的实际区域大小。
- position: absolute (或 relative, fixed)：允许您使用 top, left, right, bottom 属性来精确地定位容器在页面中的位置。
.webgl-canvas：
- width: 100% 和 height: 100%：确保

3. Angular 组件集成与 DOM 访问

在 Angular 组件中，推荐使用 @ViewChild 装饰器来安全且声明式地获取对 DOM 元素的引用。这比直接使用 document.querySelector 更符合 Angular 的最佳实践。

sematic

一个开源的机器学习平台

下载

// 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;
  @ViewChild('webglCanvas') private webglCanvasRef!: ElementRef;

  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));
  }
}

代码解释：

@ViewChild:
- @ViewChild('canvasContainer') 和 @ViewChild('webglCanvas')：通过模板中的类名或局部变量名获取 HTMLDivElement 和 HTMLCanvasElement 的引用。为了让 @ViewChild 能够找到这些元素，您需要在模板中给它们添加局部变量名，例如
  和。
- ElementRef：@ViewChild 返回 ElementRef，通过 .nativeElement 属性可以访问底层的 DOM 元素。
- ngAfterViewInit():
  - 这是 Angular 的一个生命周期钩子，在组件视图及其子视图初始化之后调用。在此阶段，组件的模板已经被渲染到 DOM 中，因此可以安全地访问 @ViewChild 获取的 DOM 元素。
- initThreeJs():
  - 获取容器尺寸：container.clientWidth 和 container.clientHeight 用于获取容器的实际渲染宽度和高度。这些尺寸会受到 CSS 样式的影响。
  - 相机宽高比：this.camera.aspect = sizes.width / sizes.height; 必须根据渲染区域的宽高比设置，以避免场景拉伸变形。
  - 渲染器绑定：new THREE.WebGLRenderer({ canvas: canvas }) 是将 Three.js 渲染器绑定到特定
  - 渲染器尺寸：this.renderer.setSize(sizes.width, sizes.height); 将渲染器的内部缓冲区大小设置为与容器相同的尺寸。这是确保 Three.js 场景在指定区域内正确渲染的关键步骤。
- animate(): 使用 requestAnimationFrame 循环渲染场景，实现动画效果。
- onWindowResize(): 这是一个可选但推荐的函数，用于处理窗口大小变化。当浏览器窗口大小改变时，容器的尺寸可能会随之改变（如果使用了相对单位）。此函数会重新获取容器尺寸，并更新相机宽高比和渲染器尺寸，确保场景始终正确显示。
- ngOnDestroy(): 在组件销毁时，取消动画帧请求并清理 Three.js 渲染器资源，防止内存泄漏。