jThree.jsのgomlを使用せず、`THREE.MMD.VMD`を使用してアニメーションさせたい
下記のコードのようにTHREE.SCENE
インスタンスに、THREE.MMD.PMX
インスタンスからメッシュを生成して追加したところ表示はできたのですが、THREE.MMD.VMD
インスタンスを使用してアニメーションさせる手順が分かりません。
goml
の<mmd model="foo.pmx" motion="bar.vmd" onLoad="parent.jThree.MMD.play(true);"/>
と同等の処理を、プログラマティックに行う方法はありますか?
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdn.rawgit.com/59naga/j3/3acd7a85f179a3ab02bae3c563e00ca90801b3b6/lib/jThree.js"></script>
<script src="https://cdn.rawgit.com/59naga/j3/3acd7a85f179a3ab02bae3c563e00ca90801b3b6/lib/jThree.Stats.js"></script>
<script src="https://cdn.rawgit.com/59naga/j3/3acd7a85f179a3ab02bae3c563e00ca90801b3b6/lib/jThree.MMD.js"></script>
<script src="https://cdn.rawgit.com/59naga/j3/3acd7a85f179a3ab02bae3c563e00ca90801b3b6/lib/jThree.Trackball.js"></script>
<script src="http://coffeescript.org/extras/coffee-script.js"></script>
<script type="text/coffeescript">
# Private
camera= null
renderer= null
trackball= null
resize= ->
camera= new THREE.PerspectiveCamera 45, innerWidth / innerHeight, 1, 1000
camera.position.set 0, 20, 70
renderer.setSize innerWidth,innerHeight
trackball= new THREE.TrackballControls camera
# Main
window.addEventListener 'resize',->
return unless renderer
resize()
# document.addEventListener 'DOMContentLoaded',->
requestAnimationFrame ->
scene= new THREE.Scene
directionalLight= new THREE.DirectionalLight '#ffffff', 1
directionalLight.position.set 0, 7, 10
scene.add directionalLight
geometry= new THREE.CubeGeometry 50, 1, 50
material= new THREE.MeshLambertMaterial {color:'#999999'}
cube= new THREE.Mesh geometry, material
cube.position.set 0, -.5, 0
scene.add cube
pmx= new THREE.MMD.PMX
pmx.load 'https://cdn.rawgit.com/59naga/j3/3acd7a85f179a3ab02bae3c563e00ca90801b3b6/example/miku/index.pmx',(pmx)->
pmx.createMesh {},(mesh)->
scene.add mesh
vmd= new THREE.MMD.VMD
vmd.load 'https://cdn.rawgit.com/59naga/j3/3acd7a85f179a3ab02bae3c563e00ca90801b3b6/example/miku/im5066365.vmd',(vmd)->
cAnimation= vmd.generateCameraAnimation
lAnimation= vmd.generateLightAnimation
mAnimation= vmd.generateMorphAnimation pmx
sAnimation= vmd.generateSkinAnimation pmx
# do staff?
requestAnimationFrame -> render()
render= ->
trackball.update() if trackball
renderer.render scene,camera
requestAnimationFrame render
renderer=
if window.WebGLRenderingContext
new THREE.WebGLRenderer
else
new THREE.CanvasRenderer
resize()
document.body.appendChild renderer.domElement
</script>
<style>
body {
margin: 0;
background-color: #abc;
}
</style>