3D Rendering in JavaScript

[ 2006-11-03 09:03:07 | Author: todd ]
Font Size: Large | Medium | Small
uploads/200611/03_090812_3drenderinginjavascript.gif

这个demo演示了如何使用js/dom/css来在浏览器中渲染出3d模型,而且还可以用键盘控制其旋转。实在是令人惊叹。


其原理其实也很简单,就是利用border。浏览器在渲染比较宽的border时,结合处是有斜面的,以此再配合颜色,就可以做出小块的三角形,然后多个小三角形,就可以组成一个不规则的图形了。

demo支持IE7、FF、Opera。不过很遗憾,IE6下因为透明边框的支持问题,显示不太理想。
查看这里

有人又做了改进,让他支持IE6了。查看这里
[Last Modified By todd, at 2006-11-03 09:23:25]
Comments Feed Comments Feed: http://www.todd-lee.com/blog/feed.asp?q=comment&id=178

View Mode: Show All | Comments: 5 | Trackbacks: 547 | Toggle Order | Views: 9654
Quote Guest*
[ 2006-11-03 11:00:46 ]
想象力是无限的~
[smoke] [brick] [mummy] [power]
Quote rainple*
[ 2007-01-06 21:53:48 ]
强悍!可惜我不会js啊! [razz]
Quote Guest*
[ 2007-01-09 05:42:45 ]
不错, 有想法,只用他做过三角形
Quote seektan
[ 2007-02-01 08:47:12 ]
厉害,慢慢从基础开始:
javascript动画基础:http://www.mozilla.org/docs/dom/samples/
设置border得到三角:http://www.siteweb.cn/articles/em.html

不过3D、动画这些东西,是OpenGL Graphics Engine、Flash等的强项,如何具体应用有待研究(或者封装为一个小型库?)
目前javascript和flash之间的交互可能有更好的实际应用价值
[Last Modified By seektan, at 2007-02-01 08:48:09]
Quote mark*
[ 2007-02-13 22:57:45 ]
好厉害啊

Post Comment
Username:   Password:   Register Now?
Security Code * Please Enter the Security Code
Smilies
[smile][confused][cool][cry][angry][wink][sweat][lol][stun][razz][redface][rolleyes][sad][heart][star][idea][black][rage][weep][amaze][ruin][evil][imprintMale][imprintFemale][scare][smoke][letch][brick][retch][warm] [rabbit][cat][mummy][lovely][zizz][power]
Enable UBB Codes Auto Convert URL Show Smilies Hidden Comment