本教程旨在解决Angular应用中Three.js场景默认占满全屏的问题，指导开发者如何将Three.js场景渲染到指定大小和位置的Canvas元素上。文章将详细介绍通过HTML结构、CSS样式以及Angular的`@ViewChild`和Three.js渲染器配置，实现对多个Canvas的精细化控制，确保场景按需显示，提升应用布局的灵活性和专业性。
在Angular应用中集成Three.js时，一个常见的挑战是Three.js渲染器默认会创建一个占据整个视口的Canvas元素，或者在不当处理下，其渲染内容会铺满整个屏幕。为了实现更精细的布局控制，例如在页面上显示多个独立的三维场景，或者将三维场景嵌入到特定大小和位置的UI组件中，我们需要采取一套结构化的方法。
1. 构建HTML结构
首先，在Angular组件的模板（.component.html）中，为每个Three.js场景预留一个Canvas元素。为了更好地控制Canvas的大小和位置，建议将其包裹在一个父级div容器中。
<!-- app.component.html --> <div class="canvas-container" #canvasContainer1> <canvas class="webgl-canvas" #webglCanvas1></canvas> </div> <div class="canvas-container" #canvasContainer2> <canvas class="webgl-canvas" #webglCanvas2></canvas> </div> <!-- 可以根据需要添加更多容器和Canvas -->
这里我们使用了模板引用变量（#canvasContainer1, #webglCanvas1等），这是Angular中获取DOM元素引用的推荐方式，比直接使用document.querySelector更加安全和Angular化。
2. 定义CSS样式
接下来，通过CSS来定义容器和Canvas的尺寸、位置以及其他布局属性。关键在于让父容器决定Canvas的外部尺寸和位置，而Canvas自身则填充其父容器。
/* app.component.css */
.canvas-container {
width: 300px; /* 定义容器宽度 */
height: 300px; /* 定义容器高度 */
position: absolute; /* 示例：使用绝对定位控制位置 */
top: 50px; /* 示例：距离顶部50px */
left: 50px; /* 示例：距离左侧50px */
border: 1px solid #ccc; /* 可选：方便调试容器边界 */
overflow: hidden; /* 确保内容不会溢出容器 */
}
/* 如果有多个Canvas，可以通过id或更具体的类名区分 */
/* 例如，第一个容器 */
.canvas-container:nth-of-type(1) {
top: 50px;
left: 50px;
}
/* 第二个容器 */
.canvas-container:nth-of-type(2) {
top: 50px;
left: 400px; /* 与第一个容器错开 */
}
.webgl-canvas {
width: 100%; /* Canvas填充其父容器的宽度 */
height: 100%; /* Canvas填充其父容器的高度 */
display: block; /* 避免Canvas元素下方出现额外空间 */
}通过position: absolute和top/left等属性，可以精确控制每个Three.js场景在页面上的位置。width和height属性则定义了场景的可见区域。
3. Angular组件中的Three.js集成
在Angular组件的TypeScript文件（.component.ts）中，我们需要获取对HTML中Canvas和其容器的引用，然后使用这些引用来初始化Three.js渲染器。
3.1 获取DOM元素引用
Angular的@ViewChild装饰器是获取模板中DOM元素或组件实例引用的最佳实践。
// app.component.ts
import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } 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 {
title = 'angular-threejs-canvas-control';
// 获取第一个Canvas容器和Canvas元素的引用
@ViewChild('canvasContainer1', { static: true }) canvasContainerRef1!: ElementRef<HTMLDivElement>;
@ViewChild('webglCanvas1', { static: true }) webglCanvasRef1!: ElementRef<HTMLCanvasElement>;
// 获取第二个Canvas容器和Canvas元素的引用
@ViewChild('canvasContainer2', { static: true }) canvasContainerRef2!: ElementRef<HTMLDivElement>;
@ViewChild('webglCanvas2', { static: true }) webglCanvasRef2!: ElementRef<HTMLCanvasElement>;
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 {
// 初始化第一个场景
this.initScene1();
this.animate1();
// 初始化第二个场景
this.initScene2();
this.animate2();
}
private initScene1(): void {
const container = this.canvasContainerRef1.nativeElement;
const canvas = this.webglCanvasRef1.nativeElement;
const sizes = {
width: container.clientWidth,
height: container.clientHeight
};
// 场景
this.scene1 = new THREE.Scene();
// 相机
this.camera1 = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 1000);
this.camera1.position.z = 5;
this.scene1.add(this.camera1);
// 物体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
this.cube1 = new THREE.Mesh(geometry, material);
this.scene1.add(this.cube1);
// 渲染器
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);
this.cube1.rotation.x += 0.01;
this.cube1.rotation.y += 0.01;
this.renderer1.render(this.scene1, this.camera1);
}
private initScene2(): void {
const container = this.canvasContainerRef2.nativeElement;
const canvas = this.webglCanvasRef2.nativeElement;
const sizes = {
width: container.clientWidth,
height: container.clientHeight
};
// 场景
this.scene2 = new THREE.Scene();
// 相机
this.camera2 = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 1000);
this.camera2.position.z = 5;
this.scene2.add(this.camera2);
// 物体
const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
this.sphere2 = new THREE.Mesh(geometry, material);
this.scene2.add(this.sphere2);
// 渲染器
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);
this.sphere2.rotation.y += 0.005;
this.renderer2.render(this.scene2, this.camera2);
}
}3.2 关键步骤解释
- @ViewChild: 使用@ViewChild('templateRefName', { static: true })来获取DOM元素的引用。static: true表示在组件初始化时（OnInit生命周期钩子之前）就可以获取到引用，适用于不需要在模板中进行条件渲染的元素。如果元素是动态渲染的，则应使用static: false并在AfterViewInit中访问。
- ngAfterViewInit: 在这个生命周期钩子中初始化Three.js场景，因为此时模板中的DOM元素已经渲染完毕，@ViewChild才能正确获取到引用。
- 获取容器尺寸: container.clientWidth和container.clientHeight可以准确获取到父级div的实际渲染尺寸。
-
初始化WebGLRenderer:
- canvas: canvas：这是最关键的一步，它告诉Three.js渲染器使用我们指定的HTML <canvas>元素进行渲染，而不是创建一个新的。
- renderer.setSize(sizes.width, sizes.height)：将渲染器的大小设置为与父容器的尺寸一致。这确保了Three.js的渲染输出能够完美适配我们定义的Canvas区域。
- 相机比例: new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 1000)中，相机的宽高比（sizes.width / sizes.height）也应该与Canvas的实际尺寸保持一致，以避免图像拉伸变形。
- 动画循环: requestAnimationFrame用于创建高效的动画循环，分别调用各自渲染器的render方法。
4. 注意事项与最佳实践
-
响应式设计: 如果Canvas容器的大小可能会动态变化（例如，在窗口调整大小时），你需要监听窗口的resize事件或使用Angular的HostListener来更新Three.js渲染器和相机的尺寸。
// 在AppComponent中添加 @HostListener('window:resize', ['$event']) onResize(event: Event): void { this.updateRendererSize(this.renderer1, this.camera1, this.canvasContainerRef1.nativeElement); this.updateRendererSize(this.renderer2, this.camera2, this.canvasContainerRef2.nativeElement); } private updateRendererSize(renderer: THREE.WebGLRenderer, camera: THREE.PerspectiveCamera, container: HTMLDivElement): void { const width = container.clientWidth; const height = container.clientHeight; // 更新相机 camera.aspect = width / height; camera.updateProjectionMatrix(); // 更新渲染器 renderer.setSize(width, height); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); } 组件化: 对于更复杂的应用，可以考虑将每个Three.js场景封装成独立的Angular组件，这样可以更好地管理代码和状态。每个Three.js组件内部负责自身的场景、相机、渲染器和动画逻辑。
性能优化: 当有多个Three.js场景时，需要注意性能。确保每个场景只渲染必要的内容，并考虑使用WebGLRenderer的dispose()方法在组件销毁时释放资源，防止内存泄漏。
避免直接DOM操作: 在Angular应用中，应尽量避免直接使用document.createElement或document.body.appendChild等原生DOM操作。@ViewChild和模板绑定是更符合Angular范式的做法。
总结
通过上述步骤，我们可以在Angular应用中实现对Three.js场景Canvas的精确控制。核心在于利用HTML和CSS定义Canvas的可见区域，并通过Angular的@ViewChild获取Canvas引用，最终在Three.js渲染器初始化时，将渲染目标指定为该Canvas，并将其尺寸与父容器同步。这种方法不仅解决了全屏显示的问题，也为构建具有复杂三维交互的Angular应用提供了坚实的基础。
