here is a demo
i have recently started using three.js (i am familiar with OpenGL and C++ so doing this in javascript is not a huge learning curve) i have looked through a lot of the three.js examples to understand how to set things up and i saw this video [xttp://www.youtube.com/watch?v=1ENVYLp_NgY] explaining how to include cannon.js and i wanted to experiment with that also :)
my goal is to have a 3D world with shadows and physics with an animated player that can interact with the other objects. I chose this example [xttp://threejs.org/examples/webgl_morphtargets_md2_control.html] as a starting point because it already had the animated player mesh and the player controls were also about right, i added OrbitControls to the camera so that it can look around.
everything seems to work well except whenever i try to link the player mesh to any kind of object that exists in the physics world (so that he can repel / push the stone blocks), i wanted to start simple to avoid any confusion because of the player mesh being a compound object (imported md2), so i just use a basic sphere shape, but if i try to update the coordinates of the object in the physics world so that it will follow whenever the player mesh moves, the player mesh animates but does not move (so i uncommented those lines in the update() function).
/**
* Problem: This prevents player from moving :(
**/
player.position.copy( playerMesh.root.position );
player.quaternion.copy( playerMesh.root.quaternion );
player.velocity.copy( new THREE.Vector3() );
there is also something called a "gyro" involved in the md2 player mesh object which seems to move the light position so that it coordinates with player movement but i'm not sure how that happens (the gyroscope part is not something i understand but i'm not sure if thats part of the problem either).
the code repo is hosted on github
UPDATE: Fixed, please see the commit on github :)