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的普及也得益于中间件生态系统的成熟,开发者可以使用如C3DL、CopperLicht、Three.js等工具库,简化开发流程,提高开发效率。这些工具库提供了丰富的功能,帮助开发者快速构建复杂的3D场景和应用。 然而,...
本文详细介绍了PHP的基本语法、变量类型、运算符号以及文件上传和发邮件功能的实现方法,适合初学者了解和掌握PHP的基础知识。
公司金融整理的word文档
Prometheus Python客户端Prometheus的官方 Python 客户端。安装pip install prometheus-client这个包可以在PyPI上找到。文档文档可在https://prometheus.github.io/client_python上找到。链接发布发布页面显示项目的历史记录并充当变更日志。吡啶甲酸
DFC力控系统维护及使用
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。
2019-2023GESP,CSP,NOIP真题.zip
博文链接 https://blog.csdn.net/weixin_47560078/article/details/127712877?spm=1001.2014.3001.5502
包含: 1、jasminum茉莉花 2、zotero-style 3、greenfrog 4、zotero-reference 5、translate-for-zotero 用法参考:https://zhuanlan.zhihu.com/p/674602898
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。
python技巧学习.zip
2023 年“泰迪杯”数据分析技能赛 A 题 档案数字化加工流程数据分析 完整代码
echarts 折线图数据源文件
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最新版 升级有风险,前务必做好快照,以免升级后出现异常影响业务
5 总体设计.pptx
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
浏览器