# vrm three
```elixir
Mix.install([
{:kino, "~> 0.10.0"}
])
```
## Section
```elixir
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")
```
```elixir
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"
)
```
```elixir
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
""")
```
