JSON Three.js Character Generator

Building a 3D character from scratch in Three.js can sometimes feel like sculpting in code—painstaking to position each limb, sweat over materials and geometry settings, and then wire up animation logic. What if you could define your entire character—head, torso, arms, legs, tails or even antennae—in a single JSON-like object, and have it instantiated, shaded, and ready-to-animate with one constructor call? That’s exactly what the Robot + Puppy character generator does.

Key Features

Object-Notation Bootstrap
Define any number of body parts and dimensions in a plain JavaScript object. No more copy-pasting sphere or box geometry setups for every limb.
Automatic Grouping & Positioning
Each part is added to a central THREE.Group so you can move, rotate or scale your whole character as one.
Customizable Materials
Supply material parameters (colors, shininess, textures) per-part or let it fall back to sensible defaults.
Built-In Animations & Behaviors
Robots blink, move mouths and grab; puppies wag tails, blink, lick and follow your mouse pointer—all without extra animation boilerplate.
Easy Scene Integration
A simple addCharacter(bodyDims, x, y, z, key) call places your character in the scene, ready for lights, camera and orbit controls.

How It Works Under the Hood

At its core is Character.js, a single class that:

Parses your dimensions object, looping through keys like head, body, armLeft, legRight, etc.
Creates the appropriate THREE.Geometry (BoxGeometry, SphereGeometry, CylinderGeometry, etc.) with your sizes.
Applies MeshPhongMaterial (or your custom material options) and enables shadows.
Positions each mesh relative to a central pivot, so limbs sit correctly on the torso.
Adds each mesh to a THREE.Group, exposing that group for scene insertion.

You never have to manually compute offsets or parent/child relationships—Character.js does it for you.

Getting Started

1. Include Three.js and the character generator.

<script src="https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.min.js"></script>
<script src="https://s3.amazonaws.com/robotpuppy-threejs/Character.js"></script>

2. Define Your Character

const alienDims = {
  head:   { type: 'sphere', radius: 5 },
  body:   { type: 'box', width: 6, height: 10, depth: 4 },
  armL:   { type: 'cylinder', radiusTop: 1, radiusBottom: 1, height: 8 },
  armR:   { type: 'cylinder', radiusTop: 1, radiusBottom: 1, height: 8 },
  legL:   { type: 'cylinder', radius: 1, height: 10 },
  legR:   { type: 'cylinder', radius: 1, height: 10 },
  eyeL:   { type: 'sphere', radius: 1.2, color: 0x00ff00 },
  eyeR:   { type: 'sphere', radius: 1.2, color: 0x00ff00 }
};

3. Define Your Character

const scene = new THREE.Scene();
// … set up camera, lights, renderer …

addCharacter(alienDims, 0, 0, 0, 'alien');

Live Demo & Source

Play with it live on CodePen: https://codepen.io/madchops/pen/GWrvWN
Grab the source (Character.js) on GitHub: https://github.com/madchops1/robotandpuppy-threejs

Why You’ll Love It

Speed: Spin up placeholders or fully featured characters in minutes.
Flexibility: Swap shapes, colors or entire parts by editing your dimensions object.
Scalability: Add new body parts—wings, tails, tools—without touching the core generator code.
Maintainability: Centralized character logic keeps your scene code clean and focused on choreography.

Whether you’re prototyping game avatars, building a 3D chat app or just exploring creative coding, this generator turns hours of setup into a few lines of JSON. Give your next Three.js project a head start—literally—by bootstrapping your characters from object notation to fully interactive 3D models.

Explore the live demo on CodePen—adapt the JSON to your imagination, and get your Three.js characters running in record time.