three-video-projection 0.0.4 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +27 -14
  2. package/dist/index.js +1 -0
  3. package/dist/index.mjs +1 -0
  4. package/package.json +56 -56
package/README.md CHANGED
@@ -1,8 +1,6 @@
1
- ⭐ 开源不易，点个Star支持下吧 ⭐
2
-
3
- ---
1
+ [English](README_En.md)
4
2
 
5
- [英文](README_En.md)
3
+ ⭐ 开源不易，点个Star支持下吧 ⭐
6
4
 
7
5
  ---
8
6
 
@@ -12,7 +10,7 @@
12
10
 
13
11
  基于 `three.js` 的视频投影工具。仓库包含示例及源码。
14
12
 
15
- > 该工具将 `THREE.VideoTexture` 从一个投影相机投影到场景中的目标模型上，支持深度遮挡剔除、边缘羽化、强度与透明度控制等。
13
+ 该工具将 `THREE.VideoTexture` 从一个投影相机投影到场景中的目标模型上，支持深度遮挡剔除、边缘羽化、强度与透明度控制等。
16
14
 
17
15
  ---
18
16
 
@@ -30,13 +28,26 @@
30
28
 
31
29
  ---
32
30
 
33
- ## 特性
31
+ ## 本地运行示例
32
+
33
+ ```bash
34
+ # 克隆仓库
35
+ git clone https://github.com/hh-hang/three-video-projection.git
36
+
37
+ # 安装依赖
38
+ npm install
39
+
40
+ # 进入示例目录
41
+ cd example
42
+
43
+ # 安装示例依赖
44
+ npm install
45
+
46
+ # 运行开发服务器
47
+ npm run dev
48
+ ```
34
49
 
35
- - 将视频纹理投影到场景中指定的模型（Mesh）。
36
- - 使用深度渲染目标进行遮挡剔除（保证投影不会穿透）。
37
- - 边缘羽化以获得柔和的投影边缘。
38
- - 可调整投影相机位置与姿态（方位角/俯仰/滚转）。
39
- - 监控视频-设置合适参数能做到与视频融合。
50
+ 然后在浏览器访问 `http://localhost:5173` 查看示例。
40
51
 
41
52
  ---
42
53
 
@@ -52,7 +63,7 @@ npm install three-video-projection
52
63
 
53
64
  ```ts
54
65
  import * as THREE from "three";
55
- import { createVideoProjector } from "./path/to/projector";
66
+ import { createVideoProjector } from "three-video-projection";
56
67
 
57
68
  // 创建video元素并生成 VideoTexture
58
69
  const video = document.createElement("video");
@@ -81,12 +92,14 @@ const projector = await createVideoProjector({
81
92
  });
82
93
 
83
94
  // 将需要被投影的 mesh 加入
84
- projector.addTargetMesh(myMesh1);
95
+ projector.addTargetMesh(Mesh1);
96
+ projector.addTargetMesh(Mesh2);
97
+ ...
85
98
 
86
99
  // 渲染循环
87
100
  function animate() {
88
101
  // ... 更新场景、控制器
89
- projector.update();
102
+ projector.update();//（如果模型位置及投影参数固定时，则不需要执行update()函数）
90
103
  }
91
104
  animate();
92
105
 
package/dist/index.js CHANGED
@@ -170,6 +170,7 @@ async function createVideoProjector(opts) {
170
170
  const overlays = [];
171
171
  const targetMeshes = [];
172
172
  const depthProxies = [];
173
+ update();
173
174
  function makeProjectorOverlayAndProxy(mesh) {
174
175
  const overlay = new THREE.Mesh(mesh.geometry, projectorMat);
175
176
  overlay.matrixAutoUpdate = false;
package/dist/index.mjs CHANGED
@@ -134,6 +134,7 @@ async function createVideoProjector(opts) {
134
134
  const overlays = [];
135
135
  const targetMeshes = [];
136
136
  const depthProxies = [];
137
+ update();
137
138
  function makeProjectorOverlayAndProxy(mesh) {
138
139
  const overlay = new THREE.Mesh(mesh.geometry, projectorMat);
139
140
  overlay.matrixAutoUpdate = false;
package/package.json CHANGED
@@ -1,56 +1,56 @@
1
- {
2
- "name": "three-video-projection",
3
- "version": "0.0.4",
4
- "description": "Projector utility for projecting video textures onto meshes (three.js)",
5
- "main": "./dist/index.cjs",
6
- "module": "./dist/index.js",
7
- "types": "./dist/index.d.ts",
8
- "exports": {
9
- ".": {
10
- "import": "./dist/index.js",
11
- "require": "./dist/index.cjs",
12
- "types": "./dist/index.d.ts"
13
- }
14
- },
15
- "files": [
16
- "dist"
17
- ],
18
- "keywords": [
19
- "three",
20
- "videoProjection",
21
- "videoFusion"
22
- ],
23
- "author": "hh-hang",
24
- "license": "MIT",
25
- "scripts": {
26
- "dev": "vite",
27
- "build": "tsup src/index.ts --format cjs,esm --dts",
28
- "prepare": "npm run build",
29
- "build:cinema": "npm --prefix ./examples/cinema install && npm --prefix ./examples/cinema run build",
30
- "build:monitor": "npm --prefix ./examples/monitor install && npm --prefix ./examples/monitor run build",
31
- "collect": "node ./scripts/collect.js",
32
- "build:examples": "npm run build:cinema && npm run build:monitor && npm run collect"
33
- },
34
- "peerDependencies": {
35
- "three": "^0.182.0"
36
- },
37
- "devDependencies": {
38
- "@types/node": "^25.0.10",
39
- "@types/three": "^0.182.0",
40
- "tsup": "^8.5.1",
41
- "typescript": "^5.0.0",
42
- "@vitejs/plugin-vue": "^6.0.3",
43
- "vite": "^7.3.1",
44
- "vue": "^3.5.27"
45
- },
46
- "dependencies": {
47
- "hls.js": "^1.6.15",
48
- "stats.js": "^0.17.0",
49
- "three-player-controller": "^0.2.52"
50
- },
51
- "repository": {
52
- "type": "git",
53
- "url": "https://github.com/hh-hang/three-video-projection"
54
- },
55
- "homepage": "https://hh-hang.github.io/three-video-projection/"
56
- }
1
+ {
2
+ "name": "three-video-projection",
3
+ "version": "0.0.5",
4
+ "description": "Projector utility for projecting video textures onto meshes (three.js)",
5
+ "main": "./dist/index.cjs",
6
+ "module": "./dist/index.js",
7
+ "types": "./dist/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "types": "./dist/index.d.ts",
11
+ "import": "./dist/index.js",
12
+ "require": "./dist/index.cjs"
13
+ }
14
+ },
15
+ "files": [
16
+ "dist"
17
+ ],
18
+ "keywords": [
19
+ "three",
20
+ "videoProjection",
21
+ "videoFusion"
22
+ ],
23
+ "author": "hh-hang",
24
+ "license": "MIT",
25
+ "scripts": {
26
+ "dev": "vite",
27
+ "build": "tsup src/index.ts --format cjs,esm --dts",
28
+ "prepare": "npm run build",
29
+ "build:cinema": "npm --prefix ./examples/cinema install && npm --prefix ./examples/cinema run build",
30
+ "build:monitor": "npm --prefix ./examples/monitor install && npm --prefix ./examples/monitor run build",
31
+ "collect": "node ./scripts/collect.js",
32
+ "build:examples": "npm run build:cinema && npm run build:monitor && npm run collect"
33
+ },
34
+ "peerDependencies": {
35
+ "three": "^0.182.0"
36
+ },
37
+ "devDependencies": {
38
+ "@types/node": "^25.0.10",
39
+ "@types/three": "^0.182.0",
40
+ "@vitejs/plugin-vue": "^6.0.3",
41
+ "tsup": "^8.5.1",
42
+ "typescript": "^5.0.0",
43
+ "vite": "^7.3.1",
44
+ "vue": "^3.5.27"
45
+ },
46
+ "dependencies": {
47
+ "hls.js": "^1.6.15",
48
+ "stats.js": "^0.17.0",
49
+ "three-player-controller": "^0.3.1"
50
+ },
51
+ "repository": {
52
+ "type": "git",
53
+ "url": "https://github.com/hh-hang/three-video-projection"
54
+ },
55
+ "homepage": "https://hh-hang.github.io/three-video-projection/"
56
+ }