本教程详细介绍了如何在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 #webglCanvas class="webgl-canvas"></canvas> </div> <!-- 如果需要多个画布，可以重复此结构 --> <div class="another-canvas-container"> <canvas #anotherWebglCanvas 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化。
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); } }; }
代码解析：
- @ViewChild: 我们使用@ViewChild(‘webglCanvas’) webglCanvasRef!: ElementRef<HTMLCanvasElement>; 来获取模板中带有#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布局中。