CopperLicht 入门（二）运动与键盘输入

最新推荐文章于 2021-11-15 11:50:20 发布

chinalofthjh

最新推荐文章于 2021-11-15 11:50:20 发布

阅读量195

点赞数

分类专栏： Html 5 3d 文章标签： HTML5 QQ UP JavaScript Flash ViewUI

本文链接：https://blog.csdn.net/chinalofthjh/article/details/83799974

版权

Html 5 3d 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

[b]【专业web 3d、webGL、flash 3d程序开发：北京贝武易科技公司】[/b]
有疑问请联系我QQ:1539988257
[b]贝武易-HTML5 3D技术联盟机构[/b]，提供研究、交流和培训机会，欢迎加入，地点：北京。
[b]贝武易-HTML5 3D技术联盟群[/b]：49771294

本课程是学习通过键盘移动物体，效果如下图：

[img]http://dl.iteye.com/upload/attachment/371874/216ed238-02c7-35a2-a3f2-03f0e93867b1.jpg[/img]

在上一个课程的基础上，我们掌握了在CopperCube里，如何建立基本的场景和物体。

在CopperCube中，建立一个平面、箱体、球体，保证箱体名为'cubeMesh1'，球体名为'sphereMesh1'，建立好的场景如下：

[img]http://dl.iteye.com/upload/attachment/371876/7a364dbf-7486-372b-99ca-12e1322de3b2.jpg[/img]

[b]编写CopperLicht代码[/b]

像上一节教材那样，输出一个.ccbjs文件到CopperLicht，保存Coppercube文件，发布场景为WebGL：Tools -> Test as JavaScript/WebGL，用网页编辑器打开新生成的.html文件，代码如下：

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <script type="text/javascript" src="copperlichtdata/copperlicht.js"></script>
</head>
<body>
  <div align="center">
    <canvas id="3darea" width="640" height="480" style="background-color:#000000">
      </canvas>
    </div>
    <script type="text/javascript">
    <!--
         startCopperLichtFromFile('3darea', 'copperlichtdata/tutorial-2.ccbjs');
    -->
    </script>
</body>
</html>

把原来的startCopperLichtFromFile部分代码替换为如下代码：

<script type="text/javascript">
  <!--
      var engine = startCopperLichtFromFile('3darea', 'copperlichtdata/tutorial-2.ccbjs');
      var cubeSceneNode = null;

      // this is called when loading the 3d scene has finished
      engine.OnLoadingComplete = function() 
      {          
        var scene = engine.getScene();
        if (scene)
        {
          // find the cube scene node
          cubeSceneNode = scene.getSceneNodeFromName('cubeMesh1');

          // also, force the 3d engine to update the scene every frame
          scene.setRedrawMode(CL3D.Scene.REDRAW_EVERY_FRAME);

          // additional, let the sphere constantly rotate
          var sphereSceneNode = scene.getSceneNodeFromName('sphereMesh1');
          if (sphereSceneNode)
            sphereSceneNode.addAnimator(new CL3D.AnimatorRotation(new CL3D.Vect3d(0, 1.6, 0.8)));
        }
      }

      document.onkeydown = function(event)
      {
        var key = String.fromCharCode(event.keyCode);

        // when pressed 'L', move the cube scene node a bit up
        if (key == 'F' && cubeSceneNode)
          cubeSceneNode.Pos.Y += 5;

        // when pressed 'G', move the cube scene node a bit down
        if (key == 'G' && cubeSceneNode)
          cubeSceneNode.Pos.Y -= 5;

        // we need to call the key handler of the 3d engine as well, so that the user is
        // able to move the camera using the keys
        engine.handleKeyDown(event);
      };
  -->
  </script>

好了，再一次执行代码，运行html文件，我们可以看到球开始旋转，按F 和G键，箱体运动，下面我们简单的解释一下代码的运行原理。

var engine = startCopperLichtFromFile('3darea', 'copperlichtdata/tutorial-2.ccbjs');

我们用'engine'变量保存了一个CopperLicht class（类）的一个实例，同时告诉CopperLicht用的文件是'copperlichtdata/tutorial-2.ccbjs'，CopperLicht会用html文档中名为'3darea'的画布<canvas>作为第一个参数，也就是后面的3d场景会转载到这个名为'3darea'的画布上。通过'engine' 这个实例，我们可以操作它其中的三维世界了。当CopperLicht导入场景完成后，我们需要CopperLicht给我们发一个信息，告诉我们它的三维场景导入完毕，于是，我们设定了一个导入完成事件：

// this is called when loading the 3d scene has finished
   engine.OnLoadingComplete = function() 
   {

获得engine里的三维场景节点，再通过这个节点，找到它的下级节点：'cubeMesh1' 和'sphereMesh1'。

var scene = engine.getScene();
if (scene)
{
  // find the cube scene node
  cubeSceneNode = scene.getSceneNodeFromName('cubeMesh1');

'cubemesh'被装载到了cubeMesh节点，我们通过节点就直接可以控制物体的行为，移动、转动等。
因为有动画，所以我们需要场景能每帧刷新。

  // also, force the 3d engine to update the scene every frame
scene.setRedrawMode(Scene.REDRAW_EVERY_FRAME);

我们目前还不需要调用CL3D.Scene.forceRedrawNextFrame() ，因为我们的场景变化不大。我们可以在CopperCube编辑器里的发布项里进行这些设置。

为了让球体不断的旋转，我们用到了CopperLicht的Animators特性，Animators类是一个控制场景节点物体进行基本操作的类，如移动、旋转、路径运动、动画材质等，本案例我们用到了一个AnimatorRotation（旋转动画），速度为(0, 1.6, 0.8) ，直接把它加给球体就可以。

 // additional, let the sphere constantly rotate
var sphereSceneNode = scene.getSceneNodeFromName('sphereMesh1');
if (sphereSceneNode)
  sphereSceneNode.addAnimator(new AnimatorRotation(new Vect3d(0, 1.6, 0.8)));

[b]键盘输入[/b]

这时本课程的最后部分，我们通过按键'F' 和 'G'来控制箱体的运动，我们设置一个程序来捕获键盘输入事件：

document.onkeydown = function(event)
{

需要注意的是，当CopperLicht引擎的实例生成出来后，它自动就生成了自己的一套键盘事件处理程序，为了有我们自己的一套键盘事件响应程序，我们需要把CopperLicht自动生成的那套响应程序删除，我们这样做：

// we need to call the key handler of the 3d engine as well, so that the user is
// able to move the camera using the keys
engine.handleKeyDown(event);

在这之前，我们通过按键来控制箱体的运动:

var key = String.fromCharCode(event.keyCode);

// when pressed 'L', move the cube scene node a bit up
if (key == 'F' && cubeSceneNode)
  cubeSceneNode.Pos.Y += 5;

// when pressed 'G', move the cube scene node a bit down
if (key == 'G' && cubeSceneNode)
  cubeSceneNode.Pos.Y -= 5;

This simply changes the position of the cubeSceneNode up or down. Note that if we hadn't changed the redraw mode to 'every frame' before using scene.setRedrawMode(CL3D.Scene.REDRAW_EVERY_FRAME);, we would have needed to call Scene.forceRedrawNextFrame() after this change, so that CopperLicht knows we want to redraw the frame because we manually changed the position of the cube.
Instead of changing the position using .Pos, you could also try out changing the rotation using .Rot or the scale of the scene node, using .Scale.

好了，到这里我们知道如何控制场景里的物体运动了！

下一课。