`
wjlgryx
  • 浏览: 310250 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

3D引擎CopperLicht（二）

JavaScriptHTMLUPF# 
阅读更多

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




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


编写CopperLicht代码

像上一节教材那样，输出一个.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)));
复制代码


键盘输入

这时本课程的最后部分，我们通过按键'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;
复制代码


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

 

  • 大小: 57.4 KB
  • 大小: 39.4 KB
分享到：
| 3D引擎CopperLicht
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics