of 20 /20
Firefox OSアプリ 「ModeView」 制作者:秋葉秀樹 「さわってみよう Firefox OS」発表作品 3Dモデルビューア

Firefox OSアプリ 「ModeView」

Embed Size (px)

DESCRIPTION

「さわってみよう Firefox OS」発表作品

Text of Firefox OSアプリ 「ModeView」

  • 1. Firefox OS3DFirefox OS ModeView

2. 20JavaScriptFlash3DCGWeb DesigningHTML5CTO 3. Firefox OS WebHTMLOShttp://designers-hack.net/event/004firefoxos/ 4. Blender 5. 6. Blender3DBlenderThree.jsJS3D 7. FirefoxB2GPCBlenderUIDreamweaverPhotoshopLESSCSS 8. jQuery 1.8.2 Three.js 9. BlenderThree.js three.js/utils/exporters/blender/2.63/scripts/addons/ io_mesh_threejsio_mesh_threejsApplications/blender/Contents/exporters/blender/2.63/scripts/addons/io_mesh_threejs/MacOS/2.63/scripts/addons/BlenderThree.js 10. BlenderThree.js 11. model.js JSON 12. HTML5headercanvas(Three.js)div(CSS3Transitions)li(border-radius) footer 13.

/* CSS */.picker {position: absolute;bottom: -200px;opacity: 0;-moz-transition: .3s;div} 14. div activePanel

/* CSS */.activePanel { bottom: 80px; opacity: 1; CSS }div#lightColorbottomopacity Transitons 15. CSSactivePanel div

#lightColoractivePanel CSS #lightColorOK 16. HTML/CSS/JavaScriptUICSSTransitionsAnimationsJavaScriptCSSjQueryanimate()CSS 17. LESSUI [email protected]: 30px;.closeBtn { .closeBtn {background: #F00; background: #F00;width: @btnSize; width: 30px;height: @btnSize; height: 30px;border-radius: @btnSize; border-radius: 30px;color: white; color: white;position: absolute; position: absolute;right: @btnSize / 2; right: 15px;top: [email protected] / 2; top: -15px;text-align: center; text-align: center;-moz-box-sizing: border-box; -moz-box-sizing: border-box;}} 18. HTMLFirefox OSTransitionsCSS-moz-WebB2GOK 19. 3DThree.js 20. [email protected]#TizenJP