`
wjlgryx
  • 浏览: 298035 次
  • 性别: 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
评论
发表评论

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

相关推荐

    html5资源收集合集

    3D引擎CopperLicht（二） c3dl资源分享 openGL讲义 OpenGL入门教程 WebGL 和 3D 图形 WebGL广播站c3dl学习手册 WebGL规范1.0 webGL教程4：实现三维效果 开始学习c3dl(Canvas 3D JS Libary) 如何...

    麦肯锡 组织 概述与基本框架gl.ppt

    麦肯锡 组织 概述与基本框架gl.ppt

    node-v10.11.0-linux-s390x.tar.xz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

    大型强子对撞机电源转换器设计与运行挑战

    大型强子对撞机电源转换器设计与运行挑战

    (优作)低功耗STM32F411开发板（原理图+PCB源文件+官方例程+驱动等）

    本文档提供了一套完整的STM32F411低功耗开发板资源，包含详细的原理图、PCB设计源文件、官方提供的示例程序以及必要的驱动程序。这些资料对于嵌入式系统开发者来说是宝贵的学习资源，特别适合那些希望深入了解STM32F411微控制器及其应用的学生、工程师和电子爱好者。文档旨在帮助用户快速上手STM32F411的开发工作，无论是进行学术研究、产品原型设计还是个人项目实践，都能从中获益。 关键词标签： STM32F411 低功耗 开发板 资料下载

    基于机器学习的发债主体违约风险预测python源码+项目说明+设计报告+答辩PPT.zip

    该项目以发债企业作为研究对象，利用财务逻辑和技术手段对178个原始特征指标进行有效筛选，构建了基于多种机器学习算法的模型，对比后挑选LightGBM模型作为最终模型进行更精细化训练，最终模型关键预测指标均有比较好的效果。 使用说明 BondDefault文件为项目代码 基于机器学习的发债主体违约风险预测.pdf为pdf形式的项目文稿 基于机器学习的发债主体违约风险预测.pptx为ppt形式的项目展示 由于数据集太大，此处没有上传

    Rain Birdt Simple To Set Timer (SST) 使用说明书.pdf

    Rain Birdt Simple To Set Timer (SST) 使用说明书

    SITRANS LVL 200S, LVL 200E 振动式安全手册.pdf

    SITRANS LVL 200S, LVL 200E 振动式安全手册

    麦肯锡-xx电信市场分析报告gl.ppt

    麦肯锡-xx电信市场分析报告gl.ppt

    基于matlab实现的三次样条插值法 求信号的包络线 源代码.rar

    基于matlab实现的三次样条插值法 求信号的包络线 源代码.rar

    麦肯锡_xx大客户培训战略报告gl.ppt

    麦肯锡_xx大客户培训战略报告gl.ppt

    node-v9.0.0-linux-x64.tar.xz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

    node-v8.6.0-linux-s390x.tar.xz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

    嗨森无人机管理平台.zip

    无人机最强算法源码，易于部署和学习交流使用

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