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.
Files changed (2) hide show
  1. package/README.md +82 -67
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,4 +1,9 @@
1
- # 🦁 three-zoo
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
- A modest collection of Three.js utilities designed to simplify common 3D development tasks.
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
- ## 📦 Install
23
+ ## Installation
14
24
 
15
25
  ```bash
16
26
  npm install three-zoo
17
27
  ```
18
28
 
19
- ## 🎯 Overview
29
+ ## Quick Start
20
30
 
21
- **three-zoo** provides focused solutions for recurring challenges in 3D web development:
31
+ ```typescript
32
+ import { DualFovCamera, SceneTraversal, Sun } from 'three-zoo';
22
33
 
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
34
+ // Camera with independent FOV control
35
+ const camera = new DualFovCamera(90, 60);
36
+ camera.fitVerticalFovToMesh(characterMesh);
37
+ camera.lookAtMeshCenterOfMass(characterMesh);
27
38
 
28
- Each utility is designed to work seamlessly with existing Three.js workflows without imposing architectural constraints.
39
+ // Scene traversal and manipulation
40
+ const enemies = SceneTraversal.filterObjects(scene, /^enemy_/);
41
+ const glassMaterials = SceneTraversal.filterMaterials(scene, /glass/i);
29
42
 
30
- ## 🛠️ Tools
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
- ### 📷 DualFovCamera
50
+ ## DualFovCamera
33
51
 
34
- Camera with independent horizontal and vertical field of view control, plus advanced fitting capabilities:
52
+ Advanced camera with independent horizontal and vertical field of view:
35
53
 
36
54
  ```typescript
37
- const camera = new DualFovCamera(90, 60); // hFov, vFov
38
- camera.horizontalFov = 100; // Change horizontal FOV
39
- camera.verticalFov = 70; // Change vertical FOV
55
+ const camera = new DualFovCamera(90, 60);
40
56
 
41
- // Automatically adjust FOV to fit objects
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
- // Point camera at mesh center of mass
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
- ### 🔍 SceneTraversal
70
+ ## SceneTraversal
74
71
 
75
- Scene graph navigation and batch operations for finding and manipulating objects:
72
+ Navigate and manipulate Three.js scene graphs:
76
73
 
77
74
  ```typescript
78
- // Find objects and materials by name
79
- const obj = SceneTraversal.getObjectByName(scene, 'player');
80
- const material = SceneTraversal.getMaterialByName(scene, 'metal');
75
+ // Find by name
76
+ const player = SceneTraversal.getObjectByName(scene, 'Player');
77
+ const metal = SceneTraversal.getMaterialByName(scene, 'MetalMaterial');
81
78
 
82
- // Filter with patterns or custom functions
79
+ // Filter with patterns
83
80
  const enemies = SceneTraversal.filterObjects(scene, /^enemy_/);
84
- const glassMaterials = SceneTraversal.filterMaterials(scene, /glass/i);
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
- // Batch operations on specific object types
90
- SceneTraversal.enumerateObjectsByType(scene, Mesh, (mesh) => {
91
- mesh.castShadow = true;
92
- });
83
+ // Find material users
84
+ const glassObjects = SceneTraversal.findMaterialUsers(scene, /glass/i);
93
85
 
94
- // Process all materials in the scene
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
- ### 🎭 SkinnedMeshBaker
92
+ ## SkinnedMeshBaker
101
93
 
102
- Converts animated skinned meshes to static geometry:
94
+ Convert animated meshes to static geometry:
103
95
 
104
96
  ```typescript
105
- // Bake current pose to static mesh
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, // Root object with bones
111
- skinnedMesh, // Mesh to bake
112
- 1.5, // Time in seconds
113
- animationClip // Animation to sample
102
+ armature,
103
+ skinnedMesh,
104
+ 1.5, // Time in seconds
105
+ animationClip
114
106
  );
115
107
  ```
116
108
 
117
- ## ⚡ Requirements
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 >= 0.150.0
130
+ - Three.js ^0.175.0 (peer dependency)
120
131
  - TypeScript support included
121
132
 
122
- ## 📄 License
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)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "three-zoo",
3
- "version": "0.5.1",
3
+ "version": "0.5.2",
4
4
  "description": "Some reusable bits for building things with Three.js ",
5
5
  "scripts": {
6
6
  "clean": "rm -rf dist",