概要

このドキュメントでは、ThreeJSランタイムの使用方法について説明します。ランタイムの言語はJavaScriptです。書き出したJSONファイルを読み込んでシーンで再生する方法の例を説明します。

ランタイムを取得する

ランタイムをCreatureのGame Runtimesウィンドウから直接ダウンロードするか、リポジトリ(こちら)から取得することができます。

含まれているスクリプト

含まれる必要があるスクリプトは次のとおりです:

<script src="http://threejs.org/build/three.min.js"></script>
<script src="https://raw.githubusercontent.com/toji/gl-matrix/master/dist/gl-matrix.js"></script>
<script src="CreatureMeshBone.js"></script>
<script src="CreatureThreeJSRenderer.js"></script>

読み込みと初期化

default.jsonと呼ばれる、エクスポートされたドラゴンのアニメーションファイルがあるとしましょう。character-dragon.pngと呼ばれる対応するテクスチャアトラスもあると仮定します。 最初にファイルアセットを読み込むことから始めます:

var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
xobj.open('GET', 'default.json', true); // Load the JSON file
	xobj.onreadystatechange = function () {
      if (xobj.readyState == 4 && xobj.status == "200") {
       // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
       var response = xobj.responseText;
      // Parse JSON string into object
		var actual_JSON = JSON.parse(response);
		
		...

上のコードはJSONデータをディスクからメモリに読み込みます。次に、これらの読み込まれたアセットを利用できる実際のオブジェクトを作成しましょう:

		var new_creature = new Creature(actual_JSON, false;
		
		var new_animation_1 = new CreatureAnimation(actual_JSON, "default", false);
		var new_animation_2 = new CreatureAnimation(actual_JSON, "second", false);
		
		var new_manager = new CreatureManager(new_creature);
		new_manager.AddAnimation(new_animation_1);
		new_manager.AddAnimation(new_animation_2);

上記の例では、JSONファイルに2つのアニメーションクリップがあります: defaultsecondです。このため、creature_managerオブジェクトから2つのアニメーションを作成して再生できるようにする必要があります。

読み込みが完了したら、アクティブなアニメーションをdefaultに設定して、再生といくつかの再生プロパティを設定することができます:

		new_manager.SetActiveAnimationName("default", false);
		new_manager.SetShouldLoop(true);
		new_manager.SetIsPlaying(true);
		new_manager.RunAtTime(0);

キャラクターアニメーションのレンダリングに必要なオブジェクトを作成します:

	var texture = new THREE.ImageUtils.loadTexture("character-dragon.png");
	var material = new THREE.MeshBasicMaterial({
        		map: texture,
        		transparent: true,
    			side:THREE.DoubleSide
  			});
  		
	// Create creature renderer
	new_creature_renderer = new 
		CreatureRenderer("CreatureRenderer",scene, new_manager, material);

キャラクターのアニメーションとレンダリングアップデート

キャラクターを読み込んだら、対応するアップデートコールを呼び出して、アニメーションを更新し、キャラクターをレンダリングする必要があります。これは、 animateScene() コールバックで行われます:

		var animateScene = function () {
		    new_manager.Update(0.05); // update animation by 0.05 delta time
			new_creature_renderer.UpdateData();

			requestAnimationFrame(animateScene);
			renderer.render(scene, camera);
		};

完全なコードサンプル

以下は完全なコードレイアウトです。ほとんどのコードは、デフォルトのThreeJSプロジェクトスターターテンプレートから生成されます:

<!DOCTYPE html>
	<html>
	
	<head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>Three.js - Basic scene</title>
      
      <style>
  		html, body {
    		overflow: hidden;
    		width: 100%;
    		height: 100%;
    		margin: 0;
    		padding: 0;
  		}

		canvas { width: 100%; height: 100% }
	  </style>

   </head>
   
<body>

<h1>My First Web Page</h1>

<p>My first paragraph.</p>

<script src="http://threejs.org/build/three.min.js"></script>
<script src="https://raw.githubusercontent.com/toji/gl-matrix/master/dist/gl-matrix.js"></script>
<script src="CreatureMeshBone.js"></script>
<script src="CreatureThreeJSRenderer.js"></script>

<script>

    var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
	xobj.open('GET', 'default.json', true); // Replace 'my_data' with the path to your file
	xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            var response = xobj.responseText;
              	// Parse JSON string into object
			var actual_JSON = JSON.parse(response);
			
			var scene;
			var camera;
			var renderer;
			var new_creature;
			var new_manager;
			var new_creature_renderer;
			
			
			function initScene() {
				// Create scene
			    scene = new THREE.Scene();

	    		// This creates and positions a free camera
	    		camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
				camera.position.z = -20;
				camera.lookAt(scene.position);
				scene.add(camera);
	
				// create renderer
				renderer = new THREE.WebGLRenderer();
				renderer.setSize(window.innerWidth, window.innerHeight );
				document.body.appendChild( renderer.domElement );
				
				new_creature = new Creature(actual_JSON);
			
				var new_animation_1 = new CreatureAnimation(actual_JSON, false);
				var new_animation_2 = new CreatureAnimation(actual_JSON, false);
			
				new_manager = new CreatureManager(new_creature);
				new_manager.AddAnimation(new_animation_1);
				new_manager.AddAnimation(new_animation_2);
				new_manager.SetActiveAnimationName("default", false);
				new_manager.SetShouldLoop(true);
				new_manager.SetIsPlaying(true);
				new_manager.RunAtTime(0);


			
				//var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
				var texture = new THREE.ImageUtils.loadTexture("character-dragon.png");
				var material = new THREE.MeshBasicMaterial({
	        		map: texture,
	        		transparent: true,
        			side:THREE.DoubleSide
      			});
      		
						
  				// Create creature renderer
				new_creature_renderer = new CreatureRenderer("CreatureRenderer",
  															 scene, new_manager, 
  															 material);	  				
  			}

			var animateScene = function () {
			    new_manager.Update(0.05);
				new_creature_renderer.UpdateData();

				requestAnimationFrame(animateScene);
				renderer.render(scene, camera);
			};

			initScene();
			animateScene();
						  			  			
          }
    };
    xobj.send(null);  
 
 
  </script>

</body>
</html> 

カスタム時間/フレーム範囲

現在アクティブなアニメーションのカスタム時間/フレーム範囲を設定できます。再生範囲を10〜20のフレーム範囲に制限したい場合は、次の操作を行います:

new_creature_manager.SetUseCustomTimeRane(true);
new_creature_manager.SetCustomTimeRange(10, 20);

アニメーションブレンディング

2つのアニメーションクリップをブレンドするには、次の手順を実行します:

curManager.SetBlending(true);	
curManager.SetBlendingAnimations("default", "pose2");
curManager.SetBlendingFactor(0.5);	 // 0 to 1 blends between the 2 clips