在Angular中创建并管理多个Three.js画布以显示场景-html教程-PHP中文网

在angular中创建并管理多个three.js画布以显示场景

本教程详细介绍了如何在Angular应用中集成Three.js，并精确控制其画布的尺寸与位置。我们将探讨如何通过HTML结构和CSS样式定义画布容器，利用Angular的`@ViewChild`装饰器安全地获取DOM元素，并正确初始化Three.js渲染器以适应指定的画布区域，从而避免Three.js场景占据整个屏幕，实现灵活的多场景布局。

在Angular应用中集成Three.js时，一个常见的需求是控制Three.js渲染的画布（canvas）的尺寸和位置，而不是让它默认占据整个浏览器窗口。这对于在单个页面上显示多个Three.js场景、或者将Three.js内容嵌入到现有UI布局中至关重要。本文将提供一个结构化的方法来实现这一目标。

1. 定义画布容器和Canvas元素

首先，在你的Angular组件模板（例如app.component.html）中，你需要为Three.js场景创建一个容器div和一个canvas元素。这个div容器将用于定义画布的外部尺寸和定位，而canvas元素将作为Three.js的渲染目标。

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

<!-- 如果需要多个画布，可以重复此结构 -->
<div class="another-canvas-container">
  <canvas class="webgl-canvas"></canvas>
</div>

这里，我们使用了模板引用变量#webglCanvas和#anotherWebglCanvas，这是Angular推荐的方式来获取DOM元素的引用。

2. 应用CSS样式控制尺寸和定位

接下来，通过CSS来精确控制容器和画布的尺寸与位置。容器div负责整体的定位和外部尺寸，而canvas元素则应设置为填充其父容器。

/* app.component.css */
.canvas-container {
  width: 400px;         /* 定义容器宽度 */
  height: 300px;        /* 定义容器高度 */
  position: absolute;   /* 允许绝对定位 */
  top: 50px;            /* 距离页面顶部的距离 */
  left: 50px;           /* 距离页面左侧的距离 */
  border: 1px solid #ccc; /* 可选：方便调试时看到容器边界 */
  overflow: hidden;     /* 确保内容不会溢出容器 */
}

.another-canvas-container {
  width: 300px;
  height: 200px;
  position: absolute;
  top: 400px;
  left: 100px;
  border: 1px solid #aaa;
  overflow: hidden;
}

.webgl-canvas {
  width: 100%;          /* 使canvas填充其父容器的宽度 */
  height: 100%;         /* 使canvas填充其父容器的高度 */
  display: block;       /* 避免canvas元素底部可能出现的额外空间 */
}

通过设置position: absolute并结合top、left（或right、bottom），你可以将画布容器放置在页面的任何位置。width和height则控制了画布的显示区域大小。

3. 在Angular组件中获取DOM元素并初始化Three.js

在Angular组件的TypeScript文件中，我们应该使用@ViewChild装饰器来获取对canvas元素和其父容器的引用。这比直接使用document.querySelector更为健壮和Angular化。

度加AI

度加AI官网入口，百度官方 AIGC 创作平台，支持 AI 成片、AI 生文、数字人、声音克隆、配音字幕与智能剪辑等在线创作能力。

下载

Three.js的初始化逻辑应该放在ngAfterViewInit生命周期钩子中，因为此时组件的视图（包括模板中的canvas元素）已经被完全初始化并渲染到DOM中。

// app.component.ts
import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } 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 {
  title = 'angular-threejs-multiple-canvases';

  // 使用@ViewChild获取canvas元素
  @ViewChild('webglCanvas') webglCanvasRef!: ElementRef<htmlcanvaselement>;
  @ViewChild('anotherWebglCanvas') anotherWebglCanvasRef!: ElementRef<htmlcanvaselement>;

  // 获取canvas容器的引用，以便获取其尺寸
  @ViewChild('webglCanvas', { read: ElementRef }) webglCanvasContainerRef!: ElementRef<htmldivelement>;
  @ViewChild('anotherWebglCanvas', { read: ElementRef }) anotherWebglCanvasContainerRef!: ElementRef<htmldivelement>;


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

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

  private initScene1(): void {
    const canvas = this.webglCanvasRef.nativeElement;
    const container = canvas.parentElement as HTMLDivElement; // 获取父容器

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

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

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

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

    // Renderer
    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);

    if (this.cube1) {
      this.cube1.rotation.x += 0.01;
      this.cube1.rotation.y += 0.01;
    }

    if (this.renderer1 && this.scene1 && this.camera1) {
      this.renderer1.render(this.scene1, this.camera1);
    }
  };

  private initScene2(): void {
    const canvas = this.anotherWebglCanvasRef.nativeElement;
    const container = canvas.parentElement as HTMLDivElement; // 获取父容器

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

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

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

    // Object
    const geometry = new THREE.SphereGeometry(0.7, 32, 16);
    const material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
    this.sphere2 = new THREE.Mesh(geometry, material);
    this.scene2.add(this.sphere2);

    // Renderer
    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);

    if (this.sphere2) {
      this.sphere2.rotation.y += 0.005;
    }

    if (this.renderer2 && this.scene2 && this.camera2) {
      this.renderer2.render(this.scene2, this.camera2);
    }
  };
}</htmldivelement></htmldivelement></htmlcanvaselement></htmlcanvaselement>

代码解析：

@ViewChild: 我们使用@ViewChild('webglCanvas') webglCanvasRef!: ElementRef; 来获取模板中带有#webglCanvas引用的canvas元素。ElementRef是Angular对DOM元素的包装。
获取容器尺寸: 为了使Three.js渲染器的大小与我们定义的CSS容器大小一致，我们需要获取容器的clientWidth和clientHeight。由于canvas.parentElement直接指向其父div，我们可以通过这种方式获取容器尺寸。
WebGLRenderer初始化: 在创建THREE.WebGLRenderer时，将获取到的canvas元素作为canvas属性传入。这是关键一步，它告诉Three.js在哪里进行渲染。
renderer.setSize(): 调用renderer.setSize(sizes.width, sizes.height)来设置渲染器的内部尺寸，使其与容器尺寸匹配。
camera宽高比: 确保摄像机的宽高比（sizes.width / sizes.height）与渲染器和画布的宽高比一致，以避免图像拉伸。
animate()函数: 这是一个经典的Three.js动画循环，使用requestAnimationFrame来平滑地更新和渲染场景。

注意事项与最佳实践

ngAfterViewInit: 始终在ngAfterViewInit生命周期钩子中进行DOM操作和Three.js初始化，因为在此之前，视图可能尚未完全渲染，@ViewChild可能无法获取到元素。

响应式设计: 如果你的画布容器尺寸是动态变化的（例如，响应窗口大小调整），你需要监听窗口的resize事件，并在事件触发时重新计算sizes，然后调用renderer.setSize()和更新camera.aspect。

// 在initScene1或initScene2中添加
window.addEventListener('resize', () => {
  const newWidth = container.clientWidth;
  const newHeight = container.clientHeight;

  // Update sizes
  sizes.width = newWidth;
  sizes.height = newHeight;

  // Update camera
  this.camera1.aspect = sizes.width / sizes.height;
  this.camera1.updateProjectionMatrix();

  // Update renderer
  this.renderer1.setSize(sizes.width, sizes.height);
  this.renderer1.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

资源清理: 在组件销毁时（ngOnDestroy），应该清理Three.js相关的资源，例如停止动画循环、处理几何体和材质等，以避免内存泄漏。
性能优化: 对于多个Three.js场景，考虑性能优化，例如使用renderer.setPixelRatio来处理高DPI屏幕，或者按需加载场景。

总结

通过以上步骤，你可以在Angular应用中灵活地创建和管理多个Three.js画布，并精确控制它们的尺寸和位置。这种方法利用了Angular的模板引用和生命周期钩子，结合CSS样式和Three.js的API，提供了一个结构化且易于维护的解决方案，使得Three.js能够更好地融入复杂的Angular UI布局中。