How do I make a heart beat with 3.JS and Leap Motion?

Question

So I have a scene with my 3D model of a heart which I have imported from Blender.

I have hooked it up with a Leap Motion so that we can move and rotate the heart model.

I want to be able to make the heart grow and shrink (to simulate a beating heart) and to play a beating heart sound effect, but only when someone is interacting with the Leap.

I am new to 3.JS and have no idea where to start.

Can someone help?

Answer 1

I'm fairly new to THREE JS but was working on a similar project in the recent past. To make the heart grow and shrink, I would invoke the Scale tool within the Animation loop of THREE.js :

        count = 0

        function render() {

        if (count < 21){
            heart.scale.x += 0.01
            heart.scale.y += 0.01
            heart.scale.z += 0.01
            count += 1
            }
        if ((count > 20) && (count < 40)) {
            heart.scale.x = cube.scale.x - 0.01
            heart.scale.y = cube.scale.x - 0.01
            heart.scale.z = cube.scale.x - 0.01
            count += 1
            } else if (count == 40){ count = 0}


        renderer.render( scene, camera );

        }

You could also use Tween JS for a more clinical and realistic heartbeat function.

for Sound, take a look at this example : http://threejs.org/examples/#misc_sound

for setup with your LeapMotion, I would imagine that you would have a conditional that triggers the animation loop when receiving input and triggering the beating heart and sound loop. Syncing the animation and sound loop should be straightforward.

Hope this helps.