ThreeJS运行库

概述

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

获取运行库

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

应含脚本

以下是需要包含的脚本:

<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") {
       // 需要使用匿名回调函数,因为.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", 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个动画剪辑:默认剪辑和第二剪辑。因此,您需要从Creature管理器对象创建2个动画,使它们可以播放。

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

        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
            });

    // 创建creature 渲染器
    new_creature_renderer = new 
        CreatureRenderer("CreatureRenderer",scene, new_manager, material);

角色动画和渲染更新

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

        var animateScene = function () {
            new_manager.Update(0.05); // 以0.05的时间增量更新动画
            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); // 将’my_data’替换为文件的路径
    xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            var response = xobj.responseText;
                // 将JSON字符串解析成对象
            var actual_JSON = JSON.parse(response);

            var scene;
            var camera;
            var renderer;
            var new_creature;
            var new_manager;
            var new_creature_renderer;


            function initScene() {
                // 创建场景
                scene = new THREE.Scene();

                // 将创建和定位一个免费摄像机
                camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
                camera.position.z = -20;
                camera.lookAt(scene.position);
                scene.add(camera);

                // 创建渲染器
                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
                });


                // 创建creature 渲染器
                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到1