A powerful web-based tool for creating stunning GLTF VFX models with real-time preview, designed specifically for voxel-styled games like Minecraft and HYTOPIA.
🎨 8 VFX Types
- ✨ Aura - Glowing aura effects around objects
- 🔥 Fireball - Explosive fire effects
- ❄️ Ice - Freezing particle effects
- 💥 Ground Smash - Impact particles
- 🌪️ Tornado - Swirling spiral effects
- ⭐ Sparkles - Magical sparkle particles
- 💨 Smoke - Smoke cloud effects
- ⚡ Energy Beam - Energy blast effects
🎮 Real-time Preview
- Interactive Three.js viewer with radial gradient background
- Live preview of all effect parameters
- Smooth animations and particle systems
- Beautiful voxel-styled rendering
⚙️ Customization Controls
- Particle count, size, speed, and spread
- Primary and secondary color selection
- Emission shapes (Sphere, Cone, Ring, Box)
- Animation types (Orbit, Rise, Explode, Spiral, Pulse)
- Glow intensity and lifetime controls
- Randomize button for instant variations
💾 Export to GLTF
- One-click export to .gltf format
- Compatible with HYTOPIA and other game engines
- Preserves all animations and particle data
npm installnpm run devOpen your browser to http://localhost:3000
npm run build- Select an Effect Type - Choose from 8 different VFX types
- Customize Parameters - Adjust colors, particle count, size, speed, etc.
- Choose Shape & Animation - Select emission shape and animation style
- Preview in Real-time - See your effect rendered in the 3D viewer
- Export - Click the "Export GLTF" button to save your creation
- Use the 🎲 Randomize button to quickly generate variations
- Adjust Glow Intensity for more vibrant effects
- Increase Particle Count for denser effects (may impact performance)
- Experiment with different Animation types for unique behaviors
- Combine Primary and Secondary Colors for gradient effects
- React 18 - UI framework
- Vite - Fast build tool
- Three.js - 3D rendering and particle systems
- Custom Shaders - GLSL shaders for glowing particle effects
src/
├── components/
│ ├── VFXViewer.jsx # Three.js viewer component
│ ├── VFXViewer.css # Viewer styles
│ ├── GeneratorPanel.jsx # Control panel component
│ └── GeneratorPanel.css # Panel styles
├── utils/
│ └── vfxGenerator.js # VFX generation logic
├── App.jsx # Main app component
├── App.css # App styles
├── main.jsx # Entry point
└── index.css # Global styles
Important: This tool is designed for previewing and designing VFX effects in real-time. The exported GLTF files are templates for reference only.
The /public/examples/ folder contains 18 production-ready GLTF VFX files:
fire-particle.gltf,gas-explode.gltf,ice-aoe.gltf, etc.- Fully validated with complete binary data and animations
- Ready to use in HYTOPIA games!
- Design here: Use this web app to preview effect parameters and colors
- Create in Blockbench: Recreate your design in Blockbench or Blender
- Export properly: Use these tools to generate production GLTFs with valid binary data
Note: Exported files from this tool are JSON templates without proper binary geometry data. They're great for sharing designs but won't work in engines without proper 3D modeling tool export.
// Load a VFX effect
const vfxModel = await hytopia.world.createModel({
modelUri: 'public/examples/fire-particle.gltf',
position: { x: 0, y: 0, z: 0 }
})
// Play the animation
if (vfxModel.animations && vfxModel.animations.length > 0) {
vfxModel.playAnimation(vfxModel.animations[0], { loop: true })
}Feel free to contribute by:
- Adding new VFX types
- Improving particle systems
- Adding more customization options
- Optimizing performance
MIT License - feel free to use in your projects!
Created for HYTOPIA game development 🎮 Inspired by voxel-styled games and particle effects