概述

阅读本文档,您可以了解如何使用BabylonJS运行库。该运行库使用JavaScript语言。我们将通过一个示例来说明如何加载导出的JSON文件并在场景中进行播放。

获取运行库

您可以直接从Creature游戏运行库窗口下载运行库,或点击 这里从版本库获取运行库。

应含脚本

以下是需要包含的脚本:

<script src="http://www.babylonjs.com/babylon.js"></script>
<script src="http://www.babylonjs.com/hand.minified-1.2.js"></script>
<script src="https://raw.githubusercontent.com/toji/gl-matrix/master/dist/gl-matrix.js"></script>
<script src="CreatureMeshBone.js"></script>
<script src="CreatureRenderer.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") {
       // 需要使用匿名回调函数,因为.open不会返回值,而只是在异步模式下返回未定义
       var response = xobj.responseText;
      // 将JSON字符串解析成对象
		var actual_JSON = JSON.parse(response);
		
		...

上述操作将从磁盘加载JSON数据并进入内存。然后,创建可以使用这些加载的资源的实际对象:

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

在上述示例中,JSON文件有2个动画剪辑:默认剪辑和第二剪辑。因此,您需要从Creature管理器对象创建2个动画,使它们可以播放。

已完成加载,可以将活动动画设置为默认,并设置一些播放属性,以用于播放:

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

现在继续创建对象来渲染角色动画:

		// 现在,调用刚刚创建的createScene函数
		var data = createScene(canvas, engine);
		// 创建Creature渲染器
		var new_creature_renderer = new CreatureRenderer("CreatureRenderer",
											 data.scene, new_manager, 
											 data.creature_texture);

你可能注意到我们调用了一个**createScene()**函数。它的作用如下:

var createScene = function (canvas, engine) {

    // 现在创建一个基本的Babylon Scene对象 
    var scene = new BABYLON.Scene(engine);

    // 这将创建并定位一个免费摄像机
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 0, -30), scene);

    // 将摄像机定位到场景原点
    camera.setTarget(new BABYLON.Vector3.Zero());

    // 将摄影机连接到画布
    camera.attachControl(canvas, false);

    // 创造一个光,瞄准0,1,0 - 到天空。
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

    // 将光略微调暗
    light.intensity = 0;

	// creature
	var creature_texture = new BABYLON.StandardMaterial("creatureTexture", scene);
	creature_texture.diffuseTexture = new BABYLON.Texture("character-dragon.png", scene);
	creature_texture.diffuseTexture.hasAlpha = true;
	creature_texture.emissiveTexture = new BABYLON.Texture("character-dragon.png", scene);
	creature_texture.backFaceCulling = false;
	// 离开此函数
   return {"scene":scene, "creature_texture":creature_texture};
};  // createScene函数结束

您也可以通过修改该函数改变阴影方式。

角色动画和渲染更新

加载角色后,您需要调用相应的更新调用来更新动画并渲染角色。您可以在**engine.runRenderLoop()**回调中完成该操作:

// 注册一个渲染循环来重复渲染场景
engine.runRenderLoop(function () {
	new_manager.Update(0.05); // Update the animation by a delta time of 0.05
	new_creature_renderer.UpdateData();				
	data.scene.render();
});

完整代码示例

以下为完整的代码布局。大多数代码是从默认的BabylonJS项目启动器模板生成的。

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

  		#renderCanvas {
    		width: 100%;
    		height: 100%;
    		touch-action: none;
  		}
	  </style>

   </head>
   
<body>

<h1>My First Web Page</h1>

<p>My first paragraph.</p>

<canvas id="renderCanvas"></canvas>

<script src="http://www.babylonjs.com/babylon.js"></script>
<script src="http://www.babylonjs.com/hand.minified-1.2.js"></script>
<script src="https://raw.githubusercontent.com/toji/gl-matrix/master/dist/gl-matrix.js"></script>
<script src="CreatureMeshBone.js"></script>
<script src="CreatureRenderer.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;
           // 将JSON字符串解析成对象
			var actual_JSON = JSON.parse(response);
			//document.write("Loaded JSON file: ");
			
			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);
			new_manager.SetActiveAnimationName("default", false);
			new_manager.SetShouldLoop(true);
			new_manager.SetIsPlaying(true);
			new_manager.RunAtTime(0);
			
  			// 从上面的HTML中获取画布元素
  			var canvas = document.getElementById("renderCanvas");

  			// 加载BABYLON 3D引擎
  			var engine = new BABYLON.Engine(canvas, true);
  			
  			
  			// 现在,调用刚刚创建的createScene函数
  			var data = createScene(canvas, engine);
  			
  			// 创建Creature渲染器
  			var new_creature_renderer = new CreatureRenderer("CreatureRenderer",
  															 data.scene, new_manager, 
  															 data.creature_texture);

			// 注册一个渲染循环来重复渲染场景
  			engine.runRenderLoop(function () {
			    new_manager.Update(0.05);
				new_creature_renderer.UpdateData();

				//new_creature_renderer.renderMesh.scaling = new BABYLON.Vector3(-1, 1, 1);
				
    			data.scene.render();
  			});
  			
  			// 观看浏览器/画布调整事件大小
  			window.addEventListener("resize", function () {
    			engine.resize();
  			});
          }
    };
    xobj.send(null);  
 
 
  // 开始创建一个函数,我们将在它被构建之后“调用”
  var createScene = function (canvas, engine) {

    // 现在创建一个基本的Babylon Scene对象 
    var scene = new BABYLON.Scene(engine);

    // 将创建并定位一个自由式像机
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 0, -30), scene);

    // 将摄像机定位到场景原点
    camera.setTarget(new BABYLON.Vector3.Zero());

    // 将摄影机连接到画布
    camera.attachControl(canvas, false);

    // 创造一个光,瞄准0,1,0 - 到天空。
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

    // 将光略微调暗
    light.intensity = 0;

	// creature
	var creature_texture = new BABYLON.StandardMaterial("creatureTexture", scene);
	creature_texture.diffuseTexture = new BABYLON.Texture("character-dragon.png", scene);
	creature_texture.diffuseTexture.hasAlpha = true;
	creature_texture.emissiveTexture = new BABYLON.Texture("character-dragon.png", scene);
	creature_texture.backFaceCulling = false;
	
    // 离开此函数
    return {"scene":scene, "creature_texture":creature_texture};

  };  // createScene函数结束
</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到1