`

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

    三菱PLC例程源码QD75P八轴定位系统程序

    三菱PLC例程源码QD75P八轴定位系统程序本资源系百度网盘分享地址

    WeRoBot-0.3.2-py2.7.egg

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    tensorflow_serving_api_gpu-1.14.0-py2.py3-none-any.whl

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    三菱PLC例程源码ro1-chunshui

    三菱PLC例程源码ro1_chun shui本资源系百度网盘分享地址

    产品经理与产品原型(详解)

    互联网产品经理在向技术部门递交产品策划方案时,除了详尽的需求阐述,一份清晰易懂的产品原型设计方案同样不可或缺。一份出色的原型设计,不仅能促进前期的深入讨论,更能让美工和开发人员更直观地理解产品特性,进而优化工作流程,减少不必要的时间消耗,提升整体工作效率。接下来,我想就产品经理与原型设计之间的关系进行简要的探讨,并期待能与大家进行深入的交流和探讨。 产品原型,简而言之,是产品设计最终成形之前的一个基础框架。对于网站而言,它意味着对页面模块和元素进行初步、大致的排版与布局。进一步讲,我们还会加入一些交互性元素,使原型更加具体、生动,更贴近最终产品的形态,从而帮助团队成员更好地理解和构建产品。 很多人存在一个误区,认为UI、UE设计师的职责就是将产品原型转化为具体的页面效果。然而,实际上他们的工作流程是在原型设计完成之后展开的。在整个产品开发流程中,产品经理是最了解产品特性、用户和市场需求的角色。尽管设计师在视觉设计方面可能表现得非常出色,但他们在理解产品、用户、市场及业务方面的深度与准确性上,往往无法与产品经理相提并论。准确地说,设计师的工作是将产品原型转化为产品经理所期望的视觉效果。

    小红书娱乐营销520明星大事件《全明星告白季》招商方案ss.pptx

    小红书娱乐营销520明星大事件《全明星告白季》招商方案ss.pptx

    本科毕业设计-基于深度学习的模糊人脸图像增强系统的设计与实现.zip

    人工智能毕业设计&课程设计

    三菱PLC例程源码车辆进出车库

    三菱PLC例程源码车辆进出车库本资源系百度网盘分享地址

    三菱PLC例程源码PLCFX0N三层三站程序

    三菱PLC例程源码PLCFX0N三层三站程序本资源系百度网盘分享地址

    三菱PLC例程源码纯水控制三菱PLC实例和触摸屏程序

    三菱PLC例程源码纯水控制三菱PLC实例和触摸屏程序本资源系百度网盘分享地址

    三菱PLC例程源码pp復卷機三菱伺服編程

    三菱PLC例程源码pp復卷機三菱伺服編程本资源系百度网盘分享地址

    三菱PLC例程源码变频器16段速控制

    三菱PLC例程源码变频器16段速控制本资源系百度网盘分享地址

    wheel-0.34.2.tar.gz

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    基于SSM框架的二手物品交易管理系统设计源码

    这是一个基于SSM框架的二手物品交易管理系统设计,使用Java语言开发,包含344个文件。主要文件类型包括59个JPG图片文件、59个Java源文件、48个PNG图片文件、37个JAR包文件、34个JavaScript文件、28个JSP文件、26个CSS文件、16个XML文件和5个GIF图片文件。该项目提供了一个全面的二手物品交易平台,支持用户发布商品、查看闲置、充值账户、查看所有订单和发布求购信息,旨在为用户提供便捷、安全的交易环境。

    tensorflow_privacy-0.2.1-py3-none-any.whl

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    使用DS Client在PPT中动态展示分子三维结构.pdf

    使用DS Client在PPT中动态展示分子三维结构

    quartus ii安装教程.docx

    quartus ii安装教程

    基于ssm高校食堂订餐系统.zip

    基于ssm高校食堂订餐系统.zip

    Google-JavaScript-编码规范指南

    Google JavaScript编码规范指南是Google公司推出的一套详尽且实用的JavaScript编程规范,旨在为开发者提供一个清晰、一致的编码标准,以提高代码质量、可读性和可维护性。这套规范不仅涵盖了JavaScript语言的基础语法和常见模式,还针对Google的实际项目需求,提供了一系列最佳实践和建议。 通过遵循Google JavaScript编码规范指南,开发者可以确保自己的代码风格与团队其他成员保持一致,减少因编码习惯不同而引发的沟通成本和潜在错误。规范中详细说明了变量命名、函数定义、注释书写、代码格式化等方面的要求,使得代码更加整洁、易于阅读和理解。 此外,Google JavaScript编码规范指南还强调了代码性能和可维护性的重要性。它提倡使用高效的数据结构和算法,避免不必要的性能开销;同时,也鼓励开发者编写可重用的代码,减少重复劳动,提高开发效率。 对于初学者来说,Google JavaScript编码规范指南也是一本极佳的入门教材。它可以帮助初学者养成良好的编程习惯,掌握JavaScript的核心概念和技巧,为未来的项目开发打下坚实的基础。

Global site tag (gtag.js) - Google Analytics