在Angular中集成Three.js并管理画布布局-html教程-PHP中文网

在Angular中集成Three.js并管理画布布局

本教程详细介绍了如何在angular应用中集成three.js，并精确控制其渲染画布的大小和位置，避免默认全屏显示。通过html结构、css样式和angular的`@viewchild`装饰器，您可以将three.js场景嵌入到特定的dom元素中，实现灵活的布局管理和响应式渲染，从而在应用中创建多个独立的3d视图。

引言

在Angular等现代前端框架中集成Three.js时，一个常见的问题是Three.js默认创建的画布（canvas）会占据整个屏幕，这使得我们难以将其作为组件的一部分嵌入到页面布局中。本教程旨在提供一个结构化的方法，通过结合HTML、CSS和Angular的组件生命周期管理，精确控制Three.js渲染画布的尺寸和位置，从而实现更灵活、更可控的3D场景集成。

问题背景：默认全屏显示

当Three.js渲染器被初始化并直接添加到document.body时，它通常会创建一个与浏览器视口同等大小的画布。虽然可以通过直接修改画布元素的style属性来尝试调整其尺寸和位置，但这并非一个健壮且符合Angular开发范式的方法，尤其是在需要将3D场景作为页面特定区域的组件时。

// 常见但非最佳的初始化方式，可能导致全屏显示
export class AppComponent implements OnInit {
  ngOnInit(): void {
    // ... Three.js 场景、相机等初始化代码 ...

    // 创建一个div并添加到body，然后将渲染器domElement添加到div
    // 这种方式难以精确控制布局
    const container = document.createElement('div');
    document.body.appendChild(container);
    container.appendChild(renderer.domElement);
    // ... animate() ...
  }
}

登录后复制

解决方案核心：HTML/CSS布局与Angular集成

解决此问题的关键在于：

在Angular组件的模板中明确定义一个canvas元素，并将其包裹在一个div容器中。
利用CSS精确控制这个div容器的尺寸和位置。
在Angular组件的TypeScript代码中，通过@ViewChild装饰器获取到这个特定的canvas元素及其容器的引用。
初始化Three.js渲染器时，将获取到的canvas元素作为目标，并根据容器的实际尺寸设置渲染器的大小。

步骤一：定义HTML画布容器

首先，在你的Angular组件模板（例如app.component.html）中，定义一个用于承载Three.js场景的div容器，并在其中放置一个canvas元素。为它们添加类名，以便于CSS选择和Angular组件中引用。

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

登录后复制

步骤二：应用CSS样式控制布局

接下来，在你的组件样式文件（例如app.component.css）中，为上述HTML元素添加样式。通过控制.canvas-container的width、height、position和top/left等属性，你可以精确地定位和调整3D场景的显示区域。同时，将.webgl-canvas的尺寸设置为100%，使其填充整个父容器。

/* app.component.css */
.canvas-container {
  width: 600px; /* 控制容器宽度 */
  height: 400px; /* 控制容器高度 */
  position: absolute; /* 允许自由定位 */
  top: 50px; /* 距离页面顶部50px */
  left: 50px; /* 距离页面左侧50px */
  border: 1px solid #ccc; /* 可选：方便调试时看到容器边界 */
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}

.webgl-canvas {
  width: 100%; /* 使画布填充父容器的宽度 */
  height: 100%; /* 使画布填充父容器的高度 */
  display: block; /* 移除可能的内联元素空白 */
}

登录后复制

步骤三：Angular组件中集成Three.js

在Angular组件的TypeScript文件中，你需要执行以下操作：

1. 获取DOM引用

使用@ViewChild装饰器来获取canvas元素及其父容器的引用。由于DOM元素在视图初始化之后才可用，所以Three.js的初始化逻辑应放在ngAfterViewInit生命周期钩子中。

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

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

  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;

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

    // 相机
    const sizes = {
      width: container.clientWidth,
      height: container.clientHeight
    };
    this.camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 1000);
    this.camera.position.z = 5;
    this.scene.add(this.camera);

    // 渲染器
    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)); // 优化高清屏显示

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

  private animate(): void {
    // 动画循环
    requestAnimationFrame(() => this.animate());

    // 旋转立方体
    if (this.cube) {
      this.cube.rotation.x += 0.01;
      this.cube.rotation.y += 0.01;
    }

    // 渲染场景
    this.renderer.render(this.scene, this.camera);
  }
}

登录后复制

注意： 在@ViewChild装饰器中，我们使用了{ static: true }。这意味着在ngOnInit生命周期钩子中就可以访问到元素。然而，为了确保元素在渲染时机正确，更推荐在ngAfterViewInit中使用，此时可以省略static: true或设置为false。这里为了简化代码，暂时保持static: true，但实际项目中，如果元素是通过*ngIf等条件渲染的，则必须使用{ static: false }并在ngAfterViewInit中访问。

奇布塔

基于AI生成技术的一站式有声绘本创作平台

查看详情

2. 初始化渲染器并设置尺寸

在initThreeJs方法中，我们通过this.webglCanvasRef.nativeElement获取到实际的HTMLCanvasElement。然后，将这个元素传递给THREE.WebGLRenderer的构造函数。最关键的是，通过container.clientWidth和container.clientHeight获取父容器的实际尺寸，并使用renderer.setSize()方法将渲染器调整到与容器相同的尺寸。同时，相机（THREE.PerspectiveCamera）的aspect属性也需要根据容器的宽高比进行设置。

完整代码示例

为了使示例更完整，以下是app.component.html和app.component.ts的修改，以及一个简单的app.component.css。

app.component.html

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

登录后复制

app.component.ts

import { Component, AfterViewInit, ViewChild, ElementRef, OnDestroy, HostListener } 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 {
  // 使用模板引用变量 #canvasContainer 和 #webglCanvas
  @ViewChild('canvasContainer', { static: false }) canvasContainerRef!: ElementRef<HTMLDivElement>;
  @ViewChild('webglCanvas', { static: false }) webglCanvasRef!: ElementRef<HTMLCanvasElement>;

  private scene!: THREE.Scene;
  private camera!: THREE.PerspectiveCamera;
  private renderer!: THREE.WebGLRenderer;
  private cube!: THREE.Mesh;
  private animationFrameId: number | null = null; // 用于存储 requestAnimationFrame 的ID

  ngAfterViewInit(): void {
    // ngAfterViewInit 确保了模板中的元素已经渲染并可用
    if (this.canvasContainerRef && this.webglCanvasRef) {
      this.initThreeJs();
      this.animate();
    } else {
      console.error('Canvas or container not found.');
    }
  }

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

    // 1. 场景
    this.scene = new THREE.Scene();
    this.scene.background = new THREE.Color(0xdddddd); // 设置背景色

    // 2. 相机
    const sizes = {
      width: container.clientWidth,
      height: container.clientHeight
    };
    this.camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 1000);
    this.camera.position.z = 3;
    this.scene.add(this.camera);

    // 3. 渲染器
    this.renderer = new THREE.WebGLRenderer({
      canvas: canvas,
      antialias: true // 开启抗锯齿
    });
    this.renderer.setSize(sizes.width, sizes.height);
    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

    // 4. 添加示例物体
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshStandardMaterial({ color: 0x0077ff }); // 使用StandardMaterial以便能看到光照效果
    this.cube = new THREE.Mesh(geometry, material);
    this.scene.add(this.cube);

    // 5. 添加光源
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 环境光
    this.scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); // 定向光
    directionalLight.position.set(1, 1, 1);
    this.scene.add(directionalLight);
  }

  private animate(): void {
    this.animationFrameId = requestAnimationFrame(() => this.animate());

    // 动画逻辑
    if (this.cube) {
      this.cube.rotation.x += 0.005;
      this.cube.rotation.y += 0.005;
    }

    // 渲染场景
    this.renderer.render(this.scene, this.camera);
  }

  // 响应窗口大小变化
  @HostListener('window:resize', ['$event'])
  onResize(event: Event): void {
    if (this.canvasContainerRef && this.camera && this.renderer) {
      const container = this.canvasContainerRef.nativeElement;
      const newWidth = container.clientWidth;
      const newHeight = container.clientHeight;

      this.camera.aspect = newWidth / newHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(newWidth, newHeight);
      this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    }
  }

  ngOnDestroy(): void {
    // 组件销毁时取消动画帧，防止内存泄漏
    if (this.animationFrameId) {
      cancelAnimationFrame(this.animationFrameId);
    }
    // 清理Three.js资源（可选，但推荐在复杂场景中进行）
    if (this.renderer) {
      this.renderer.dispose();
    }
    if (this.scene) {
      this.scene.traverse((object) => {
        if ((object as THREE.Mesh).geometry) {
          (object as THREE.Mesh).geometry.dispose();
        }
        if ((object as THREE.Mesh).material) {
          if (Array.isArray((object as THREE.Mesh).material)) {
            ((object as THREE.Mesh).material as THREE.Material[]).forEach(material => material.dispose());
          } else {
            ((object as THREE.Mesh).material as THREE.Material).dispose();
          }
        }
      });
    }
  }
}

登录后复制

app.component.css (与之前相同)

.canvas-container {
  width: 600px; /* 控制容器宽度 */
  height: 400px; /* 控制容器高度 */
  position: absolute; /* 允许自由定位 */
  top: 50px; /* 距离页面顶部50px */
  left: 50px; /* 距离页面左侧50px */
  border: 1px solid #ccc; /* 可选：方便调试时看到容器边界 */
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
  background-color: #f0f0f0; /* 容器背景色 */
}

.webgl-canvas {
  width: 100%; /* 使画布填充父容器的宽度 */
  height: 100%; /* 使画布填充父容器的高度 */
  display: block; /* 移除可能的内联元素空白 */
}

登录后复制

注意事项与最佳实践

生命周期钩子: 始终在ngAfterViewInit中初始化Three.js，因为此时组件的视图（包括模板中的canvas元素）已经完全渲染并可用。
响应式布局: 通过监听window:resize事件，并在事件触发时重新计算容器尺寸，然后更新相机宽高比和渲染器大小，可以使3D场景具备响应式能力。
多画布场景: 如果你需要显示多个独立的Three.js场景，只需重复上述步骤：为每个场景在HTML中定义独立的div和canvas，并在TypeScript中为每个场景创建独立的Three.js实例（场景、相机、渲染器）。你可以通过不同的模板引用变量（#canvasContainer2, #webglCanvas2）来获取它们的引用。
资源清理: 在ngOnDestroy生命周期钩子中，务必取消requestAnimationFrame的动画循环，并调用renderer.dispose()来释放WebGL上下文和相关资源，以防止内存泄漏。对于更复杂的场景，可能还需要手动释放几何体、材质和纹理等资源。
性能优化: setPixelRatio可以帮助在高DPI屏幕上获得更清晰的渲染效果，但过高的值可能会影响性能。Math.min(window.devicePixelRatio, 2)是一个常用的折衷方案。