vrm three

Mix.install([
  {:kino, "~> 0.10.0"}
])

Section

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")

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"
)

defmodule KinoThree.OBJ do
  use Kino.JS

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

  asset "main.js" do
    """
    import "https://unpkg.com/three@0.124.0/build/three.js"
    import "https://unpkg.com/three@0.124.0/examples/js/utils/SceneUtils.js"
    import "https://unpkg.com/three@0.124.0/examples/js/controls/OrbitControls.js"
    export function init(ctx, html) {
      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();
      let camera = new THREE.PerspectiveCamera(60, 500 / 400, 1, 1000);
      camera.position.set(0, 100, 300);
      scene.add(new THREE.AmbientLight(0xffffff));
      scene.background = new THREE.Color(0xeeeeee);
      scene.add(new THREE.GridHelper(400, 10));
      var controls = new THREE.OrbitControls(camera, canvas);
     var geometry = new THREE.Geometry();
     var norml = new THREE.Vector3(0, 0, 1);       
      var textArray = html.split('/');      
     for (var i = 0; i < textArray.length; i++)
     {
      var line = textArray[i];
      if (line.indexOf('p ') === 0)
      {
       var tmp = line.split(' ');
       geometry.vertices.push(new THREE.Vector3(tmp[1], tmp[2], tmp[3]));
      }
      else if (line.indexOf('s ') === 0)
      {
    			var tmp = line.split(' ');
       geometry.faces.push(new THREE.Face3(tmp[1] - 1, tmp[2] - 1, tmp[3] - 1, [norml, norml, norml]));
       geometry.faces.push(new THREE.Face3(tmp[1] - 1, tmp[3] - 1, tmp[4] - 1, [norml, norml, norml]));
      }
     }      
     geometry.computeFaceNormals();
     geometry.computeVertexNormals();
     var materials = [
      new THREE.MeshLambertMaterial({
       color: 0xffffff
      }),
      new THREE.MeshBasicMaterial({
       color: 0x3333ff, 
       wireframe: true,
       transparent: true
      })
     ];
     var mesh = new THREE.SceneUtils.createMultiMaterialObject(geometry, materials);
     mesh.position.z = -5;
      scene.add(mesh);
      function tick() {
        controls.update();
       renderer.render(scene, camera);
        requestAnimationFrame(tick);
      }
      tick();
    }
    """
  end
end

KinoThree.OBJ.new("""
p 0 0 0/p 100 0 0/p 0 100 0/p 100 100 0/p 0 0 100/p 100 0 100/p 0 100 100/p 100 100 100/s 1 3 4 2/s 1 5 7 3/s 2 4 8 6/s 1 2 6 5/s 3 7 8 4/s 5 6 8 7
""")