Three.js中为CylinderGeometry实现类似object-fit:cover的VideoTexture适配

嘿，我完全懂你的需求——想用THREE.VideoTexture把视频像棋盘格那样规整地平铺到圆柱上，还必须用正交相机对吧？之前直接用MeshBasicMaterial贴纹理的效果肯定是把视频拉伸包裹整个圆柱，完全不是想要的棋盘格重复感，咱们一步步来调整：

核心问题分析 #

默认情况下，MeshBasicMaterial搭配圆柱几何体时，纹理会被单次拉伸覆盖整个圆柱表面，而且视频纹理的重复模式默认是关闭的，这就是效果不符预期的根本原因。咱们需要开启纹理的重复功能，再调整参数适配棋盘格效果，同时兼顾正交相机的显示特性。

分步解决方案 #

1. 正确配置VideoTexture的重复与过滤参数 #

首先要给视频纹理开启重复模式，设置合适的重复次数，同时优化正交相机下的纹理显示效果：

// 先获取你的视频元素（确保HTML里有对应id的视频标签）
const video = document.getElementById('target-video');
// 必须通过用户交互触发播放（浏览器安全策略，禁止无交互自动播放视频）
document.body.addEventListener('click', () => {
  video.play();
});

// 创建视频纹理并配置核心参数
const videoTexture = new THREE.VideoTexture(video);
// 开启横向和纵向的重复包裹模式
videoTexture.wrapS = THREE.RepeatWrapping;
videoTexture.wrapT = THREE.RepeatWrapping;
// 设置重复次数：数值可根据圆柱尺寸调整，数值越大棋盘格单元越小
videoTexture.repeat.set(4, 6);

// 正交相机下优化纹理清晰度
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
// 启用各向异性过滤，提升斜向视角的纹理清晰度
videoTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();

2. 创建适配的圆柱几何体与材质 #

接下来用配置好的纹理创建材质，同时注意圆柱的分段数（分段越多，纹理平铺越平滑）：

// 创建圆柱几何体：参数依次为顶部半径、底部半径、高度、径向分段数
// 径向分段数建议设高一点（比如32），避免纹理在圆柱侧面出现明显拉伸断层
const cylinderGeo = new THREE.CylinderGeometry(1, 1, 2, 32);
// 创建基础材质（如果需要光影效果，可替换为MeshLambertMaterial/MeshPhongMaterial）
const cylinderMat = new THREE.MeshBasicMaterial({
  map: videoTexture,
  side: THREE.DoubleSide // 可选：如果需要看到圆柱内部的纹理
});
// 创建圆柱网格并添加到场景
const cylinder = new THREE.Mesh(cylinderGeo, cylinderMat);
scene.add(cylinder);

3. 正交相机的适配设置 #

确保正交相机的视口比例和窗口一致，避免纹理被拉伸变形：

const width = window.innerWidth;
const height = window.innerHeight;
// 正交相机参数：左、右、上、下、近裁剪面、远裁剪面
const camera = new THREE.OrthographicCamera(
  width / -2, width / 2, height / 2, height / -2, 0.1, 1000
);
camera.position.z = 5; // 把相机往后拉，确保能完整看到整个圆柱

额外优化（可选） #

如果默认的UV映射还是达不到你想要的棋盘格对齐效果，可以自定义圆柱的UV坐标。比如修改几何体的uv属性，调整每个顶点的UV值：

// 获取圆柱的UV属性
const uvAttribute = cylinderGeo.attributes.uv;
// 遍历所有UV点，调整重复比例（示例为横向4倍、纵向6倍，可按需修改）
for (let i = 0; i < uvAttribute.count; i++) {
  const u = uvAttribute.getX(i) * 4;
  const v = uvAttribute.getY(i) * 6;
  uvAttribute.setXY(i, u, v);
}
uvAttribute.needsUpdate = true; // 通知Three.js更新UV数据

这样调整后，视频纹理就会像棋盘格一样重复平铺在圆柱表面，而且完美适配正交相机的显示效果啦。

内容的提问来源于stack exchange，提问作者Abhiraam Eranti