在Angular项目中集成Three.js时，合理管理Canvas的布局与显示是提升用户体验的关键环节，这需要结合Angular的组件生命周期与Three.js的渲染特性共同实现。
基础环境搭建
首先需要在Angular项目中安装Three.js依赖，执行以下命令完成安装：
npm install three
安装完成后，在需要使用的组件中引入Three.js核心模块：
import * as THREE from 'three';
创建Three.js服务封装渲染逻辑
为了避免在组件中直接堆积Three.js代码，我们可以创建一个独立的服务来封装场景、相机、渲染器的初始化逻辑，提升代码的可维护性。
import { Injectable, OnDestroy } from '@angular/core';
import * as THREE from 'three';
@Injectable({
providedIn: 'root'
})
export class ThreeSceneService implements OnDestroy {
private scene!: THREE.Scene;
private camera!: THREE.PerspectiveCamera;
private renderer!: THREE.WebGLRenderer;
private animationId!: number;
// 初始化场景、相机、渲染器
initScene(canvas: HTMLCanvasElement, width: number, height: number): void {
// 创建场景
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0xf0f0f0);
// 创建透视相机
this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
this.camera.position.z = 5;
// 创建渲染器并绑定Canvas
this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
this.renderer.setSize(width, height);
// 添加测试立方体
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);
}
// 启动渲染循环
startRender(): void {
const animate = () => {
this.animationId = requestAnimationFrame(animate);
// 旋转立方体
const cube = this.scene.children[0] as THREE.Mesh;
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
this.renderer.render(this.scene, this.camera);
};
animate();
}
// 更新渲染器尺寸
updateSize(width: number, height: number): void {
this.camera.aspect = width / height;
this.camera.updateProjectionMatrix();
this.renderer.setSize(width, height);
}
// 销毁资源
ngOnDestroy(): void {
if (this.animationId) {
cancelAnimationFrame(this.animationId);
}
this.renderer.dispose();
}
}组件中集成Canvas布局管理
接下来在Angular组件中使用上述服务，同时实现Canvas的灵活布局控制。我们可以通过ViewChild获取Canvas元素，结合CSS实现自适应布局。
组件模板编写
模板中使用<canvas>标签作为Three.js的渲染容器，通过样式类控制其布局：
<div class="canvas-container"> <canvas #threeCanvas class="three-canvas"></canvas> </div>
组件样式配置
通过CSS实现Canvas容器的灵活布局，支持占满父容器、固定尺寸、响应式调整等场景：
.canvas-container {
width: 100%;
height: 500px;
position: relative;
border: 1px solid #e0e0e0;
}
.three-canvas {
display: block;
width: 100%;
height: 100%;
}组件逻辑实现
在组件生命周期中初始化Three.js实例，监听窗口 resize 事件实现Canvas尺寸同步更新：
import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy, HostListener } from '@angular/core';
import { ThreeSceneService } from './three-scene.service';
@Component({
selector: 'app-three-canvas',
templateUrl: './three-canvas.component.html',
styleUrls: ['./three-canvas.component.css']
})
export class ThreeCanvasComponent implements AfterViewInit, OnDestroy {
@ViewChild('threeCanvas') canvasRef!: ElementRef<HTMLCanvasElement>;
private containerWidth = 0;
private containerHeight = 0;
constructor(private threeSceneService: ThreeSceneService) {}
ngAfterViewInit(): void {
// 获取容器尺寸
const container = this.canvasRef.nativeElement.parentElement;
if (container) {
this.containerWidth = container.clientWidth;
this.containerHeight = container.clientHeight;
}
// 初始化Three.js场景
this.threeSceneService.initScene(
this.canvasRef.nativeElement,
this.containerWidth,
this.containerHeight
);
// 启动渲染
this.threeSceneService.startRender();
}
// 监听窗口 resize 事件，更新Canvas尺寸
@HostListener('window:resize')
onResize(): void {
const container = this.canvasRef.nativeElement.parentElement;
if (container) {
this.containerWidth = container.clientWidth;
this.containerHeight = container.clientHeight;
this.threeSceneService.updateSize(this.containerWidth, this.containerHeight);
}
}
ngOnDestroy(): void {
// 组件销毁时清理Three.js资源
this.threeSceneService.ngOnDestroy();
}
}灵活布局扩展方案
如果需要实现更复杂的布局效果，比如Canvas与其他Angular组件并列显示、Canvas层级调整等，可以通过以下方式实现：
- 通过修改
.canvas-container的CSS属性，比如设置flex属性实现Flex布局下的自适应 - 给Canvas容器添加
z-index属性控制显示层级，避免被其他元素遮挡 - 结合Angular的响应式表单或者输入属性，动态修改Canvas的背景色、渲染内容等显示属性
注意事项
在Angular中管理Three.js Canvas时，一定要注意资源的销毁逻辑，避免组件销毁后渲染循环仍在运行导致内存泄漏。同时resize事件的处理要避免频繁触发，可以通过防抖函数优化性能。
如果需要在Canvas上叠加其他HTML元素，可以将Canvas容器的position设置为relative，叠加元素的position设置为absolute，通过top、left等属性调整位置，实现混合布局效果。