【专业web 3d、webGL、flash 3d程序开发：北京贝武易科技公司】
有疑问请联系我QQ:1539988257
贝武易-HTML5 3D技术联盟机构，提供研究、交流和培训机会，欢迎加入，地点：北京。
贝武易-HTML5 3D技术联盟群：49771294
本课程是学习通过键盘移动物体，效果如下图：
在上一个课程的基础上，我们掌握了在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;
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.
好了，到这里我们知道如何控制场景里的物体运动了！
下一课。
- 大小: 46 KB
- 大小: 60.1 KB
分享到：
相关推荐
WebGL的核心在于将JavaScript与OpenGL ES 2.0结合，使得Web开发者可以通过JavaScript代码在浏览器内部直接处理复杂的3D场景和模型。这种技术的优势在于，它消除了对像Flash这样的浏览器插件的依赖，减少了用户在访问...
即时通讯_分布式系统_WebSocket_Golang_Redis_MySQL_RabbitMQ_Gin_Logrus_Docker_微服务架构_高并发_消息队列_实时聊天_多节点
内容概要：本文详细介绍了如何使用STM32实现步进电机的精确运动控制，涵盖梯形加减速算法、绝对定位、相对定位和回原点功能。文章首先解释了绝对定位和相对定位的区别及其应用场景，接着深入探讨了梯形加减速算法的具体实现方法，包括动态选择梯形或三角形速度曲线以适应不同的运动距离。文中还提供了详细的回原点逻辑，确保电机能够安全可靠地返回起始位置。此外，文章讨论了运动控制状态机的设计，强调了定时器中断和服务函数的作用，以及如何通过DMA提高系统的稳定性和效率。最后，作者分享了一些实用的经验和注意事项，如定时器配置、加减速参数设置和硬件接口设计。 适合人群：对嵌入式系统和运动控制感兴趣的开发者，尤其是有一定STM32编程基础的技术人员。 使用场景及目标：适用于需要高精度步进电机控制的应用场合，如工业自动化设备、机器人等领域。主要目标是帮助读者掌握STM32在步进电机控制方面的核心技术，包括但不限于梯形加减速、定位控制和回原点等功能。 其他说明：文章不仅提供了理论讲解，还附有大量实际代码片段，便于读者理解和实践。同时，作者分享了许多实战经验和常见问题的解决方案，有助于读者避开潜在的陷阱并提高项目的成功率。
内容概要：本文深入探讨了西门子PLC 1200与G120变频器通过Modbus RTU通讯的实现方法，涵盖硬件连接、软件配置、变频器参数设置、PID自写FB块及其手动自动切换功能、触摸屏交互设计以及CAD电气的应用。具体介绍了Modbus RTU通讯的初始化配置、报文格式、PID控制算法的手动自动无扰切换、触摸屏参数映射和动态站号切换等功能。同时提供了详细的代码示例和调试建议，强调了参数设置、实数转换、PID抗饱和等注意事项。 适合人群：从事工业自动化领域的工程师和技术人员，特别是熟悉西门子产品并有一定PLC编程基础的人群。 使用场景及目标：适用于需要构建基于西门子PLC 1200和G120变频器的自动化控制系统的企业和个人开发者。主要目标是掌握Modbus RTU通讯协议的具体实现细节，理解PID控制算法的工作原理，并能够独立完成系统的集成和调试。 其他说明：文中不仅提供了理论知识，还包括大量实战经验和常见问题的解决方案，有助于提高读者的实际操作能力。此外，还涉及了CAD电气图纸的绘制，为项目的整体规划和后续维护提供了指导。
内容概要：本文详细介绍了COMSOL利用二阶偏微分方程（PDE）进行煤层气开采过程中压力场模拟的方法及其显著优势。传统方法通常采用达西定律简化为一阶方程，而COMSOL则通过自定义二阶PDE，将渗透率作为动态参数，并引入非线性的解吸过程和复杂的边界条件，从而更精确地模拟了煤层内的压力变化。文中展示了具体的MATLAB代码片段，解释了如何配置模型以及处理边界条件，强调了二阶PDE在捕捉压力场细节方面的优越性能。此外，文章还提到了一些实际案例，如瓦斯涌出量预测精度提高37.6%，裂隙区压力衰减速度误差控制在8%以内等。 适合人群：从事煤层气开采研究的专业人士、数值模拟工程师、地质力学专家。 使用场景及目标：适用于需要高精度模拟煤层气开采过程中复杂压力场变化的研究项目，旨在提升预测准确性，优化开采方案，减少事故风险。 其他说明：尽管二阶PDE提供了更高的精度，但也增加了模型复杂性和计算成本。因此，在具体应用时需权衡精度与效率之间的关系。同时，良好的网格划分对于获得稳定可靠的解决方案至关重要。
可再生能源_光伏发电_物联网大数据云计算_SpringBoot_Vue_ElementUI_Redis_Jwt_XXLJob_Netty_时序数据库_关系型数据库_智能监测_数据采
# 压缩文件中包含： 中文-英文对照文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
31 android 加载时闪烁点样式的启动画面
GDF103C8T6的PCB制版文件
内容概要：本文详细介绍了如何使用MATLAB构建一个自动化的裂缝检测系统。首先进行图像预处理，包括直方图均衡化、中值滤波去除噪声以及对比度增强。接着通过自适应二值化将图像转换为黑白图像，并采用形态学处理和边缘检测进一步优化图像质量。最后，利用regionprops函数提取裂缝的几何特征，如面积、长轴和短轴长度等，从而实现裂缝的自动检测和分类。文中强调了每个步骤的关键技术和参数选择，并提供了具体的MATLAB代码示例。 适合人群：从事图像处理、计算机视觉领域的研究人员和技术人员，尤其是对裂缝检测感兴趣的工程师。 使用场景及目标：适用于建筑、道路等基础设施的维护检查，能够快速准确地检测并评估裂缝情况，提高工作效率和准确性。 其他说明：作者分享了许多实践经验，指出了一些常见的陷阱和注意事项，帮助读者更好地理解和应用这些技术。同时，文中提到该系统的识别率可达89%，并且可以根据不同应用场景调整参数以满足特定需求。
内容概要：本文详细介绍了如何利用蚁狮优化算法（ALO）和核极限学习机（KELM）在MATLAB环境下进行电厂运行数据的回归预测。首先，文章解释了ALO算法的工作原理，它通过模拟蚁狮捕猎行为来优化KELM的超参数，从而提高预测准确性。接着，阐述了数据预处理步骤，包括从Excel文件读取数据、归一化处理以及特征选择。然后，深入探讨了KELM的核函数选择和训练过程，并提供了具体的MATLAB代码片段用于实现整个流程。最后，展示了该方法在实际案例中的表现，特别是在某330MW机组上的应用，证明了其优越性。 适合人群：具有一定MATLAB编程基础并对机器学习感兴趣的工程师和技术人员。 使用场景及目标：适用于电力行业或其他涉及复杂非线性系统的领域，旨在解决多参数耦合强的问题，提供高效准确的预测解决方案。 其他说明：文中提到的一些技巧如数据清洗、参数调整等对于获得更好的预测效果至关重要。此外，作者还分享了一些实用的经验教训，帮助读者避开常见错误并优化模型性能。
无人机航测_大疆航线规划_KMZ文件生成与解析_基于JavaXStream注解的DJIPilot2兼容航线文件处理工具_支持航点飞行建图航拍等多种任务模板_包含航线高度速度航向角失
内容概要：本文深入探讨了4x4码垛机械手的组态设计，涵盖从基础的坐标系转换、路径规划到高级的异常处理等多个方面。首先介绍了关键坐标系转换，确保机械手能够精确地定位物料。接着详细讲解了路径规划，尤其是贝塞尔曲线的应用，使机械臂可以平滑移动并避开障碍物。此外，还讨论了夹爪控制、动态压力调整以及状态保存机制等重要环节。文中强调了调试过程中的注意事项，如坐标系校准、伺服电机反向间隙补偿等，并提供了具体的代码示例。最后指出，成功的组态设计不仅需要扎实的编程技能，还需要对机械结构有深刻的理解。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是对码垛机械手感兴趣的研发人员。 使用场景及目标：适用于希望深入了解码垛机械手工作原理及其组态设计的人群。主要目标是帮助读者掌握4x4码垛机械手的设计要点，提高实际项目中的开发效率和成功率。 其他说明：文章通过大量实例和代码片段展示了各个知识点的实际应用场景，有助于读者更好地理解和吸收相关概念。同时提醒读者在进行组态设计时要考虑多种因素的影响，如物理特性和机械结构等。
内容概要：本文详细介绍了如何利用 Carsim 和 Simulink 实现弯道场景下的车辆变道仿真。首先，通过路径规划算法生成符合车辆动力学特性的期望路径，接着采用 MPC（模型预测控制）算法确保车辆能够精确跟踪这条路径。文中不仅展示了具体的数学模型和 MATLAB/Simulink 代码片段，还讨论了联合仿真的配置要点和常见问题解决方案。最终，通过可视化工具展示规划路径与实际行驶路径的对比，帮助研究人员更好地分析和验证仿真结果。 适合人群：从事自动驾驶、智能交通系统研究的技术人员，尤其是对车辆控制算法感兴趣的工程师。 使用场景及目标：适用于需要进行车辆变道仿真测试的研究机构或企业，旨在提升车辆在复杂路况下的自主驾驶能力。具体目标包括：①掌握路径规划算法的设计与实现；②理解MPC在轨迹跟踪中的应用；③熟悉 Carsim 和 Simulink 的联合仿真环境配置。 其他说明：文章提供了丰富的代码示例和技术细节，有助于读者深入理解每一步骤的具体实现方式。此外，作者还分享了一些实践经验，如参数调优技巧和常见的仿真陷阱规避方法。
在原来的版本增加论坛聊天等功能，修复软件区显示问题，优化部分功能。
内容概要：本文详细介绍了永磁同步电机（PMSM）三矢量模型预测转矩控制的Matlab仿真方法。首先解释了为何降低转矩脉动和定子电流谐波对于提高电机性能至关重要。接着，文章逐步解析了坐标变换、预测模型和优化算法等关键模块的具体实现方式，展示了如何通过三矢量控制策略显著改善电机性能。文中还讨论了一些实用的技术细节，如矢量选择、时间分配以及代价函数设计，并通过仿真结果验证了该方法的有效性。 适合人群：从事电机控制系统设计的研究人员、工程师及高校相关专业师生。 使用场景及目标：适用于希望深入了解PMSM先进控制策略的研发团队，旨在提升电机控制系统的稳定性、效率和平顺性，减少转矩脉动和电流谐波，从而延长设备使用寿命并提高能源利用效率。 其他说明：文章不仅提供了详细的理论推导和代码示例，还分享了许多实践经验，有助于读者快速掌握这一复杂但高效的控制技术。此外，文中提到的部分模块还可以灵活应用于其他类型的预测控制中。
# 压缩文件中包含： 中文文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
内容概要：本文介绍了基于C#编写的工业互联网云服务器框架，该框架集成了Web API服务和MQTT服务器，充分利用了C#的IOCP高性能高并发优势。框架不仅提供了丰富的功能，如数据库支持、WEB API服务、多种协议支持、MVC服务、设备轮询机制、API接口功能等，还具备良好的扩展性和易用性。文中展示了具体的代码示例，解释了框架的核心技术和实现细节，并介绍了框架的升级内容及其应用场景。 适合人群：具备一定编程基础，尤其是熟悉C#和ASP.NET Core的开发人员，以及从事工业互联网项目的工程师。 使用场景及目标：适用于需要构建高效、稳定的工业互联网云服务器的应用场景，帮助开发者快速搭建工业设备的数字化管理和远程控制系统，提高系统的并发处理能力和响应速度。 其他说明：框架提供了详细的使用说明和技术支持，确保开发者能够顺利地进行开发和部署。尽管某些底层源码未公开，但开放的事件接口和灵活的配置选项仍然允许开发者进行深度定制。
内容概要：本文介绍了一个基于 .NET 6 和 WPF 开发的自用工具，该工具结合了 ReactiveUI 和 OpenCVSharp 技术，旨在提供一个集图像处理、3D 点云数据展示和深度学习目标识别于一体的综合平台。文中详细讲解了如何使用 ReactiveUI 实现响应式编程，通过 OpenCVSharp 进行图像处理和目标检测，并展示了如何利用 Helix Toolkit 显示 3D 点云数据。此外，作者分享了许多实际编码技巧和遇到的问题及其解决方案，如处理内存泄漏、优化 UI 更新等。 适合人群：对 .NET 6、WPF、ReactiveUI、OpenCVSharp 和 3D 数据处理感兴趣的开发者和技术爱好者。 使用场景及目标：① 探索和学习 ReactiveUI 在 WPF 中的应用；② 实现高效的图像处理和调试；③ 展示和处理 3D 点云数据；④ 集成深度学习模型进行目标识别。 其他说明：该项目不仅是一个技术实验，也是一个实用工具，能够帮助开发者更好地理解和掌握多种技术的融合应用。
# 压缩文件中包含： 中文-英文对照文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；