本教程详细介绍了如何在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的渲染目标。
这里，我们使用了模板引用变量#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化。
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;
@ViewChild('anotherWebglCanvas') anotherWebglCanvasRef!: ElementRef;
// 获取canvas容器的引用，以便获取其尺寸
@ViewChild('webglCanvas', { read: ElementRef }) webglCanvasContainerRef!: ElementRef;
@ViewChild('anotherWebglCanvas', { read: ElementRef }) anotherWebglCanvasContainerRef!: ElementRef;
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);
}
};
} 代码解析：
-
@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布局中。
