本教程详细介绍了如何在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.tsimport { 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布局中。
以上就是在Angular中创建并管理多个Three.js画布以显示场景的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1593539.html
微信扫一扫 
支付宝扫一扫 
