wslでelixir その82

概要

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

練習問題

livebookで、VRMビュワーを実装せよ。

写真

サンプルコード

defmodule KinoThree.VRM 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/controls/OrbitControls.js";
      import "https://unpkg.com/three@0.127.0/examples/js/loaders/BVHLoader.js";
      import "https://www.unpkg.com/@pixiv/three-vrm@0.3.6/lib/three-vrm.js";
      export function init(ctx, url) {
    	const canvas = document.createElement("canvas");
    	ctx.root.appendChild(canvas);
    	const renderer = new THREE.WebGLRenderer({
    		canvas: canvas
    	});
    	const width = 320;
    	const height = 320;
    	renderer.setSize(width, height);
    	const scene = new THREE.Scene();
    	const camera = new THREE.PerspectiveCamera(35, 500 / 400, 0.1, 1000)
        camera.position.set(0, 1.2, -1.9)
        camera.rotation.set(0, Math.PI, 0)
        const directionalLight = new THREE.DirectionalLight('#ffffff', 1)
        directionalLight.position.set(1, 1, 1)
        scene.add(directionalLight)
        const loader = new THREE.GLTFLoader();
        loader.load(url, (gltf) => {
        THREE.VRM.from(gltf).then((vrm) => {
    	    scene.add(vrm.scene);
        });
       },
       (progress) => console.log('Loading model...', 100.0 * (progress.loaded / progress.total), '%'),
       (error) => console.error(error))
        function tick() {
         requestAnimationFrame(tick)
         renderer.render(scene, camera)
        }
        tick();
    }
    """
  end
end

KinoThree.VRM.new("https://drumath2237.github.io/three-vrm-test/models/undefined-chan-toon.vrm")

以上。