three-zoo 0.5.1 → 0.5.3
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 +52 -58
- 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,106 @@
|
|
|
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
|
|
12
17
|
|
|
13
|
-
|
|
18
|
+
- 📷 **DualFovCamera** - Independent horizontal and vertical FOV control with auto-fitting
|
|
19
|
+
- ☀️ **Sun** - Intuitive spherical positioning for directional lights with HDR integration
|
|
20
|
+
- 🔍 **SceneTraversal** - Find and manipulate objects and materials in scene graphs
|
|
21
|
+
- 🎭 **SkinnedMeshBaker** - Convert animated meshes to static geometry
|
|
22
|
+
|
|
23
|
+
## Installation
|
|
14
24
|
|
|
15
25
|
```bash
|
|
16
26
|
npm install three-zoo
|
|
17
27
|
```
|
|
18
28
|
|
|
19
|
-
##
|
|
20
|
-
|
|
21
|
-
**three-zoo** provides focused solutions for recurring challenges in 3D web development:
|
|
22
|
-
|
|
23
|
-
- **Advanced camera controls** with independent FOV management and auto-fitting
|
|
24
|
-
- **Intuitive lighting** with spherical positioning and HDR integration
|
|
25
|
-
- **Scene graph utilities** for finding and manipulating objects and materials
|
|
26
|
-
- **Animation baking** to convert skinned meshes to static geometry
|
|
27
|
-
|
|
28
|
-
Each utility is designed to work seamlessly with existing Three.js workflows without imposing architectural constraints.
|
|
29
|
-
|
|
30
|
-
## 🛠️ Tools
|
|
29
|
+
## DualFovCamera
|
|
31
30
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
Camera with independent horizontal and vertical field of view control, plus advanced fitting capabilities:
|
|
31
|
+
Advanced camera with independent horizontal and vertical field of view:
|
|
35
32
|
|
|
36
33
|
```typescript
|
|
37
|
-
const camera = new DualFovCamera(90, 60);
|
|
38
|
-
|
|
39
|
-
|
|
34
|
+
const camera = new DualFovCamera(90, 60);
|
|
35
|
+
|
|
36
|
+
// Independent FOV control
|
|
37
|
+
camera.horizontalFov = 100;
|
|
38
|
+
camera.verticalFov = 70;
|
|
40
39
|
|
|
41
|
-
//
|
|
40
|
+
// Auto-fit objects in view
|
|
42
41
|
camera.fitVerticalFovToPoints(vertices);
|
|
43
42
|
camera.fitVerticalFovToBox(boundingBox);
|
|
44
43
|
camera.fitVerticalFovToMesh(skinnedMesh);
|
|
45
44
|
|
|
46
|
-
//
|
|
45
|
+
// Smart camera positioning
|
|
47
46
|
camera.lookAtMeshCenterOfMass(skinnedMesh);
|
|
48
|
-
|
|
49
|
-
// Get actual FOV after aspect ratio calculations
|
|
50
|
-
const actualHFov = camera.getActualHorizontalFov();
|
|
51
|
-
const actualVFov = camera.getActualVerticalFov();
|
|
52
47
|
```
|
|
53
48
|
|
|
54
|
-
|
|
49
|
+
## Sun
|
|
55
50
|
|
|
56
|
-
Directional light with
|
|
51
|
+
Directional light with spherical positioning:
|
|
57
52
|
|
|
58
53
|
```typescript
|
|
59
54
|
const sun = new Sun();
|
|
60
55
|
|
|
61
|
-
// Spherical
|
|
56
|
+
// Spherical coordinates
|
|
62
57
|
sun.elevation = Math.PI / 4; // 45° above horizon
|
|
63
58
|
sun.azimuth = Math.PI / 2; // 90° rotation
|
|
64
59
|
sun.distance = 100; // Distance from origin
|
|
65
60
|
|
|
66
|
-
//
|
|
61
|
+
// Automatic shadow configuration
|
|
67
62
|
sun.configureShadowsForBoundingBox(sceneBounds);
|
|
68
63
|
|
|
69
|
-
// Position
|
|
64
|
+
// Position from HDR environment map
|
|
70
65
|
sun.setDirectionFromHDRTexture(hdrTexture, 50);
|
|
71
66
|
```
|
|
72
67
|
|
|
73
|
-
|
|
68
|
+
## SceneTraversal
|
|
74
69
|
|
|
75
|
-
|
|
70
|
+
Navigate and manipulate Three.js scene graphs:
|
|
76
71
|
|
|
77
72
|
```typescript
|
|
78
|
-
// Find
|
|
79
|
-
const
|
|
80
|
-
const
|
|
73
|
+
// Find by name
|
|
74
|
+
const player = SceneTraversal.getObjectByName(scene, 'Player');
|
|
75
|
+
const metal = SceneTraversal.getMaterialByName(scene, 'MetalMaterial');
|
|
81
76
|
|
|
82
|
-
// Filter with patterns
|
|
77
|
+
// Filter with patterns
|
|
83
78
|
const enemies = SceneTraversal.filterObjects(scene, /^enemy_/);
|
|
84
|
-
const
|
|
79
|
+
const glassMats = SceneTraversal.filterMaterials(scene, /glass/i);
|
|
85
80
|
|
|
86
|
-
// Find
|
|
87
|
-
const
|
|
81
|
+
// Find material users
|
|
82
|
+
const glassObjects = SceneTraversal.findMaterialUsers(scene, /glass/i);
|
|
88
83
|
|
|
89
|
-
// Batch operations
|
|
90
|
-
SceneTraversal.enumerateObjectsByType(scene, Mesh, (mesh) => {
|
|
91
|
-
mesh.castShadow = true;
|
|
92
|
-
});
|
|
93
|
-
|
|
94
|
-
// Process all materials in the scene
|
|
84
|
+
// Batch operations
|
|
95
85
|
SceneTraversal.enumerateMaterials(scene, (material) => {
|
|
96
86
|
if ('roughness' in material) material.roughness = 0.8;
|
|
97
87
|
});
|
|
98
88
|
```
|
|
99
89
|
|
|
100
|
-
|
|
90
|
+
## SkinnedMeshBaker
|
|
101
91
|
|
|
102
|
-
|
|
92
|
+
Convert animated meshes to static geometry:
|
|
103
93
|
|
|
104
94
|
```typescript
|
|
105
|
-
// Bake current pose
|
|
95
|
+
// Bake current pose
|
|
106
96
|
const staticMesh = SkinnedMeshBaker.bakePose(skinnedMesh);
|
|
107
97
|
|
|
108
98
|
// Bake specific animation frame
|
|
109
99
|
const frameMesh = SkinnedMeshBaker.bakeAnimationFrame(
|
|
110
|
-
armature,
|
|
111
|
-
skinnedMesh,
|
|
112
|
-
1.5,
|
|
113
|
-
animationClip
|
|
100
|
+
armature,
|
|
101
|
+
skinnedMesh,
|
|
102
|
+
1.5, // Time in seconds
|
|
103
|
+
animationClip
|
|
114
104
|
);
|
|
115
105
|
```
|
|
116
106
|
|
|
117
|
-
##
|
|
107
|
+
## Requirements
|
|
118
108
|
|
|
119
|
-
- Three.js
|
|
109
|
+
- Three.js ^0.175.0 (peer dependency)
|
|
120
110
|
- TypeScript support included
|
|
121
111
|
|
|
122
|
-
##
|
|
112
|
+
## Contributing
|
|
113
|
+
|
|
114
|
+
Contributions are welcome! Please feel free to submit issues and pull requests.
|
|
115
|
+
|
|
116
|
+
## License
|
|
123
117
|
|
|
124
|
-
MIT
|
|
118
|
+
MIT © [jango](https://github.com/jango-git)
|