javascript代码实例教程-BabylonJS娱乐场---基于WebGL的H5 3D游戏引擎

发布时间:2019-01-15 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-BabylonJS娱乐场---基于WebGL的H5 3D游戏引擎脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

BabylonJS娱乐场!

javascript代码实例教程-BabylonJS娱乐场---基于WebGL的H5 3D游戏引擎


一个用于保存”定制的”BabylonJS场景的网站: http://babylonjs-playground.azurewebsITes.net/

是什么?

该BabylonJS 娱乐场是一个在线的白板式,可试验的应用程序. 用于辅助创建基于Javascript的网页图形库框架BabylonJS的场景. 为了试验该娱乐场你的浏览器必须支持WebGL-而且激活Javascript. 大多数的现在浏览器都支持.

简单的说, 你可以在BabylonJS游乐场的左边编辑器输入或修改基于Javascript的场景代码, 按下运行按钮, 然后娱乐场将尝试在页面的右边区域里使用最新的BabylonJS框架版本渲染WebGL场景.

顶部菜单

javascript代码实例教程-BabylonJS娱乐场---基于WebGL的H5 3D游戏引擎

娱乐场的顶部菜单当前包含8个按钮:<"/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPjxzdHJvbmc+1MvQ0Dwvc3Ryb25nPiAtINTL0NCwtMWlutzI3dLXwO294i4g1NrE4835seC8rcb3wO/Vs8z5tPRC67rzLCC78tTaxOPQ3rjEseC8rcb3wO+1xLT6wuu68ywgsLTPwjxzdHJvbmc+1MvQ0Dwvc3Ryb25nPi4g1eK49sP8we7T6cDWs6Hk1si+xOO1xLOhvrAuPC9wPg0KPHA+PHN0cm9uZz6xo7tmpC9zdHJvbmc+IC0gsaO05rC0xaW9q8q5xOO1xLOhvrDTwL7DtcSxo7Tmtb3T6cDWs6G1XMr9vt2/4sDVLCDIu7rzsvrJ+tK7uPbOqNK7tcTN+Na3LCDO0sPHz8LD5rvhuPy24LXEzLjC28v8LiCx8LWj0MTS4s3iuLK4x9PpwNazocDvyM66ztSk17C1xLOhvrAuIMTHuPayu7vht6LJ+rXELiDNqLOjLCA8c3Ryb25nPrGjtOY8L3N0cm9uZz6wtMWl08PU2sTj0QQ6zcbky/vIy7fWz+3E47XEs6G+sMqxLCC78tXf08PU2sTj0qq9q7OhvrDX986qyunHqbGjtOa1veSvwMDG98DvyrEsINXi0fnE47/J0tS72MC0vMzQ+Lmk1/cuPC9wPg0KPHA+PHN0cm9uZz678cihLnppcNG5y/Ww/Dwvc3Ryb25nPiAtILvxyKEueMLw0bnL9bD8sLTFpcrH0+nA1rOhzOG5qbXE0ru49re9sePM2NX3LiDI57n7xOPP67DRxOO1xLOhvrC0+LvYvNIsILvyt6KyvLW9xLO49s341b63/s7xxvfJzywgu/LV37eiy824+Mbky/vIyywg1eK49rC0xaW+zcrHzqrE48zhuam1xC4gPHN0cm9uZz678cihLnppcNG5y/Ww/Dwvc3Ryb25nPiCzosrUvavE47HgvK3G98DvtcS0+sLrt8XI69K7uPa1pdK7tcRpbmRleC5odG1szsS8/iwgyLu687DR1q608rD8vfjSu7j2vdDX9nNhbXBsZS56aXC1xNG5y/XOxLz+wO8uINfuuvOw0dXiuPZzYW1wbGUuemlwzsS8/szhuam4+MTjz8LU2C4g0ru1qcTjz8LU2LKiveLRuSwgxOO+zbvhv7S1vcP7zqppbmRleC5odG1stcTOxLz+LiDE48Tc08PSu7j21qez1ldlYkdMtcTkr8DAxve08r+quMPOxLz+LCDE47vht6LP1rOhvrCxu+SvwMDG9+TWyL61w83Xzde1xNTaxMcuILWxyLe2qGluZGV4Lmh0bWzOxLz+uaTX99X9s6O68ywgxOPSstDtz+u9q9aut6KyvLW9xLO49s340rO3/s7xxvfJzywgyLu6882syKvKwL3nt9bP7cTjxq/BwbXE0+nA1rOhs6G+sC4gw7vT0LHY0qqwstew1u7I52JhYnlsb24uanO6zWhhbmQuanO1xL/yvNzOxLz+tb1pbmRleC5odG1szsS8/rXEuL29/MS/wrwsINLyzqppbmRleC5odG1szsS8/sDv0v3Tw8HLus3U2s/f0+nA1rOhv/K83Mq508O1xNK70fmw5rG+LiBpbmRleC5odG1szsS8/tLRvq2/ydLU1MvQ0LKix9LN6sirv8nSxtayLiAoztLDx7Cuy8DL/MHLISk8L3A+DQo8cD48c3Ryb25nPtDCvag8L3N0cm9uZz4gLSDQwr2osLTFpcrHuPa2wMzYx9K3vbHjtcTM2NX3LiDI57n7xOPX0M+4sum/tLn9yc/D5s28xqzA77HgvK3G99bQtcS0+sLrLCC78tXfyOe5+8Tj1NrT6cDWs6Gzob6wtcTPwsCt0aHU8cb3wO/Robn9xLO49tSk17C1xLOhvrAsIMTj06a4w7vh16LS4rW9JnJzcXVvO7D8ufwmcnNxdW871NrSu7j2vdDX9iZyc3F1bztjcmVhdGVTY2VuZSgpJnJzcXVvO7qvyv3A77XEsr+31i4guMNjcmVhdGVTY2VuZSgpuq/K/crHuPbU2tDttubCYWJ5bG9uSlOzob6wwO+2vLvhsbvKudPDtcS3x7OjxtXNqLXEuq/K/S4gQmFieWxvbkpTv/K83NPDu6e+rbOjuLTWxrrn1bPM+WNyZWF0ZVNjZW5lKCm1xmtayN0uIM2ouf2wtM/C1eK49rC0xaUsIMTjvavH5b/VseC8rcb3wO+1xMTayN0sIMi7uvPSu7j20tG+rbHg0LS6w7v5tKHE2sjdtcRjcmVhdGVTY2VuZSgpuq/K/bvhs/bP1tTaseC8rcb3wO8uINLRzOG5qdK7uPbErMjPtcTP4Lv6LCC1q8rHxOPSstDtz+u809CpueLUtLrNzfi48Swg0tSx49DCtcSzob6wv8nS1LG75NbIvi48L3A+DQo8cD48c3Ryb25nPsfls/08L3N0cm9uZz4gLSDH5bP9Q2xlYXKwtMWl0rK63Mjd0tfA7b3iLiDV4rj2sLTFpbzytaW1xMflv9XT6cDWs6Gx4LytxvfA77XEy/nT0LT6wusuIMv8vq2zo9PD1NrS0b6t17yxuLrDtPrC67b40qrWsb3TzfnA79WzzPljcmVhdGVTY2VuZSgpuq/K/BT6wuvKsSwgu/LV39PD1Nq1scTj17yxuNf20KnK1NHptcS0+sLrs6LK1MqxLiBCYWJ5bG9uSlPT6cDWs6HKx8q508NCYWJ5bG9uSlO/8rzcwLS0tL2oytTR6bT6wuu1xLfHs6Ow9LXEtdi3vS4gy/zKx7j2w8DD7rXE0afPsLe9t6guPC9wPg0KPHA+PHN0cm9uZz7X1szltPPQoTwvc3Ryb25nPiAtINfWzOW089ChsLTFpby4uvWyu9Do0qq94srNLiC4w7C0xaW6zcv8zOG5qbXEz8LArdGh1PHG99TK0O3E49DeuMTT6cDWs6Gx4LytxvfA77T6wuu1xNfWzOW089ChLjwvcD4NCjxwPjxzdHJvbmc+s6G+sNGh1PHG9zwvc3Ryb25nPiAtINXiuPbPwsCt0aHU8cb3sLTFpSAoyc/nvmDvz9TKvs6qJnJzcXVvO7ao1sYmcnNxdW87KSZoZWxSAXA7ysfTw8C0tNPUpNewtcTT6cDWs6hr3cq+s6G+sMDv19TTydGh1PGzob6wtcQuICZsc3F1bzu2qNbGJnJzcXVvO7KisrvKx8jOus7Su7j20d3KvrOhvrC1xMP7s8YuIMv8sbuzxs6qJnJzcXVvO7ao1sYmcnNxdW87ysfS8s6qxMe49s28xqzW0LHgvK3G98DvtcSzob6wysfSu7j2JnJzcXVvO7ao1sYmcnNxdW87tcSzob6wLiDL/MrHuPbQ3rjEwcvQqbv5tKGzob6wtcTR3cq+KM6qyc/NvLb4tLS9qLXEKS4gzaizoywgtbHE47Xa0ru0zrTyv6rT6cDWs6HVvrXjyrEsIMTHuPawtMWlu+Gxu7HqzqomcnNxdW87u/m0obOhvrAmcnNxdW87LiDO3sLbxMe49rC0xaXJz7Hq16K1xMrHyrLDtCwgy/y2vLG7vdDX9jxzdHJvbmc+s6G+sNGh1PHG9zwvc3Ryb25nPiCwtMWlLjwvcD4NCjxwPjxzdHJvbmc+yKvGwTwvc3Ryb25nPiAtIMirxsGwtMWl0rLWu9Dot8ezo8nZtcS94srNLiDV4rj2sLTFpbvhyrnT0rHftcTk1si+u62yvL34yOvIq8bBxKPKvS4g1Nq9+MjryKvGwcSjyr3KsSwgxOO1xOSvwMDG97vhzOG5qda4we7AtM3Ls/bIq8bBxKPKvbvyt7W72LW90+nA1rOhtcTErMjPt9bGwcSjyr0uPC9wPg0KPGgyIGlkPQ=="编辑器">编辑器

javascript代码实例教程-BabylonJS娱乐场---基于WebGL的H5 3D游戏引擎

娱乐场左边的代码编辑器是个基于Ace 编辑器的一个’智能’编辑器. 娱乐场编辑器有许多奇妙的特征. 它具有输入预判的特征, 比如自动补全匹配的引号, 小括号, 大括号, 和方括号&hellip; 这对编程编辑器是非常方便的. 它尝试标出编程错误点, 而且当它发现潜在的语法问题时会在编辑器左边放置小图标. 如果你把鼠标指针指向那些小图标,编辑器会弹出一个小窗口告诉你它发现了什么问题. 编辑器也有语法加亮,代码折叠,文本拖拽,自动缩进及扩充等功能, 而且有4百万行的容量. 讲述编辑器的大量特征超越了本教程的范围. 通过访问Ace编辑器的网站你能够学习到更多的Ace编辑器知识,而且通过花更多时间在使用娱乐场编辑器上也可以.

弄糟了咋办 - 任何编辑器的重要特征之一是 撤销和重做, 我们的娱乐场编辑器完全支持这两个特征. 我并不熟悉所有操作系统里的撤销和重做操作键,, 但知道Windows系统里撤销键是Conntrol-z 而且重做键是 Shift-Control-z. 你也可以多次地执行撤销和重做。这个非常方便,我们再次爱死它了。

渲染画布

javascript代码实例教程-BabylonJS娱乐场---基于WebGL的H5 3D游戏引擎

对于BabylonJS的网页图形库渲染画布你怎么评价, 没有比这个说法更牛逼了:”它是这个星球上最酷的事情!”. 娱乐场的右边部分是BabylonJS网页图形库框架用来渲染场景的区域,而且你可以通过左边的编辑器实时控制场景. 渲染出来的画布还是空白么? 你点击了运行按钮么? 你有创建相机么? 相机的目标设置正确么? 你网格的材质设置好了光或散射颜色么?

如果你的代码已经包含在createScene()函数里, 那在该函数的顶部有这行代码么VAR scene = new BABYLON.Scene(engine),? 函数尾部的大括号里最后一行是否return scene;呢? 你是否有创建一个网格对象,诸如:盒子, 柱体, 地面, 球体, 平面, 圆环体, 圆环节等?

你是在自由模式下运行而且没把你的代码放到createScene() 函数中么? 那样当然也是允许的,只是你仍然需要一个相机,一个光源和一个网格造型。. 缺乏这些会导致你的场景渲染失败. 好好研究下娱乐场场景选择器里下拉演示场景, 你很快会成为一名BabylonJS娱乐场专家的。

编译错误

javascript代码实例教程-BabylonJS娱乐场---基于WebGL的H5 3D游戏引擎

这是张娱乐场弹出的编译错误检测面板的图片。 编译错误是当你点击运行按钮后BabylonJS框架检测出来的错误. 它不是编辑器检测到的语法错误, 但是编辑器也可能检测到它并使用红色X图标在其左侧将问题标示出来。编辑错误里并不总能包含错误的关键点,但它仍然很方便. 它告知你BabylonJS框架已经对你场景代码有些不爽拉。 你调整代码后在点击运行按钮前也许希望关闭弹出的编译错误提示(通过它边上的X按钮).

娱乐场网址的格式

当你首次访问BabylonJS娱乐场网站时, 你浏览器地址栏里的网址看起来会像这样:

http://www.babylonjs.COM/playground/

如果你从下拉的场景选择器里选一个场景后, 娱乐场的网址会变成这样:

http://www.babylonjs.com/playground/#

(可以自行编辑演示场景的代码然后点击运行或保存. 你不可能毁坏预装的演示程序的)

当你想同人分享网址或为以后的工作记住场景而将一个场景保存到娱乐场数据库里时,那么网址看起来会像这样的:

http://www.babylonjs.com/playground/#QKQHS

(记得用浏览器的书签保存好)

如果你再次保存场景… (也许是在对场景做了更多工作之后), 那个网址将增长, 看着像这样子的:

http://www.babylonjs.com/playground/#QKQHS#1

如果再次保存… 网址还增长, 看起来像这样:

http://www.babylonjs.com/playground/#QKQHS#2

(再一次提醒, 务必用书签保存这个网址,以便之后你能很容易的把它找回来)

而且最后, 如果你想加载一个特殊的预装演示场景, 比如第12个演示场景, 你可以这样访问网址:

http://www.babylonjs.com/playground/?12

保持焦点

有时候你运行一个场景,然后在渲染画布里使用光标键和鼠标, 最后想将焦点返回到编辑器里以便做更多的代码修改. 有时候, 你要在编辑器里其它区域点击鼠标以便重新设定编辑器焦点. 一旦编辑器有了新焦点, 你的编辑器光标键就会再次移动. 这个常在场景里有激活的自由相机时发生。.

最后… 甩个包袱

嘿,谢谢阅读本教程,一并谢谢探究了BabylonJS娱乐场. 我们为之自豪, 也认为你会喜欢它. 这个教程还非常的新,而且将会经常的改变. 记得回来检查更新,学习新特征哦.

BabylonJS娱乐场位于……

论坛上自由讨论babylonjs娱乐场或者babylonjs框架的其它话题-论坛位于"> 

 

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-BabylonJS娱乐场---基于WebGL的H5 3D游戏引擎全部内容,希望文章能够帮你解决javascript代码实例教程-BabylonJS娱乐场---基于WebGL的H5 3D游戏引擎所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。