Blockbench is a free, open‑source low‑poly 3D editor with pixel‑art texturing and a built‑in Animate workspace for bone/keyframe animation, making it a fast path from modeling to motion for real‑time visuals. It exports to production formats like glTF/glb, FBX, and DAE so the same animated assets can run in browsers, game engines, and VJ pipelines, including Three.js playback in the web.[1][2][3][4]
Website: https://www.blockbench.net
Github: https://github.com/JannisX11/blockbench
Blockbench at a glance
Blockbench focuses on low‑poly modeling with pixel‑art textures, ships a modern, beginner‑friendly UI, and supports deep customization through plugins for advanced users and workflows. It handles standardized exports for general 3D use and has dedicated formats for Minecraft Java and Bedrock when you need game‑specific features and animation integration.[1]
Why VJs should care
The glTF/glb export preserves hierarchy, materials, and animation while keeping assets lightweight and web‑friendly, which is ideal for browser‑based shows and real‑time playback. Three.js loads glTF 2.0 directly via GLTFLoader, so your Blockbench animations can be streamed into a scene and driven live with mixers, timelines, or MIDI/OSC bridges.[3][4][5]
Animate in Blockbench
- Set up a clean bone hierarchy with sensible pivots so each movable piece rotates around the right point; use the Pivot tool and a root bone to control the whole figure.[2]
- Switch to the Animate tab, create a named animation, and keyframe rotation/position/scale on the timeline; Blockbench auto‑generates keyframes when you adjust transforms at new times.[2]
- Use the playhead to preview loops, tweak timing, and refine secondary motion; save your project to keep animation data alongside the model.[2]
Export for production
glTF/glb is the go‑to for web and Sketchfab, FBX is preferred for Unreal/Unity, and DAE is great for Blender/Unity interchange; OBJ is widely supported but lacks hierarchy/animations and is best for static objects. Blockbench’s export menu lives under File → Export, with guidance for program‑specific setup like pixel‑perfect filtering and alpha modes in DCCs/engines.[3]
Use case | Recommended format |
---|---|
Browser/Godot/Sketchfab | glTF/glb, with embedded textures and animation support [3] |
Unreal Engine | FBX for robust engine import workflows [3] |
Unity | FBX or DAE depending on pipeline needs [3] |
Blender (rendering) | glTF for materials/animation fidelity [3] |
Blender (modeling) | DAE for interchange editing [3] |
Static meshes | OBJ (no animations) [3] |
Play it in Three.js
GLTFLoader loads glTF 2.0 scenes, meshes, materials, skins, morph targets, and embedded animations, keeping asset delivery efficient for the web. AnimationMixer plays AnimationClips on a model, while AnimationAction handles play/pause/loop/blending for clip control and seamless transitions in a live set.[4][5][6]
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { AnimationMixer, LoopRepeat } from 'three'
// load model + animations
const loader = new GLTFLoader()
let mixer, actions = {}
loader.load('models/character.glb', (gltf) => {
const model = gltf.scene
scene.add(model)
mixer = new AnimationMixer(model)
// assume multiple clips exported from Blockbench
gltf.animations.forEach((clip) => {
const action = mixer.clipAction(clip)
action.setLoop(LoopRepeat)
actions[clip.name] = action
})
// play a specific Blockbench clip by name
actions['Idle']?.play()
})
// in your render loop
const clock = new THREE.Clock()
function render() {
const dt = clock.getDelta()
if (mixer) mixer.update(dt)
renderer.render(scene, camera)
requestAnimationFrame(render)
}
render()
Use mixer.timeScale for tempo sync, or switch actions with crossfading for scene changes while keeping CPU overhead predictable.[5][6]
Pro tips for VJ performance
- Keep geometry lean and texture resolutions modest; glTF supports pixel‑perfect filtering for crisp art‑direction in low‑poly/pixel‑art styles.[3]
- Export multiple short loops as separate clips and blend them with AnimationAction to move between states without pops, using clampWhenFinished and blend modes as needed.[6]
- Drive speed with mixer.timeScale for BPM‑locked motion, and pre‑load GLBs to avoid hitches during live transitions.[5]
Extend with plugins
Plugins are JavaScript files registered with Plugin.register, can target desktop or web variants, and are hot‑loadable for rapid iteration, enabling custom exporters, tools, or QC checks for show pipelines. The Plugin API and reference docs cover metadata, lifecycle hooks, and TypeScript typings for better autocompletion and stability in complex setups. Notably, while Blockbench’s core is GPL‑3.0, plugins/themes may be proprietary or paid, which suits studio toolchains and marketplace distribution.[7][8][1]
Open source and builds
Blockbench is GPL‑3.0 licensed; clone the repo, install dependencies, bundle, and run dev to hack features, test plugins, or tailor exports for your venue pipeline. The project ships frequent releases, with recent updates continuing to refine collections, selection, and workflow polish for production use.[1]
Quick VJ checklist
- Model low‑poly with clean bone pivots for performant, predictable animation.[2]
- Animate in the Animate tab and preview tight loops with clear clip names.[2]
- Export glTF/glb for web playback; keep textures embedded for simpler deployment.[3]
- Load with Three.js GLTFLoader and play clips via AnimationMixer/AnimationAction.[4][6][5]
- Use mixer.timeScale and action crossfades for tempo‑aware transitions on stage.[6][5]
With Blockbench’s approachable modeling, keyframed animation, and glTF export, creating live‑ready 3D loops for browser‑based shows becomes a fast, repeatable pipeline from concept to stage visuals.[4][3][2]
Here are the links, now displayed as clickable URLs:
- https://github.com/JannisX11/blockbench
- https://www.blockbench.net/wiki/guides/bedrock-modeling/
- https://www.blockbench.net/wiki/guides/export-formats/
- https://threejs.org/docs/examples/en/loaders/GLTFLoader.html
- https://threejs.org/docs/api/en/animation/AnimationMixer.html
- https://threejs.org/docs/api/en/animation/AnimationAction.html
- https://www.blockbench.net/wiki/api/plugin/
- https://www.blockbench.net/wiki/docs/plugin/
- https://www.youtube.com/watch?v=HY_wjAnSy4I
- https://www.reddit.com/r/Blockbench/comments/1du5c6v/how_do_i_animate/
- https://www.youtube.com/playlist?list=PLvULVkjBtg2TQWdJvyz-tpAqcwhIhctSP
- https://www.youtube.com/watch?v=QdZX1W1IEL0
- https://www.blockbench.net
- https://www.blockbench.net/wiki/guides/model-rendering/
- https://www.blockbench.net/wiki/guides/minecraft-particles-sounds/
- https://www.reddit.com/r/Blockbench/comments/p9uewn/gltf_in_blockbench_i_dont_know_what_flair_to_use/
- https://github.com/JannisX11/blockbench-plugins
- https://www.youtube.com/watch?v=y0ees2j17AY
- https://www.blockbench.net/wiki/blockbench/formats/
- https://www.blockbench.net/wiki/api/blockbench/
- https://sketchfab.com/tags/blockbench-animation
- https://www.facebook.com/groups/nomadsculpt/posts/1541909993656201/
- https://stackoverflow.com/questions/77733958/create-brand-new-weapon-with-blockbench-and-a-minecraft-plugin-api
- https://mcreator.net/wiki/entity-model-animations
- https://threejs.org/docs/
- https://sbcode.net/threejs/gltf-loader/
- https://threejs.org/manual/
- https://sbcode.net/threejs/loaders-gltf/
- https://henryegloff.com/how-to-load-gltf-animations-as-separate-files-in-three-js/
- https://www.modelo.io/damf/article/2024/05/22/0852/mastering-three.js-gltfloader--a-complete-guide
- https://discourse.threejs.org/t/how-do-i-play-a-glb-animation/60970
- https://www.youtube.com/watch?v=WBe3xrV4CPM
- https://www.youtube.com/watch?v=NsJ0sPa8Za8
- https://discourse.threejs.org/t/how-to-use-the-animation-that-comes-with-the-gltf-file-that-i-downloaded-in-sketchfab/51529
- https://discourse.threejs.org/t/gltfexporter-and-gltfloader/49883
- https://threejs.org/docs/api/en/animation/AnimationObjectGroup.html
- https://stackoverflow.com/questions/60704912/play-a-gltf-animation-three-js
- https://discourse.threejs.org/t/playing-list-of-animation-at-once/33530
- https://sbcode.net/threejs/gltf-animation/
- https://pythreejs.readthedocs.io/en/stable/api/animation/AnimationMixer_autogen.html
- https://threejs.org/examples/
Discussion (0)