three.js 视频投影怎么做？这个开源工具把流程写明白了

three-video-projection 是一个基于 three.js 的视频投影工具，目标是在三维场景中将 THREE.VideoTexture 通过投影相机投射到目标模型上。

three-video-projection 的核心机制是：使用投影相机把 VideoTexture 作为投影源，投射到场景中的目标网格，同时通过深度渲染与偏移设置处理遮挡关系，并支持边缘羽化与强度/透明度控制。

它关注的是“视频纹理如何在三维模型上被投影并正确遮挡”，而不是完整的渲染引擎或通用后期框架。

能力点：

• 深度遮挡剔除：通过深度渲染目标与偏移参数（projBias）来减少投影穿透或 Z-fighting 的问题，有助于在复杂模型上维持较稳定的遮挡关系。
• 边缘羽化：通过 edgeFeather 提供投影边缘过渡，降低硬边界带来的突兀感。
• 强度与透明度控制：以 intensity 和 opacity 控制投影亮度与全局透明度，方便与场景整体光照或材质风格进行协调。
• 辅助可视化：支持 CameraHelper 以便调试投影相机位置与方向。

使用案例

源码运行

想快速验证效果，建议先在本地跑起示例工程：

1. git clone https://github.com/hh-hang/three-video-projection.git 克隆仓库
2. npm install 安装根目录依赖
3. cd example 进入示例目录
4. npm install 安装示例依赖
5. npm run dev 启动示例开发服务器

完成后在浏览器访问 http://localhost:5173 查看示例场景。

项目引入

1. npm install three-video-projection 安装依赖

核心就是创建 VideoTexture、初始化投影器、添加投影目标，并在渲染循环中更新。下面直接使用其案例代码：

import * as THREE from 'three';
import { createVideoProjector } from 'three-video-projection';
 
const video = document.createElement('video');
video.src = 'path/to/video.mp4';
video.loop = true;
video.muted = true;
video.playsInline = true;
await video.play();
 
const videoTexture = new THREE.VideoTexture(video);
 
const projector = await createVideoProjector({
  scene,
  renderer,
  videoTexture,
  projCamPosition: [2, 2, 2],
  projCamParams: {
    fov: 30,
    aspect: 1,
    near: 0.5,
    far: 50,
  },
  orientationParams: {
    azimuthDeg: 180,
    elevationDeg: -10,
    rollDeg: 0,
  },
  intensity: 1.0,
  opacity: 1.0,
  projBias: 0.0001,
  edgeFeather: 0.05,
  isShowHelper: true,
});
 
projector.addTargetMesh(Mesh1);
projector.addTargetMesh(Mesh2);
 
function animate() {
  projector.update();
}

结尾

从工程角度看，three-video-projection 适合那些需要在三维场景中呈现“投影效果”的应用，例如展厅、影院、舞台或场景化演示。它提供了投影相机、深度遮挡、边缘羽化与透明度等基础能力，使投影表现更可控。

不适合的场景包括：仅需把视频作为贴图显示、且不关心投影角度与遮挡关系的简单渲染需求；或者需要完整投影校准、几何畸变校正等更复杂流程的应用。该工具更多关注投影效果本身，并不覆盖完整的投影映射与校准流程。

GitHub 项目链接：https://github.com/hh-hang/three-video-projection