three.jsでanimation system その10

概要

three.jsでanimation systemを、理解したかった。
練習問題、やってみた。

練習問題

AnimationClipを自作せよ。

写真

サンプルコード

	var clock;
	var scene,
		camera,
		renderer,
		mixer;
	function init() {
    renderer = new THREE.WebGLRenderer({
			antialias: true
		});
		renderer.setPixelRatio(window.devicePixelRatio);
		renderer.setSize(window.innerWidth, window.innerHeight);
		document.body.appendChild(renderer.domElement);
		scene = new THREE.Scene();
		clock = new THREE.Clock();
		camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
		camera.position.set(50, 50, 100);
		camera.lookAt(scene.position);
		var axesHelper = new THREE.AxesHelper(10);
		//scene.add(axesHelper);
    scene.add(new THREE.GridHelper(60, 10));
   	scene.background = new THREE.Color(0xbfd1e5);
		var geometry = new THREE.BoxBufferGeometry(5, 5, 5);
		var material = new THREE.MeshBasicMaterial({
			color: 0xffffff,
			transparent: true
		});
		var mesh = new THREE.Mesh(geometry, material);
		scene.add(mesh);
		var positionKF = new THREE.VectorKeyframeTrack('.position', [0, 1, 2], [0, 0, 0, 30, 0, 0, 0, 0, 0]);
		var scaleKF = new THREE.VectorKeyframeTrack('.scale', [0, 1, 2], [1, 1, 1, 2, 2, 2, 1, 1, 1]);
		var xAxis = new THREE.Vector3(1, 0, 0);
		var qInitial = new THREE.Quaternion().setFromAxisAngle(xAxis, 0);
		var qFinal = new THREE.Quaternion().setFromAxisAngle(xAxis, Math.PI);
		var quaternionKF = new THREE.QuaternionKeyframeTrack('.quaternion', [0, 1, 2], [qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w]);
		var colorKF = new THREE.ColorKeyframeTrack('.material.color', [0, 1, 2], [1, 0, 0, 0, 1, 0, 0, 0, 1], THREE.InterpolateDiscrete);
		var opacityKF = new THREE.NumberKeyframeTrack('.material.opacity', [0, 1, 2], [1, 0, 1]);
		var clip = new THREE.AnimationClip('Action', 3, [scaleKF, positionKF, quaternionKF, colorKF, opacityKF]);
		mixer = new THREE.AnimationMixer(mesh);
		var clipAction = mixer.clipAction(clip);
		clipAction.play();		
		window.addEventListener('resize', onWindowResize, false);
	}
	function onWindowResize() {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize(window.innerWidth, window.innerHeight);
	}
	function animate() {
		requestAnimationFrame(animate);
		var delta = clock.getDelta();
		if (mixer)
		{
			mixer.update(delta);
		}
		renderer.render(scene, camera);
	}
	init();
	animate();

成果物

以上。