Check out a cool demo
I recently made the switch to using three.js (coming from a background in OpenGL and C++, so adapting to JavaScript wasn't too difficult). To get a better understanding of how to set things up, I explored various three.js examples. I came across this helpful video [xttp://www.youtube.com/watch?v=1ENVYLp_NgY] explaining how to integrate cannon.js, and I thought I'd give it a try as well :)
My ultimate goal is to create a 3D world with shadows, physics, and an animated player that can interact with objects. I decided to start with this example [xttp://threejs.org/examples/webgl_morphtargets_md2_control.html] because it already had the animated player mesh and the player controls were suitable. I also added OrbitControls to allow the camera to look around.
Everything seems to be working smoothly, except when I attempt to connect the player mesh to an object in the physics world (for the player to repel/push stone blocks). To keep things simple, I tried linking the player mesh to a basic sphere shape. However, when I try updating the object's coordinates to follow the player mesh's movements, the player animates but doesn't move (I've commented out those lines in the update() function).
/**
* Issue: Preventing player from moving :(
**/
player.position.copy( playerMesh.root.position );
player.quaternion.copy( playerMesh.root.quaternion );
player.velocity.copy( new THREE.Vector3() );
There's also a "gyro" aspect in the md2 player mesh object that seems to adjust the light position to coordinate with the player's movement, but I'm not fully grasping how it works (the gyroscope component is a bit confusing, and I'm not sure if it's causing the issue).
You can find the code repository on GitHub
UPDATE: Issue resolved, check out the commit on GitHub :)