概要
paiza.ioでelixirやってみた。
練習問題、やってみた。
練習問題
BVHプレーヤーを作成せよ。
写真
サンプルコード
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 clock = new THREE.Clock();
let camera,
controls,
scene,
renderer,
mixer,
skeletonHelper;
"""
IO.puts "const url = '#{url}';"
IO.puts """
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();
});
function init() {
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 200, 300);
scene = new THREE.Scene();
scene.background = new THREE.Color(0xeeeeee);
scene.add(new THREE.GridHelper(400, 10));
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.minDistance = 300;
controls.maxDistance = 700;
}
function tick() {
requestAnimationFrame(tick);
const delta = clock.getDelta();
if (mixer)
mixer.update(delta);
renderer.render(scene, camera);
}
init();
tick();
</script>
</body>
</html>
"""
end
end
Main.load("https://cdn.rawgit.com/perfume-dev/example-max/3f383158/example-bvh/A_test.bvh")
成果物
以上。