概要
paiza.ioでelixirやってみた。
練習問題、やってみた。
練習問題
VRMビュアーを作成せよ。
写真
サンプルコード
defmodule Main do
def load(url) do
IO.puts """
<!doctype html>
<html>
<head>
<script src="https://unpkg.com/three@0.127.0/build/three.js"></script>
<script src="https://unpkg.com/three@0.127.0/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://unpkg.com/three@0.127.0/examples/js/controls/OrbitControls.js"></script>
<script src="https://unpkg.com/three@0.127.0/examples/js/loaders/BVHLoader.js"></script>
<script src="https://www.unpkg.com/@pixiv/three-vrm@0.3.6/lib/three-vrm.js"></script>
</head>
<body>
<script>
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 renderer = new THREE.WebGLRenderer()
renderer.setSize(500, 400)
document.body.appendChild(renderer.domElement)
const directionalLight = new THREE.DirectionalLight('#ffffff', 1)
directionalLight.position.set(1, 1, 1)
scene.add(directionalLight)
"""
IO.puts "const url = '#{url}';"
IO.puts """
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()
</script>
</body>
</html>
"""
end
end
Main.load("https://drumath2237.github.io/three-vrm-test/models/undefined-chan-toon.vrm")
成果物
以上。