本文探讨如何利用three.js在单个canvas中实现与html dom元素位置和尺寸完美同步的高级图像动画。通过three.js的多元素渲染能力，开发者可以将每个html `div`视为独立的webgl渲染区域，从而在不牺牲布局控制和性能的前提下，为网页图像带来液体效果等复杂视觉动画。教程将深入解析其核心原理、实现步骤及关键注意事项，助您构建高性能、视觉震撼的web体验。
Canvas与HTML元素同步的挑战
在现代Web设计中，为了实现如液态变形、视差滚动或粒子效果等复杂图像动画，许多开发者倾向于使用
这种需求通常出现在那些将整个页面背景固定为一个全尺寸
Three.js的多元素渲染能力：核心解决方案
幸运的是，Three.js提供了一个优雅的解决方案，即多元素渲染（Multiple Elements Rendering）。这个机制允许在一个Web页面上，通过同一个WebGL渲染器，将不同的Three.js场景渲染到页面上多个独立的HTML DOM元素所定义的区域内。这意味着，你不再需要为每个动画区域创建单独的Canvas，而是可以拥有一个全屏的Canvas作为渲染目标，然后巧妙地将这个Canvas的渲染区域“分割”给不同的HTML元素。
核心原理在于：
立即学习“前端免费学习笔记（深入）”；
- 一个主Canvas与一个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结构
首先，定义一个全屏的
Three.js 多元素图像动画
欢迎来到高级动画教程
这里展示了如何将Three.js渲染的图像与HTML DOM元素无缝集成。
这是第一个动态图像区域，它将展示一个Three.js渲染的图片。
继续向下滚动，您会看到另一个动态图像。
第二个图像区域，同样由Three.js驱动。
更多内容...
第三个图像区域。
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
注意事项与性能优化
- 坐标系转换： 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应用程序。
