Blender LiveLink

🎨 Integrate Blender with your Vite + Three.js projects seamlessly!

Testing Locally (Before Publishing)

If you want to test your CLI without publishing it to NPM yet:

1. Link the package:

   cd blender-livelink
   npm link

2. Create a test project:

   cd ..
   npm create vite@latest test-project -- --template vanilla
   cd test-project
   npm install

3. Run the CLI:

   blender-livelink init

Quick Start

# Install globally
npm install -g blender-livelink

# Setup in your Vite project
cd my-vite-project
npm install three
blender-livelink init

# Start server
blender-livelink server start

# Install Blender addon
blender-livelink addon

What It Does

• 📹 Live camera sync - Camera animations from Blender to Three.js
• 🎭 Material updates - Animated material properties (color, roughness, metallic, etc.)
• 📦 3D model export - Automatic GLB export to your project
• 🔥 Hot reload - Changes reflect immediately in browser

Usage (One-Liner!)

In your main.js:

import * as THREE from 'three';
import { initBlenderScene } from './blender/BlenderSync.js';

const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Load Blender scene (camera + models + animations)
const { camera, update } = await initBlenderScene(scene);

function animate() {
    requestAnimationFrame(animate);
    update(); // Updates everything!
    renderer.render(scene, camera);
}
animate();

CLI Commands

| Command | Description | |---------|-------------| | blender-livelink init | Setup in current Vite project | | blender-livelink server start | Start the Python server | | blender-livelink addon | Get Blender addon location |

Project Structure

After running init, your project will have:

your-project/
├── src/
│   ├── main.js               # Your code
│   └── blender/              # ← Created by CLI
│       ├── BlenderCamera.js  # Camera utilities
│       ├── BlenderSync.js    # Main integration
│       ├── current_scene.json # Tracks active scene
│       └── ...               # Generated scene files
├── public/
│   └── ...                   # Generated GLB files
└── package.json

No Python files in your project! 🎉

Workflow

1. In Blender: Create your scene, enter a name (e.g., "Level1"), and push
2. In Browser: Instant updates, automatically loads the correct scene
3. Iterate: Make changes in Blender, push again

Requirements

• Node.js 14+
• Python 3 (for the server)
• Blender 2.8+
• Vite project with Three.js

Features

✅ Camera position, rotation, FOV animation
✅ Material properties (color, roughness, metallic, emission, alpha)
✅ Multiple objects support
✅ Mesh animations (keyframes)
✅ Smart Push - Name your scenes and switch between them automatically
✅ Auto-refresh on changes
✅ Clean project structure

Blender Addon Installation

1. Run: blender-livelink addon
2. Copy the path shown
3. In Blender: Edit → Preferences → Add-ons → Install
4. Select the .py file
5. Enable "Development: Three.js Live Link"

Troubleshooting

Models not showing up?

• Make sure server is running (blender-livelink server start)
• Check browser console for errors (F12)
• Verify scene.glb exists in public/ folder

Server won't start?

• Ensure Python 3 is installed: python --version
• Check if port 5000 is available

License

MIT

Made with ❤️ for the Blender + Three.js community