three-zoo 0.5.1 → 0.5.2
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.
- package/README.md +82 -67
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<h1 align="center">🦁 three-zoo</h1>
|
|
3
|
+
<p align="center">
|
|
4
|
+
A modest collection of Three.js utilities designed to simplify common 3D development tasks.
|
|
5
|
+
</p>
|
|
6
|
+
</p>
|
|
2
7
|
|
|
3
8
|
<p align="center">
|
|
4
9
|
<a href="https://www.npmjs.com/package/three-zoo"><img src="https://img.shields.io/npm/v/three-zoo.svg" alt="npm version"></a>
|
|
@@ -8,117 +13,127 @@
|
|
|
8
13
|
<a href="https://threejs.org/"><img src="https://img.shields.io/badge/Three.js-%5E0.175.0-green" alt="Three.js"></a>
|
|
9
14
|
</p>
|
|
10
15
|
|
|
11
|
-
|
|
16
|
+
## Features
|
|
17
|
+
|
|
18
|
+
- 📷 **DualFovCamera** - Independent horizontal and vertical FOV control with auto-fitting
|
|
19
|
+
- 🔍 **SceneTraversal** - Find and manipulate objects and materials in scene graphs
|
|
20
|
+
- 🎭 **SkinnedMeshBaker** - Convert animated meshes to static geometry for optimization
|
|
21
|
+
- ☀️ **Sun** - Intuitive spherical positioning for directional lights with HDR integration
|
|
12
22
|
|
|
13
|
-
##
|
|
23
|
+
## Installation
|
|
14
24
|
|
|
15
25
|
```bash
|
|
16
26
|
npm install three-zoo
|
|
17
27
|
```
|
|
18
28
|
|
|
19
|
-
##
|
|
29
|
+
## Quick Start
|
|
20
30
|
|
|
21
|
-
|
|
31
|
+
```typescript
|
|
32
|
+
import { DualFovCamera, SceneTraversal, Sun } from 'three-zoo';
|
|
22
33
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
34
|
+
// Camera with independent FOV control
|
|
35
|
+
const camera = new DualFovCamera(90, 60);
|
|
36
|
+
camera.fitVerticalFovToMesh(characterMesh);
|
|
37
|
+
camera.lookAtMeshCenterOfMass(characterMesh);
|
|
27
38
|
|
|
28
|
-
|
|
39
|
+
// Scene traversal and manipulation
|
|
40
|
+
const enemies = SceneTraversal.filterObjects(scene, /^enemy_/);
|
|
41
|
+
const glassMaterials = SceneTraversal.filterMaterials(scene, /glass/i);
|
|
29
42
|
|
|
30
|
-
|
|
43
|
+
// Intuitive sun positioning
|
|
44
|
+
const sun = new Sun();
|
|
45
|
+
sun.elevation = Math.PI / 4;
|
|
46
|
+
sun.azimuth = Math.PI / 2;
|
|
47
|
+
sun.configureShadowsForBoundingBox(sceneBounds);
|
|
48
|
+
```
|
|
31
49
|
|
|
32
|
-
|
|
50
|
+
## DualFovCamera
|
|
33
51
|
|
|
34
|
-
|
|
52
|
+
Advanced camera with independent horizontal and vertical field of view:
|
|
35
53
|
|
|
36
54
|
```typescript
|
|
37
|
-
const camera = new DualFovCamera(90, 60);
|
|
38
|
-
camera.horizontalFov = 100; // Change horizontal FOV
|
|
39
|
-
camera.verticalFov = 70; // Change vertical FOV
|
|
55
|
+
const camera = new DualFovCamera(90, 60);
|
|
40
56
|
|
|
41
|
-
//
|
|
57
|
+
// Independent FOV control
|
|
58
|
+
camera.horizontalFov = 100;
|
|
59
|
+
camera.verticalFov = 70;
|
|
60
|
+
|
|
61
|
+
// Auto-fit objects in view
|
|
42
62
|
camera.fitVerticalFovToPoints(vertices);
|
|
43
63
|
camera.fitVerticalFovToBox(boundingBox);
|
|
44
64
|
camera.fitVerticalFovToMesh(skinnedMesh);
|
|
45
65
|
|
|
46
|
-
//
|
|
66
|
+
// Smart camera positioning
|
|
47
67
|
camera.lookAtMeshCenterOfMass(skinnedMesh);
|
|
48
|
-
|
|
49
|
-
// Get actual FOV after aspect ratio calculations
|
|
50
|
-
const actualHFov = camera.getActualHorizontalFov();
|
|
51
|
-
const actualVFov = camera.getActualVerticalFov();
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
### ☀️ Sun
|
|
55
|
-
|
|
56
|
-
Directional light with intuitive spherical positioning and automatic shadow configuration:
|
|
57
|
-
|
|
58
|
-
```typescript
|
|
59
|
-
const sun = new Sun();
|
|
60
|
-
|
|
61
|
-
// Spherical positioning
|
|
62
|
-
sun.elevation = Math.PI / 4; // 45° above horizon
|
|
63
|
-
sun.azimuth = Math.PI / 2; // 90° rotation
|
|
64
|
-
sun.distance = 100; // Distance from origin
|
|
65
|
-
|
|
66
|
-
// Automatically configure shadows for optimal coverage
|
|
67
|
-
sun.configureShadowsForBoundingBox(sceneBounds);
|
|
68
|
-
|
|
69
|
-
// Position sun based on brightest point in HDR environment map
|
|
70
|
-
sun.setDirectionFromHDRTexture(hdrTexture, 50);
|
|
71
68
|
```
|
|
72
69
|
|
|
73
|
-
|
|
70
|
+
## SceneTraversal
|
|
74
71
|
|
|
75
|
-
|
|
72
|
+
Navigate and manipulate Three.js scene graphs:
|
|
76
73
|
|
|
77
74
|
```typescript
|
|
78
|
-
// Find
|
|
79
|
-
const
|
|
80
|
-
const
|
|
75
|
+
// Find by name
|
|
76
|
+
const player = SceneTraversal.getObjectByName(scene, 'Player');
|
|
77
|
+
const metal = SceneTraversal.getMaterialByName(scene, 'MetalMaterial');
|
|
81
78
|
|
|
82
|
-
// Filter with patterns
|
|
79
|
+
// Filter with patterns
|
|
83
80
|
const enemies = SceneTraversal.filterObjects(scene, /^enemy_/);
|
|
84
|
-
const
|
|
85
|
-
|
|
86
|
-
// Find objects that use specific materials
|
|
87
|
-
const meshesWithGlass = SceneTraversal.findMaterialUsers(scene, /glass/i);
|
|
81
|
+
const glassMats = SceneTraversal.filterMaterials(scene, /glass/i);
|
|
88
82
|
|
|
89
|
-
//
|
|
90
|
-
SceneTraversal.
|
|
91
|
-
mesh.castShadow = true;
|
|
92
|
-
});
|
|
83
|
+
// Find material users
|
|
84
|
+
const glassObjects = SceneTraversal.findMaterialUsers(scene, /glass/i);
|
|
93
85
|
|
|
94
|
-
//
|
|
86
|
+
// Batch operations
|
|
95
87
|
SceneTraversal.enumerateMaterials(scene, (material) => {
|
|
96
88
|
if ('roughness' in material) material.roughness = 0.8;
|
|
97
89
|
});
|
|
98
90
|
```
|
|
99
91
|
|
|
100
|
-
|
|
92
|
+
## SkinnedMeshBaker
|
|
101
93
|
|
|
102
|
-
|
|
94
|
+
Convert animated meshes to static geometry:
|
|
103
95
|
|
|
104
96
|
```typescript
|
|
105
|
-
// Bake current pose
|
|
97
|
+
// Bake current pose
|
|
106
98
|
const staticMesh = SkinnedMeshBaker.bakePose(skinnedMesh);
|
|
107
99
|
|
|
108
100
|
// Bake specific animation frame
|
|
109
101
|
const frameMesh = SkinnedMeshBaker.bakeAnimationFrame(
|
|
110
|
-
armature,
|
|
111
|
-
skinnedMesh,
|
|
112
|
-
1.5,
|
|
113
|
-
animationClip
|
|
102
|
+
armature,
|
|
103
|
+
skinnedMesh,
|
|
104
|
+
1.5, // Time in seconds
|
|
105
|
+
animationClip
|
|
114
106
|
);
|
|
115
107
|
```
|
|
116
108
|
|
|
117
|
-
##
|
|
109
|
+
## Sun
|
|
110
|
+
|
|
111
|
+
Directional light with spherical positioning:
|
|
112
|
+
|
|
113
|
+
```typescript
|
|
114
|
+
const sun = new Sun();
|
|
115
|
+
|
|
116
|
+
// Spherical coordinates
|
|
117
|
+
sun.elevation = Math.PI / 4; // 45° above horizon
|
|
118
|
+
sun.azimuth = Math.PI / 2; // 90° rotation
|
|
119
|
+
sun.distance = 100; // Distance from origin
|
|
120
|
+
|
|
121
|
+
// Automatic shadow configuration
|
|
122
|
+
sun.configureShadowsForBoundingBox(sceneBounds);
|
|
123
|
+
|
|
124
|
+
// Position from HDR environment map
|
|
125
|
+
sun.setDirectionFromHDRTexture(hdrTexture, 50);
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
## Requirements
|
|
118
129
|
|
|
119
|
-
- Three.js
|
|
130
|
+
- Three.js ^0.175.0 (peer dependency)
|
|
120
131
|
- TypeScript support included
|
|
121
132
|
|
|
122
|
-
##
|
|
133
|
+
## Contributing
|
|
134
|
+
|
|
135
|
+
Contributions are welcome! Please feel free to submit issues and pull requests.
|
|
136
|
+
|
|
137
|
+
## License
|
|
123
138
|
|
|
124
|
-
MIT
|
|
139
|
+
MIT © [jango](https://github.com/jango-git)
|