17205


下記のコードのように`THREE.SCENE`インスタンスに、`THREE.MMD.PMX`インスタンスからメッシュを生成して追加したところ表示はできたのですが、`THREE.MMD.VMD`インスタンスを使用してアニメーションさせる手順が分かりません。

`goml`の`<mmd model="foo.pmx" motion="bar.vmd"
onLoad="parent.jThree.MMD.play(true);"/>`と同等の処理を、プログラマティックに行う方法はありますか？

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-10-02T17:44:41.267
17201
2015-10-03T01:56:30.160
9834
question
coffeescript three.js
jThree.jsのgomlを使用せず、`THREE.MMD.VMD`を使用してアニメーションさせたい


静止して立ったままのポーズで分かりにくいですが、まばたきや動きのある.vmdを使用しても動作するようなコードが用意できたので、自己解決とさせて頂きます。

> 参考：[jThree.MMD.js…`<goml>`を使用せずアニメーションさせたい · Issue #2 ·
> j3-jp/jThree](https://github.com/j3-jp/jThree/issues/2)
[code]

    <style>
      body {
        margin: 0;
        background-color: #abc;
      }
    </style>
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="https://cdn.rawgit.com/59naga/j3/e19f703b64e1f088aa8be484e75ded9a698489e3/lib/jThree.js"></script>
    <script src="https://cdn.rawgit.com/59naga/j3/e19f703b64e1f088aa8be484e75ded9a698489e3/lib/jThree.Stats.js"></script>
    <script src="https://cdn.rawgit.com/59naga/j3/e19f703b64e1f088aa8be484e75ded9a698489e3/lib/jThree.MMD.js"></script>
    <script src="https://cdn.rawgit.com/59naga/j3/e19f703b64e1f088aa8be484e75ded9a698489e3/lib/jThree.Trackball.js"></script>
    <script src="https://cdn.rawgit.com/mrdoob/stats.js/6b5cba034e5a30941b01da3fa785da49338fa676/build/stats.min.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 ->
      stats= new Stats
      stats.domElement.style.position= 'absolute'
      stats.domElement.style.left= '0px'
      stats.domElement.style.top= '0px'
    
      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:'#999'}
      cube= new THREE.Mesh geometry, material
      cube.position.set 0, -.5, 0
      scene.add cube
    
      endless= yes
      pmx= new THREE.MMD.PMX
      pmx.load 'https://cdn.rawgit.com/59naga/j3/e19f703b64e1f088aa8be484e75ded9a698489e3/example/miku/index.pmx',(pmx)->
        pmx.createMesh {},(mesh)->
          vmd= new THREE.MMD.VMD
          vmd.load 'https://cdn.rawgit.com/59naga/j3/e19f703b64e1f088aa8be484e75ded9a698489e3/example/miku/im5066365.vmd',(vmd)->
          # vmd.load 'bower_components/j3/example/miku/im5066365.vmd',(vmd)->
            hasAd= pmx.bones.some (bone)-> bone.additionalTransform
            addTrans= new THREE.MMD.MMDAddTrans pmx, mesh if hasAd
    
            mAnimation= vmd.generateMorphAnimation pmx
            morph= new THREE.MMD.MMDMorph mesh, mAnimation if mAnimation
            morph.play endless if morph
    
            sAnimation= vmd.generateSkinAnimation pmx
            skin= new THREE.MMD.MMDSkin mesh, sAnimation if sAnimation
            skin.play endless if skin
    
            delta= 0
            if mesh.geometry.MMDIKs.length
              ik= new THREE.MMD.MMDIK mesh
              physi= new THREE.MMD.MMDPhysi mesh if window.Ammo
    
              renderer.renderPluginsPre.unshift
                render: ->
                  if window.Ammo
                    physi.preSimulate delta if physi
                    THREE.MMD.btWorld.stepSimulation delta
                    physi.postSimulate delta if physi
    
            scene.add mesh
    
            resetBone= ->
              bones= mesh.bones;
              for bone,i in mesh.geometry.bones
                mesh.bones[i].position.set　bone.pos[0], bone.pos[1], bone.pos[2]
                mesh.bones[i].quaternion.set bone.rotq[0], bone.rotq[1], bone.rotq[2], bone.rotq[3]
    
            clock= new THREE.Clock
            requestAnimationFrame -> render()
            render= ->
              delta= clock.getDelta()
              stats.begin()
    
              resetBone()
    
              morph.update delta if morph
              skin.update delta if skin
              ik.update delta if ik
              addTrans.update delta if addTrans
    
              trackball.update() if trackball
    
              renderer.render scene,camera
    
              stats.end()
              requestAnimationFrame render
    
      renderer=
        if window.WebGLRenderingContext
          new THREE.WebGLRenderer
        else
          new THREE.CanvasRenderer
    
      resize()
    
      document.body.appendChild renderer.domElement
      document.body.appendChild stats.domElement
    </script>
[/code]


CC BY-SA 3.0
2015-10-03T01:50:30.723
17205
2015-10-03T01:56:30.160
2015-10-03T01:56:30.160
9834
9834
17201
answer