`

CopperLicht 入门(一)Hello World

阅读更多
【专业web 3d、webGL、flash 3d程序开发:北京贝武易科技公司】
有疑问请联系我QQ:1539988257
贝武易-HTML5 3D技术联盟机构,提供研究、交流和培训机会,欢迎加入,地点:北京。
贝武易-HTML5 3D技术联盟群:49771294

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>
  [align=center]
    <canvas id="3darea" width="640" height="480" style="background-color:#000000">
      </canvas>
    [/align]
    <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这个就是引擎的类文件,你可以下载用最新版。

下面的教材我们会再深入。
请看CopperLicht 入门(二)移动物体和键盘相应

【专业web 3d、webGL、flash 3d程序开发:北京贝武易科技公司】
有疑问请联系我QQ:1539988257
贝武易-HTML5 3D技术联盟机构,提供研究、交流和培训机会,欢迎加入,地点:北京。
贝武易-HTML5 3D技术联盟群:49771294

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

相关推荐

    html5资源收集合集

    HTML 5与CSS 3权威指南中文版部分 HTML5 Canvas 2D API规范1.0 HTML5 Canvas 作图函数库 2.0版本 ... ...HTML5 从入门到精通 ...3D引擎CopperLicht ...3D引擎CopperLicht(二) ...OpenGL入门教程 ...一周学通OpenGL

    起点小说解锁.js

    起点小说解锁.js

    299-煤炭大数据智能分析解决方案.pptx

    299-煤炭大数据智能分析解决方案.pptx

    299-教育行业信息化与数据平台建设分享.pptx

    299-教育行业信息化与数据平台建设分享.pptx

    基于Springboot+Vue酒店客房入住管理系统-毕业源码案例设计.zip

    网络技术和计算机技术发展至今,已经拥有了深厚的理论基础,并在现实中进行了充分运用,尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代,所以对于信息的宣传和管理就很关键。系统化是必要的,设计网上系统不仅会节约人力和管理成本,还会安全保存庞大的数据量,对于信息的维护和检索也不需要花费很多时间,非常的便利。 网上系统是在MySQL中建立数据表保存信息,运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时,也能及时通过数据输入的有效性规则检测出错误数据,让数据的录入达到准确性的目的,进而提升数据的可靠性,让系统数据的错误率降至最低。 关键词:vue;MySQL;SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes

    时间复杂度的一些相关资源

    时间复杂度是计算机科学中用来评估算法效率的一个重要指标。它表示了算法执行时间随输入数据规模增长而变化的趋势。当我们比较不同算法的时间复杂度时,实际上是在比较它们在不同输入规模下的执行效率。 时间复杂度通常用大O符号来表示,它描述了算法执行时间上限的增长率。例如,O(n)表示算法执行时间与输入数据规模n呈线性关系,而O(n^2)则表示算法执行时间与n的平方成正比。当n增大时,O(n^2)算法的执行时间会比O(n)算法增长得更快。 在比较时间复杂度时,我们主要关注复杂度的增长趋势,而不是具体的执行时间。这是因为不同计算机硬件、操作系统和编译器等因素都会影响算法的实际执行时间,而时间复杂度则提供了一个与具体实现无关的评估标准。 一般来说,时间复杂度越低,算法的执行效率就越高。因此,在设计和选择算法时,我们通常希望找到时间复杂度尽可能低的方案。例如,在排序算法中,冒泡排序的时间复杂度为O(n^2),而快速排序的时间复杂度在平均情况下为O(nlogn),因此在处理大规模数据时,快速排序通常比冒泡排序更高效。 总之,时间复杂度是评估算法效率的重要工具,它帮助我们了解算法在不同输入规模下的性

    安全承诺书-施工(单位版).docx

    5G通信行业、网络优化、通信工程建设资料

    基于Springboot+Vue人口老龄化社区服务与管理平台-毕业源码案例设计.zip

    网络技术和计算机技术发展至今,已经拥有了深厚的理论基础,并在现实中进行了充分运用,尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代,所以对于信息的宣传和管理就很关键。系统化是必要的,设计网上系统不仅会节约人力和管理成本,还会安全保存庞大的数据量,对于信息的维护和检索也不需要花费很多时间,非常的便利。 网上系统是在MySQL中建立数据表保存信息,运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时,也能及时通过数据输入的有效性规则检测出错误数据,让数据的录入达到准确性的目的,进而提升数据的可靠性,让系统数据的错误率降至最低。 关键词:vue;MySQL;SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes

    node-v12.22.6-sunos-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提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    通信工程施工作业现场高危险源控制图集.docx

    5G通信行业、网络优化、通信工程建设资料

    毕设绝技《基于小程序的交友系统的设计与实现》

    《基于小程序的交友系统的设计与实现》是一个融合了小程序技术和社交功能的毕业设计项目。该项目旨在通过开发一款小程序,为用户提供一个便捷、有趣的交友平台,满足用户寻找新朋友、拓展社交圈的需求。 一、项目背景与目标 随着移动互联网的普及,小程序以其轻便、易用的特性受到了广大用户的喜爱。本项目旨在利用小程序技术开发一款交友系统,通过简洁明了的界面设计和丰富多样的社交功能,吸引用户参与并提升用户体验。通过实现这一系统,旨在帮助用户拓展社交圈,增进人际关系,并推动社交领域的创新与发展。 二、系统设计与功能实现 用户注册与登录:系统提供用户注册与登录功能,确保用户信息的真实性和安全性。用户可以通过手机号或第三方社交账号进行注册和登录。 个人资料展示:用户可以在个人资料页面展示自己的基本信息、兴趣爱好、照片等,以便其他用户了解并产生互动。 附近的人:系统通过定位功能展示附近的其他用户,用户可以浏览附近的人的信息,并主动发起聊天或交友请求。 聊天功能:系统提供一对一的聊天功能,用户可以与感兴趣的人进行实时交流,增进彼此的了解。 活动组织:用户可以发起或参与各类线下活动,如聚会、运动、旅行

    安全生产教育培训制度.doc

    5G通信行业、网络优化、通信工程建设资料

    shampoo-sales.csv

    shampoo-sales.csv

    59-《煤矿测量规程(1989版)》150.pdf

    59-《煤矿测量规程(1989版)》150.pdf

    node-v12.18.1-sunos-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-v12.22.3-sunos-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提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    项目代维费报价书.doc

    5G通信行业、网络优化、通信工程建设资料。

    AXIS T864 系列多通道 PoE+ 同轴电缆刀片套件 AXIS T8648 PoE+ 同轴电缆刀片紧凑型套件安装指南

    AXIS T864 系列多通道 AXIS T8646 PoE+ 同轴电缆刀片套件 AXIS T8648 PoE+ 同轴电缆刀片紧凑型套件安装指南

    MATLAB学习个人笔记总结.7z

    MATLAB学习个人笔记总结.7z

    课设&大作业-毕业设计基于SSM的毕业设计论文题目审核及选题管理系统.zip

    【资源说明】【毕业设计】 1、该资源内项目代码都是经过测试运行成功,功能正常的情况下才上传的,请放心下载使用。 2、适用人群:主要针对计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、数学、电子信息等)的同学或企业员工下载使用,具有较高的学习借鉴价值。 3、不仅适合小白学习实战练习,也可作为大作业、课程设计、毕设项目、初期项目立项演示等,欢迎下载,互相学习,共同进步!

Global site tag (gtag.js) - Google Analytics