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

3D引擎CopperLicht

阅读更多

WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。
WebGL标准已出现在Mozilla Firefox、Apple Safari及开发者预览版Google Chrome等浏览器中,这项技术支持Web开发人员借助系统显示芯片在浏览器中展示各种3D模型和场景,未来有望推出3D网页游戏及复杂3D结构的网站页面。




Copperlicht是一个新的WebGL 3D引擎,特性如下:

1、一个名为CopperCube的3D World编辑器;
2、支持很多3D格式: .3ds, .obj, .x, .lwo, .b3d, .csm, .dae, .dmf, .oct, .irrmesh, .ms3d, .my3D, .mesh, .lmts, .bsp, .md2, .stl. 等…;
3、速度难以置信的快:Copperlicht进行了高度的优化;
4、使用简单:有很多教学和一些实例文档;
5、二进制编译:不像其他的WebGL 3D引擎,它可以将3D meshe编译成一个小巧的二进制文件,能够快速的下载使用;

下面我们就进入CopperLicht 的第一课:Hello World
CopperLicht是一个新的基于javascript的WebGL 3D引擎。
要实现的场景如下图:






第一步,我们需要做一下准备工作:
1、一个脚本编辑器,用来编辑HTML和JavaScript,例如Notepad++;
2、CopperLicht SDK开发包;
3、三维场景编辑器:CopperCube现在是2.2.1版),可以到官方去下载试用版。

生成三维场景

这里我们用三维场景编辑器:CopperCube来生成场景,打开CopperCube,生成一个小的三维场景,我们可以用一个全景天空图,同时生成一些箱体或球体,生成场景如下:






发布你的场景

为了在CopperLicht中显示该场景,我们需要把场景输出为一个.ccbjs文件,CopperCube自己保存的文件为(.ccb) 格式的,但是要在CopperLicht中使用,我们必须输出(.ccbjs)格式文件。
在CopperCube中保存场景,然后发布为WebGL格式,操作如下:Tools -> Test as JavaScript/WebGL ,这时我们可以看到我们在浏览器中作为WebGL格式看到了我们的场景,在这个过程中,CopperCube做了这些工作:启动了CopperLicht,导入并显示.ccbjs文件,这个过程中在你保存.ccb文件的文件夹,你会看到多出一个子目录文件夹(copperlichtdata),里面带有.ccbjs文件和材质。





1、保存Coppercube文件;
2、发布场景WebGL: Choose Tools -> Test as JavaScript/WebGL ;
我们会看到场景自动就执行了,我们可以看到浏览器上显示了我们的场景,提示:请用谷歌浏览器 Canary 版,并设为系统默认浏览器。

编写CopperLicht 代码

当我们在CopperCube中以CopperLicht/WebGL的形式发布完项目后,我们需要用CopperLicht这个三维引擎来编写代码了。CopperCube发布项目的时候,生成了一个.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>

 

    <canvas id="3darea" width="640" height="480" style="background-color:#000000">
      </canvas>
   


    <script type="text/javascript">
    <!--
         startCopperLichtFromFile('3darea', 'copperlichtdata/coppercube.ccbjs');
    -->
    </script>
</body>
</html>
我们注意到这里面的startCopperLichtFromFile,从这里我们的三维引擎可以生成并导入.ccbj文件。

我们可以用下面的代码:
var engine = startCopperCubeFromFile('3darea', 'copperlichtdata/yourfile.ccbj')
// TODO: do something with the engine
复制代码




engine对象是CopperLicht类的实体,通过它你可以操作其中的三维场景,下面我们会进步一边详细讲解。

copperLicht.js这个就是引擎的类文件,你可以下载用最新版。

 

  • 大小: 20.5 KB
  • 大小: 39.4 KB
  • 大小: 57.4 KB
  • 大小: 191.8 KB
分享到:
评论

相关推荐

    WebGL技术初步评估

    WebGL的普及也得益于中间件生态系统的成熟,开发者可以使用如C3DL、CopperLicht、Three.js等工具库,简化开发流程,提高开发效率。这些工具库提供了丰富的功能,帮助开发者快速构建复杂的3D场景和应用。 然而,...

    PHP语言基础知识详解及常见功能应用.docx

    本文详细介绍了PHP的基本语法、变量类型、运算符号以及文件上传和发邮件功能的实现方法,适合初学者了解和掌握PHP的基础知识。

    公司金融课程期末考试题目

    公司金融整理的word文档

    适用于 Python 应用程序的 Prometheus 检测库.zip

    Prometheus Python客户端Prometheus的官方 Python 客户端。安装pip install prometheus-client这个包可以在PyPI上找到。文档文档可在https://prometheus.github.io/client_python上找到。链接发布发布页面显示项目的历史记录并充当变更日志。吡啶甲酸

    DFC力控系统维护及使用

    DFC力控系统维护及使用

    Spring Data的书籍项目,含多数据库相关内容.zip

    1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。

    2019-2023GESP,CSP,NOIP真题.zip

    2019-2023GESP,CSP,NOIP真题.zip

    基于 Gin + Element 实现的春联生成平台

    博文链接 https://blog.csdn.net/weixin_47560078/article/details/127712877?spm=1001.2014.3001.5502

    zetero7实测可用插件

    包含: 1、jasminum茉莉花 2、zotero-style 3、greenfrog 4、zotero-reference 5、translate-for-zotero 用法参考:https://zhuanlan.zhihu.com/p/674602898

    简单的 WSN 动画制作器 matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手

    毕业设计&课设_仿知乎社区问答类 App 项目:吉林大学毕业设计,含代码、截图及相关说明.zip

    1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。

    python技巧学习.zip

    python技巧学习.zip

    2023 年“泰迪杯”数据分析技能赛 A 题 档案数字化加工流程数据分析

    2023 年“泰迪杯”数据分析技能赛 A 题 档案数字化加工流程数据分析 完整代码

    life-expectancy-table.json

    echarts 折线图数据源文件

    此扩展现在由 Microsoft fork 维护 .zip

    Visual Studio Code 的 Python 扩展Visual Studio Code 扩展对Python 语言提供了丰富的支持(针对所有积极支持的 Python 版本),为扩展提供了访问点,以无缝集成并提供对 IntelliSense(Pylance)、调试(Python 调试器)、格式化、linting、代码导航、重构、变量资源管理器、测试资源管理器等的支持!支持vscode.devPython 扩展在vscode.dev (包括github.dev )上运行时确实提供了一些支持。这包括编辑器中打开文件的部分 IntelliSense。已安装的扩展Python 扩展将默认自动安装以下扩展,以在 VS Code 中提供最佳的 Python 开发体验Pylance - 提供高性能 Python 语言支持Python 调试器- 使用 debugpy 提供无缝调试体验这些扩展是可选依赖项,这意味着如果无法安装,Python 扩展仍将保持完全功能。可以禁用或卸载这些扩展中的任何一个或全部,但会牺牲一些功能。通过市场安装的扩展受市场使用条款的约束。可

    Centos6.x通过RPM包升级OpenSSH9.7最新版 升级有风险,前务必做好快照,以免升级后出现异常影响业务

    Centos6.x通过RPM包升级OpenSSH9.7最新版 升级有风险,前务必做好快照,以免升级后出现异常影响业务

    5 总体设计.pptx

    5 总体设计.pptx

    用于执行 RPA 的 Python 包.zip

    Python 版 RPAv1.50  • 使用案例•  API  参考 • 关于 和制作人员 • 试用云 •  PyCon 视频 •  Telegram 聊天 • 中文 •  हिन्दी  • 西班牙语 • 法语 •  বাংলা  •  Русский  • 葡萄牙语 • 印尼语 • 德语 • 更多..要为 RPA(机器人流程自动化)安装此 Python 包 -pip install rpa要在 Jupyter 笔记本、Python 脚本或交互式 shell 中使用它 -import rpa as r有关操作系统和可选可视化自动化模式的说明 -️‍ Windows -如果视觉自动化有故障,请尝试将显示缩放级别设置为推荐的 % 或 100% macOS -由于安全性更加严格,请手动安装 PHP并查看PhantomJS和Java 弹出窗口的解决方案 Linux -视觉自动化模式需要在 Linux 上进行特殊设置,请参阅如何安装 OpenCV 和 Tesseract Raspberry Pi - 使用此设置指南在 Raspberry Pies(低成本自

    原生js识别手机端或电脑端访问代码.zip

    原生js识别手机端或电脑端访问代码.zip

    极速浏览器(超快速运行)

    浏览器

Global site tag (gtag.js) - Google Analytics