Skip to main content

Open in New Tab

Lately I’ve been dabbling with creating a third person, web based game using Three.js. As part of this process I have modelled a basic (quick loading) model and applied Mixamo motion captures to it.

I ended up creating this interactive demo (above), mostly just so I could see what the animation sequences looked like from different angles. In some cases, because I manipulated the proportions of rig (with longer arms etc) I still need to go in and tweak the actions a bit. For example if you check out the ‘look around’ sequence you will notice that the right arm intersects the leg at a later point in the sequence.

Within the demo I’ve included the key commands if you’re on desktop and buttons if you’re on a touch device.

One thing that is not in the details is that if you’re running forward and backward and then jump simultaneously you will trigger the forward and backward flips. And you can mouse scroll / click and drag, or swipe / pinch to rotate and zoom.

Otherwise I’m hoping to put a first draft / demo prototype of the game online shortly.

Filed under:
3D, Animation, Three.js

Similar Projects:

Artefact 007

Artefact 007

Generative interactive 3D artwork created using Three.js.

The Partition

The Partition

A study of movement, materials, and lighting using Three.js.

Lustrous

Lustrous

3D digital artwork / animation created with three.js.

All Projects

About Me

Hi, I'm Henry Egloff - a multimedia artist, designer, and coder, based in Byron Bay Australia. I create digital art, design and code apps, write articles, and develop tutorials.

I specialise in designing and building dynamic and interactive media with languages like HTML, CSS, PHP, and Javascript, and using tools like Three.js, Blender, Adobe, and Unity.

I love working creatively and helping people learn.

I'm currently available for freelance / contract projects and online tuition roles. Learn more about me or say hello at contact@henryegloff.com.

Henry Egloff
Twitter Twitter 2 Facebook Linked In Instagram Codepen Behance Youtube Opensea Heart Dark Mode Light Mode