wslでelixir その83

概要

wsl(wsl2じゃない)で、elixirやってみた。
練習問題、やってみた。

練習問題

livebookで、BVHプレーヤーを実装せよ。

写真

サンプルコード

defmodule KinoThree.BVH do
  use Kino.JS

  def new(url) do
    Kino.JS.new(__MODULE__, url)
  end

  asset "main.js" do
    """
    import "https://unpkg.com/three@0.127.0/build/three.js";
    import "https://unpkg.com/three@0.127.0/examples/js/loaders/GLTFLoader.js";
    import "https://unpkg.com/three@0.127.0/examples/js/loaders/BVHLoader.js";
    export function init(ctx, url) {
    	const canvas = document.createElement("canvas");
    	ctx.root.appendChild(canvas);
    	const renderer = new THREE.WebGLRenderer({
    		canvas: canvas
    	});
    	const width = 500;
    	const height = 400;
    	renderer.setSize(width, height);
    	const scene = new THREE.Scene();
    	const clock = new THREE.Clock();
        let camera, 
         mixer, 
         skeletonHelper;
        const loader = new THREE.BVHLoader();
        loader.load(url, function(result) {
         skeletonHelper = new THREE.SkeletonHelper(result.skeleton.bones[0]);
         skeletonHelper.skeleton = result.skeleton;
         const boneContainer = new THREE.Group();
         boneContainer.add(result.skeleton.bones[0]);
         scene.add(skeletonHelper);
         scene.add(boneContainer);
         mixer = new THREE.AnimationMixer(skeletonHelper);
         mixer.clipAction(result.clip).setEffectiveWeight(1.0).play();
        });
       camera = new THREE.PerspectiveCamera(60, 500 / 400, 1, 1000);
       camera.position.set(0, 100, 300);
       scene.background = new THREE.Color(0xeeeeee);
       scene.add(new THREE.GridHelper(400, 10));
        function tick() {
         requestAnimationFrame(tick);
         const delta = clock.getDelta();
         if (mixer) 
          mixer.update(delta);
         renderer.render(scene, camera);
        }
        tick();
    }
    """
  end
end

KinoThree.BVH.new(
  "https://cdn.rawgit.com/perfume-dev/example-max/3f383158/example-bvh/A_test.bvh"
)

以上。