本文探讨如何利用 three.js在单个 canvas 中实现与 html dom 元素位置和尺寸完美同步的高级图像动画。通过 three.js的多元素渲染能力，开发者可以将每个 html `div` 视为独立的webgl 渲染区域，从而在不牺牲布局控制和性能的前提下，为网页图像带来液体效果等复杂视觉动画。教程将深入解析其核心原理、实现步骤及关键注意事项，助您构建高性能、视觉震撼的 web 体验。
Canvas 与 HTML 元素同步的挑战
在现代 Web 设计中，为了实现如液态变形、视差滚动或粒子效果等复杂图像动画，许多开发者倾向于使用 <canvas> 或 WebGL 技术。然而，一个常见的困惑是：如何将这些在 <canvas> 上渲染的图像与传统的 HTML DOM 元素（如 div、p 等）进行位置和尺寸的精确同步？尤其当页面滚动或窗口大小调整时，如何保证 Canvas 上的视觉效果能够完美地“附着”在对应的 HTML 元素上，同时避免巨大的性能开销？
这种需求通常出现在那些将整个页面背景固定为一个全尺寸 <canvas>，并在其中渲染所有图像以施加特效的网站。如果直接将所有图像作为 HTML <img> 标签处理，则难以应用复杂的 WebGL 滤镜或着色器效果。因此，将图像渲染到 Canvas 中是实现这些效果的关键。但如何让 Canvas 中的图像“知道”它们对应的 HTML div 的位置和大小，并随之精确变化，是许多开发者面临的难题。
Three.js 的多元素渲染能力：核心解决方案
幸运的是，Three.js 提供了一个优雅的解决方案，即 多元素渲染（Multiple Elements Rendering）。这个机制允许在一个 Web 页面上，通过同一个 WebGL 渲染器，将不同的 Three.js 场景渲染到页面上多个独立的 HTML DOM 元素所定义的区域内。这意味着，你不再需要为每个动画区域创建单独的 Canvas，而是可以拥有一个全屏的 Canvas 作为渲染目标，然后巧妙地将这个 Canvas 的渲染区域“分割”给不同的 HTML 元素。
核心原理 在于：
立即学习 “ 前端免费学习笔记（深入）”；
- 一个主 Canvas 与一个 WebGLRenderer： 页面上只有一个全屏的 <canvas> 元素，并初始化一个 Three.js 的 WebGLRenderer。
- 多个 HTML 占位符： 页面上定义多个 HTML div 元素，它们作为视觉上的“占位符”，其位置和尺寸通过 css 进行常规布局。
- 场景与相机分离： 为每个 HTML div 创建独立的 Three.js Scene 和 Camera。每个场景中包含需要渲染的图像（通常是带有纹理的 PlaneGeometry）。
- 动态视口与剪裁： 在渲染 循环 中，程序会获取每个 HTML div 在屏幕上的精确位置和尺寸（通过 getBoundingClientRect()方法）。然后，WebGLRenderer 的 setViewport()和 setScissor()方法被用来将渲染器的输出限制在当前 div 的区域内，并使用该 div 对应的 Scene 和 Camera 进行渲染。
通过这种方式，Canvas 上的图像动画能够精确地跟随 HTML div 的位置和大小，无论页面如何滚动或窗口如何调整。
实现步骤与关键技术点
以下是实现 Three.js 多元素渲染的关键步骤：
1. HTML 结构
首先，定义一个全屏的 <canvas> 元素和多个用于承载动画图像的 div 元素。
<!DOCTYPE html> <html> <head> <title>Three.js 多元素图像动画 </title> <style> body {margin: 0; overflow-x: hidden;} canvas {display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1;} .container {width: 80%; margin: 50px auto; padding: 20px; background-color: #f0f0f0; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); text-align: center; } .image-placeholder {width: 300px; /* 示例宽度 */ height: 200px; /* 示例高度 */ margin: 30px auto; background-color: #ccc; /* 占位符背景色 */ border: 1px solid #aaa; position: relative; /* 确保 getBoundingClientRect 能正确获取位置 */ overflow: hidden; /* 防止内容溢出 */} h1, p {text-align: center;} </style> </head> <body> <canvas id="mainCanvas"></canvas> <div class="container"> <h1> 欢迎来到高级动画教程 </h1> <p> 这里展示了如何将 Three.js 渲染的图像与 HTML DOM 元素无缝集成。</p> <div class="image-placeholder" id="image1"></div> <p> 这是第一个动态图像区域，它将展示一个 Three.js 渲染的图片。</p> </div> <div class="container"> <p> 继续向下滚动，您会看到另一个动态图像。</p> <div class="image-placeholder" id="image2"></div> <p> 第二个图像区域，同样由 Three.js 驱动。</p> </div> <div class="container"> <p> 更多内容……</p> <div class="image-placeholder" id="image3"></div> <p> 第三个图像区域。</p> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.158.0/three.min.js"></script> <script> // javaScript 代码将在这里实现 </script> </body> </html>2. javascript/Three.js 逻辑
在 JavaScript 中，我们将初始化渲染器，为每个 div 创建场景和相机，并在渲染循环中动态调整视口。
// 获取 DOM 元素 const canvas = document.getElementById('mainCanvas'); const placeholders = document.querySelectorAll('.image-placeholder'); // 1. 初始化渲染器 const renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true, alpha: true}); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x000000, 0); // 透明背景 // 启用剪裁测试 renderer.setScissorTest(true); // 存储每个 placeholder 的场景、相机和网格 const elements = []; // 2. 为每个 placeholder 创建独立的场景、相机和网格 placeholders.forEach((placeholder, index) => {const scene = new THREE.Scene(); // 使用正交相机，更适合 2D 平面图像渲染 const camera = new THREE.OrthographicCamera(-placeholder.clientWidth / 2, placeholder.clientWidth / 2, placeholder.clientHeight / 2, -placeholder.clientHeight / 2, 1, 1000); camera.position.z = 5; // 相机位置 // 加载纹理 const textureLoader = new THREE.TextureLoader(); const imageUrl = `https://picsum.photos/id/${10 + index}/300/200`; // 示例图片 const texture = textureLoader.load(imageUrl, (tex) => {// 确保纹理加载完成后更新材质 mesh.material.map = tex; mesh.material.needsUpdate = true;}); // 创建平面几何体和材质 const geometry = new THREE.PlaneGeometry(placeholder.clientWidth, placeholder.clientHeight); const material = new THREE.MeshBasicMaterial({map: texture, transparent: true}); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); elements.push({domElement: placeholder, scene: scene, camera: camera, mesh: mesh // 方便后续操作，例如动画}); }); // 3. 渲染循环 function animate() { requestAnimationFrame(animate); // 更新渲染器尺寸以匹配窗口 renderer.setSize(window.innerWidth, window.innerHeight); // 遍历每个元素进行渲染 elements.forEach(element => { const rect = element.domElement.getBoundingClientRect(); // 检查元素是否在视口内 if (rect.bottom < 0 || rect.top > window.innerHeight || rect.right < 0 || rect.left > window.innerWidth) {return; // 不在视口内则跳过渲染} // 计算相对 Canvas 的视口位置 const left = rect.left; const bottom = window.innerHeight - rect.bottom; // Canvas 的 Y 轴原点在左下角 const width = rect.width; const height = rect.height; // 设置渲染器的视口和剪裁区域 renderer.setViewport(left, bottom, width, height); renderer.setScissor(left, bottom, width, height); // 更新相机的投影矩阵以匹配当前 placeholder 的尺寸 element.camera.left = -width / 2; element.camera.right = width / 2; element.camera.top = height / 2; element.camera.bottom = -height / 2; element.camera.updateProjectionMatrix(); // 渲染当前场景 renderer.render(element.scene, element.camera); // 示例动画：旋转网格 element.mesh.rotation.y += 0.005; }); } // 监听窗口大小变化 window.addEventListener('resize', () => {renderer.setSize(window.innerWidth, window.innerHeight); // 重新计算所有元素的视口和相机，这会在下一帧的 animate 中完成 }); animate();代码解释：
- renderer.setScissorTest(true); 是关键，它告诉渲染器只渲染剪裁区域内的像素。
- getBoundingClientRect() 返回一个 DOMRect对象，包含元素的大小及其相对于视口的位置。
- renderer.setViewport(left, bottom, width, height) 设置渲染器在 Canvas 上的渲染区域。注意，Three.js 的 Y 轴原点在底部，而 DOM 的 Y 轴原点在顶部，所以需要将 rect.top 转换为window.innerHeight – rect.bottom 来获取 bottom 值。
- 每次渲染时，都会根据 div 的当前尺寸更新正交相机的 left, right, top, bottom 属性，并调用 updateProjectionMatrix()，确保 Three.js 场景的比例与 div 保持一致。
- 通过 rect.bottom < 0 等条件判断元素是否在视口内，可以进行 性能优化，只渲染可见的元素。
注意事项与性能优化
- 坐标系转换： Three.js 的 WebGL 坐标系与 DOM 的像素坐标系存在差异（Y 轴方向相反，原点位置不同），在设置 setViewport 和 setScissor 时需特别注意转换。
- 性能：
- 视口裁剪（Scissor Test）： 这是多元素渲染性能的关键。它确保 GPU 只处理实际可见区域的像素。
- 可见性检查： 在渲染循环中，通过 getBoundingClientRect()判断元素是否在当前视口内，如果不在，则跳过该元素的渲染，可以显著提高性能。
- 材质与着色器： 对于复杂的动画效果，使用 ShaderMaterial 可以实现高度定制化的视觉效果，但要确保着色器效率高。
- 几何体复用： 如果所有图像都使用相同尺寸的平面，可以复用同一个 PlaneGeometry 实例。
- 纹理优化： 使用适当分辨率的纹理，并考虑纹理压缩。
- 响应式设计 ： 窗口大小变化时，需要重新计算所有 div 的位置和尺寸，并更新 renderer.setSize() 以及每个场景的相机投影矩阵。
- 交互性： 如果需要在这些 Canvas 渲染的图像上添加鼠标交互（如点击、悬停），你需要将 DOM事件 与 Three.js 的 Raycaster 结合起来。Raycaster 需要根据鼠标在 div 内的相对位置以及该 div 对应的相机来计算交点。
- 内存管理： 确保在元素被移除时，Three.js 的场景、几何体、材质和纹理都能被正确释放，以避免内存泄漏。
总结
通过 Three.js 的多元素渲染机制，开发者可以优雅地解决在单个 Canvas 中同步 HTML DOM 元素位置和尺寸的难题。这种方法不仅能够实现高度定制化的图像动画效果，如液体变形、视差等，还能通过视口裁剪和可见性检查等优化手段，保持良好的运行时性能。掌握这一技术，将使您能够构建出更具视觉冲击力和交互性的现代web 应用程序。
