本教程旨在解决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应用提供了坚实的基础。