WebGL With Three.js: Basics | Envato Tuts+
3D graphics in the browser have been a hot topic ever since it was first introduced. But if you were to create your apps using plain WebGL, it would take ages. This is exactly why some really useful libraries have recently came about. Three.js is one of the most popular, and in this series I will show you how best to use it in order to create stunning 3D experiences for your users. Before we begin
『Three.jsã¨Blenderã«ã‚ˆã‚‹WebGLã€
1 pixel｜サイãƒãƒ¼ã‚¨ãƒ¼ã‚¸ã‚§ãƒ³ãƒˆå…¬å¼ã‚¯ãƒªã‚¨ã‚¤ã‚¿ãƒ¼ã‚ºãƒ–ãƒã‚° サイãƒãƒ¼ã‚¨ãƒ¼ã‚¸ã‚§ãƒ³ãƒˆã®ã‚¯ãƒªã‚¨ã‚¤ã‚¿ãƒ¼ã®å–り組ã¿ã‚’紹介ã™ã‚‹ã‚ªãƒ•ã‚£ã‚·ãƒ£ãƒ«ãƒ–ãƒã‚°ã§ã™ã€‚最新技術ã¸ã®æŒ‘戦やサービス誕生ã®è£è©±ã€å‹‰å¼·ä¼šã‚„イベントã®ãƒ¬ãƒãƒ¼ãƒˆãªã©CAクリエイターã®æƒ…å ±ãŒæº€è¼‰ã§ã™ã€‚ åˆã‚ã¾ã—ã¦ã€‚ html5ã€javascriptã€flashãªã©ã®ã‚¯ãƒ©ã‚¤ã‚¢ãƒ³ãƒˆé–‹ç™ºã‚’ メインã«æ‹…当ã—ã¦ãŠã‚Šã¾ã™ã€ è…家(@KA_ka_YY)ã¨ç”³ã—ã¾ã™ã€‚ 弊社3月ã«è¡Œã‚ã‚Œã¾ã—ãŸã€ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã€ãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ã‚’対象ã¨ã—㟠アプリコンテストã¨ã„ã†ã‚¤ãƒ™ãƒ³ãƒˆã«ã¦ WebGLを使用ã—ãŸé‡Žçƒç›¤ã‚²ãƒ¼ãƒ を作æˆã—ã¾ã—ãŸã€‚ ãã®éš›åˆ©ç”¨ã—ãŸThree.js（WebGLã®javascriptライブラリ）を用ã„㟠WebGLã®ä½¿ç”¨æ–¹æ³•ã‚’紹介ã•ã›ã¦ã„ãŸã ã“ã†ã¨æ€ã„ã¾ã™ã€‚ （1）レンダリングã¾ãšã¯Â Blender ã¨ã„ã†ãƒ•ãƒªãƒ¼ã®3Dモデリングソフト㧠以下ã®ã‚ˆã†ãªã‚ャラクターを作りã¾ã—ãŸ
[3D][three.js]ã»ã‚‰ã»ã‚‰iPhoneã§ã‚‚ヌルヌル動ãよ
CSS3Rendererãªã‚“ã¦ã®ãŒç™»å ´ã—ãŸã‚‰ã—ã„。 ã„ã‚„ã€å‰ã‹ã‚‰ã‚ã£ãŸã‚“ã‹ã€‚ http://mrdoob.com/lab/javascript/threejs/css3d/periodictable/ ã“ã£ã¡ã¯ãƒ‘ノラマ。 https://dl.dropbox.com/u/7508542/sandbox/threejs/css3d/css3d_panorama.html http://threejs.org/examples/css3d_panorama.html mr.doobã•ã‚“ã®three.jsã«æ–°ãŸãªæ©Ÿèƒ½ãŒè¿½åŠ ã•ã‚ŒãŸã‚‰ã—ã„。 @matsuse ã•ã‚“㨠@yomotsu ã•ã‚“ã«æ•™ãˆã¦é ‚ãã¾ã—ãŸã€ https://plus.google.com/113862800338869870683/posts/QcFk5HrWran ã“ã“ら当ãŸã‚Šã‚’èªã‚ã°è‰¯ã„ã®ã。
![[3D][three.js]ã»ã‚‰ã»ã‚‰iPhoneã§ã‚‚ヌルヌル動ãよ](https://cdn-ak-scissors.b.st-hatena.com/image/square/cf8fc148acda6de4894350d51c87c79d866f1df6/height=288;version=1;width=512/http%3A%2F%2Fwww.inazumatv.com%2Fcontents%2Fwp-content%2Fuploads%2F2012%2F10%2Fthreejs_css3.png)
WebGL and Three.js
32. <!doctype html> <html> //é ‚ç‚¹ <head> var vertices = new Float32Array([ <meta charset="utf-8"> 0.0, 0.5, 0.0, <title>webgl demo</title> -0.5, -0.5, 0.0, <script> 0.5, -0.5, 0.0 document.addEventListener('DOMContentLoaded', function(){ var canvas = document.querySelector('#glcanvas'); ]); var gl = canvas.getContext('experimental-webgl'); // é ‚ç‚¹ã®æ•° var verticesLength = 3; var vShaderSource = [ // gl_
ライフゲーム3Dã®ä½œã‚Šæ–¹ - ãšã£ã¨å›ã®ã‚¿ãƒ¼ãƒ³
three.jsを使ã£ãŸ3Dã®ãƒ©ã‚¤ãƒ•ã‚²ãƒ¼ãƒ を作ã£ãŸã®ã§ã€æ¬¡ã«é€²ã‚€ãŸã‚ã«ãã®ä¸èº«ã«ã¤ã„ã¦æ›¸ã残ã—ã¦ãŠãã¾ã™ã€‚ http://ando-yasushi.appspot.com/conways-game-of-life/gameoflife.html HTML ã¨ã‚Šã‚ãˆãšHTML部分ã¯ã“ã‚“ãªæ„Ÿã˜ã€‚Three.jsã¯è¨€ã‚ãšã¨çŸ¥ã‚ŒãŸWebGLã‚’ã„ã„æ„Ÿã˜ã«ä½¿ãˆã‚‹ã‚ˆã†ã«ã—ã¦ãれるライブラリ。RequestAnimationFrame.jsã¯ãã®Three.jsã«ãŠã¾ã‘ã¨ã—ã¦ä»˜ã„ã¦ãã‚‹requestAnimationFrameをクãƒã‚¹ãƒ–ラウザã§ä½¿ãˆã‚‹ã‚ˆã†ã«ã—ã¦ãれるライブラリ。setIntervalãªã‚“ã¦ã‚ªãƒ¯ã‚³ãƒ³ã§ã™ã‚ˆãƒ»ãƒ»ãƒ»ã£ã¦æ€ã£ã¦ãŸã‘ã©ã‚¤ãƒžãƒ‰ã‚ã¯ã‚€ã—ã‚requestAnimationFrameãŒã‚ªãƒ¯ã‚³ãƒ³ãªã‚“？よã分ã‹ã‚‰ã‚“。 <!doctype html> <html lang="en"> <head>
踊るJavaScriptãŒPerfume - 音ã®é³´ã‚‹ãƒ–ãƒã‚°
http://mohayonao.herokuapp.com/perfume1 http://mohayonao.herokuapp.com/perfume2 (Web Audio API / Audio Data API連æºãƒãƒ¼ã‚¸ãƒ§ãƒ³) http://www.perfume-global.com ã§ã€Perfumeã®ãƒ¢ãƒ¼ã‚·ãƒ§ãƒ³ãƒ‡ãƒ¼ã‚¿ãŒé…られã¦ã„ã‚‹ã®ã§ã€ã¨ã‚Šã‚ãˆãšJavaScriptã§è¸Šã‚‰ã›ã¦ã¿ãŸã€‚ 3Dã®å‡¦ç†ã¯ Three.js ã§ã‚„ã£ã¦ã„ã‚‹ã—ã€GitHubã®FLASHã®ã‚„ã¤ã‚’ベースã«JavaScriptã«ã™ã‚‹ã ã‘ãªã®ã§ã€ã‚ˆã分ã‹ã£ã¦ã„ãªãã¦ã‚‚ã§ãる。 Three.js -> https://github.com/mrdoob/three.js/ perfume-dev -> https://github.com/perfume-dev ãŸã ã€Flashã® Matrix3D.append
HTML5ã«ã‚ˆã‚‹ç‰©ç†ã‚·ãƒŸãƒ¥ãƒ¬ãƒ¼ã‚·ãƒ§ãƒ³ç’°å¢ƒã®æ§‹ç¯‰ ～WebGLライブラリThree.js 入門（１ï¼ï¼“）～
HTML5ã¨WebGL åˆã‚ã«HTML5ã®ä½ç½®ã¥ã‘ã«ã¤ã„ã¦ç°¡å˜ã«è§¦ã‚Œã¾ã™ã€‚HTML5ã¨ã¯ã“ã‚Œã¾ã§ã®Webページ作æˆè¨€èªžã§ä¸»æµã ã£ãŸHTML4ã‚„XHTMLã®å¾Œç¶™è¨€èªžã®ã“ã¨ã§ã€ 2008å¹´ã«è‰æ¡ˆãŒã¾ã¨ã‚られã€2014å¹´ã¾ã§ã«ã‚¦ã‚§ãƒ–ブラウザå„社ã¸ã®æ£å¼å‹§å‘Šã‚’目指ã—ã¦ç–定ãŒé€²ã‚られã¦ã„ã¾ã™ã€‚ HTML5㯠2012å¹´1月ã§ã‚‚ã¾ã 「è‰æ¡ˆã€æ®µéšŽã§ã€ä»•æ§˜ã‚‚æµå‹•çš„ãªæº–備段階ã§ã‚ã‚‹ãŒã€é–‹ç™ºå´ã‹ã‚‰ã‚‚ユーザå´ã‹ã‚‰ã‚‚éžå¸¸ã«æ³¨ç›®ãŒé›†ã‚られã¦ã„ã¾ã™ã€‚ ãã®å¤§ããªç†ç”±ã®ä¸€ã¤ã«æŒ™ã’られã¦ã„ã‚‹ã®ãŒã€iPhoneã‚„Androidãªã©ã®ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã®å°é ã«ã‚ˆã‚‹æƒ…å ±ç«¯æœ«ã®å¤šæ§˜åŒ–ã¸ã®å¯¾å¿œã®ãŸã‚ã§ã™ã€‚ã¤ã¾ã‚Šã€æ§˜ã€…ãªWEBコンテンツã®ã‚¯ãƒã‚¹ãƒ—ラットフォーム化ã¸ã®é‡è¦ãªè²¢çŒ®ãŒæœŸå¾…ã•ã‚Œã¦ã„ã‚‹ã‹ã‚‰ã§ã™ã€‚ ã¨ã„ã†ã®ã‚‚スマートフォンã®ç™»å ´ã¾ã§ã¯ã€Adobe社ãŒæä¾›ã™ã‚‹ FLASH ãŒå‹•ç”»ã‚„オーディオãªã©ãŒçµ„ã¿åˆã‚ã•ã‚ŒãŸãƒžãƒ«ãƒãƒ¡ãƒ‡ã‚£ã‚¢ã‚³ãƒ³ãƒ†ãƒ³ãƒ„
THREE.jsã®ã‚½ãƒ¼ã‚¹èªã¿ã‚µãƒãƒ¼ãƒˆã‚µã‚¤ãƒˆä½œã‚Šã¾ã—㟠- ãšã£ã¨å›ã®ã‚¿ãƒ¼ãƒ³
皆ã•ã‚“THREE.jsã¯å˜ãªã‚‹WebGLã®ãƒ©ãƒƒãƒ‘ーã¨æ€ã£ã¦ã„ã‚‹ã‹ã‚‚ã—ã‚Œã¾ã›ã‚“ãŒã€å®Ÿéš›ã¯ãã‚Œã ã‘ã§ã¯ãªãã¦ã€ãƒ†ã‚¯ã‚¹ãƒãƒ£ãƒãƒ¼ãƒ€ãƒ¼ã‚„視点管ç†ç”¨ã‚³ãƒ³ãƒˆãƒãƒ¼ãƒ©ãƒ¼ãªã‚“ã‹ã®è£œåŠ©ã‚¯ãƒ©ã‚¹ã«åŠ ãˆã¦ã€ã‚¹ãƒ—ライトやパーティクルシステムã¾ã§ä»˜ã„ã¦ã„ã¦ã€ãŸã¶ã‚“見ãŸã“ã¨ãªã„人ãŒè€ƒãˆã¦ã„るよりã„ã‚ã„ã‚ã§ãã¾ã™ã€‚ ãŸã ã€ã„ã‹ã‚“ã›ã‚“ã¾ã¨ã‚‚ãªãƒ‰ã‚ュメントãŒãªã„ã®ã§ã€ãれらを実際ã«ä½¿ã†ã«ã¯ã€ãã®ã‚¯ãƒ©ã‚¹ã‚’使ã£ã¦ã„る例を見ã¤ã‘ã¦ã€ã•ã‚‰ã«ãれらãŒä½¿ã‚ã‚Œã¦ã„る部分を検索ã—ã¦ä½¿ã„方を調ã¹ã‚‹ã—ã‹ã‚ã‚Šã¾ã›ã‚“。 æ£ç›´é¢å€’ãã•ã„ã®ã§ã€ãƒ–ラウザã§å°‘ã—ã ã‘楽ã«ã‚½ãƒ¼ã‚¹ã‚’眺ã‚られるサイトを立ã¡ä¸Šã’ã¾ã—ãŸã€‚ http://threejsdoc.appspot.com/doc/index.html ãŸã ã—ã“ã‚Œã¯ã‚ãã¾ã§ã‚‚ソースèªã‚€ã®ã‚’手ä¼ã†ãŸã‚ã®ãƒ„ールã§ã™ã€‚何やã£ã¦ã‚‹ã‚¯ãƒ©ã‚¹ãªã®ã‹ã¨ã‹ã€ã©ã†ã‚„ã£ã¦ä½¿ã†ã‹ã¨ã‹ã¯ã€ãƒ•ã‚¡ã‚¤ãƒ«åやインスタンス変数ã‹ã‚‰æŽ¨æ¸¬ã—ãŸã‚Šã€ã‚µãƒ³ãƒ—
Three.js/Node.js-コード補完ã®ã‚るエディタ。
Node.jsã®ã‚³ãƒ¼ãƒ‰æ›¸ãã¯ã€ä»Šã¾ã§ã¨åŒã˜ã‚ˆã†ã«æ‰‹ã«é¦´æŸ“ã‚“ã Codaを使ã£ã¦ã„ãŸã®ã ãŒã€ã©ã†ã«ã‚‚Node.jsã®ã‚³ãƒ¼ãƒ‰è£œå®Œã¯ã‚„ã£ã¦ãã‚Œãªãã¦ã€ãƒ•ãƒ©ã‚¹ãƒˆãƒ¬ãƒ¼ã‚·ãƒ§ãƒ³ãŒæºœã¾ã£ã¦ã„ãŸã€‚ æ°—ãŒã¤ã„ãŸã‚‰ã‚¨ãƒ‡ã‚£ã‚¿æŽ¢ã—を始ã‚ã¦ã—ã¾ã£ã¦ã„ãŸã€‚ [Komodoエディタ] å‰å›žã‚¨ãƒ³ãƒˆãƒªã§ç´¹ä»‹ã—ãŸã€Eclipse IDE for JavaScript Web Developersã‚‚ã€å…ƒã¯ã¨ã„ãˆã°ã€ã“ã®ã‚³ãƒ¼ãƒ‰è£œå®Œã•ã‚Œãªã„ä¸æº€ã‚’解消ã™ã¹ã検索ã—ã¦ã„ãŸèª²ç¨‹ã§è¦‹ã¤ã‘ãŸã‚‚ã®ã 。 Eclipse+Node Debuggerã§ã¯ã‚³ãƒ¼ãƒ‰è£œå®Œã§ããšã€å¼•ã続ã探ã—ãŸã¨ã“ã‚ã€Komodoエディタã§Node.jsãŒé–‹ç™ºã§ãã‚‹ã¨ã„ã†è¨˜äº‹ã‚’見ã¤ã‘ãŸã€‚ Using Komodo for Node.JS Coding Node.js support in Komodo 7 Alpha 3 ãŸã ã—有償ã®Komodo IDEã®ã¿ã§ã‚ã‚Šã€ç„¡å„Ÿã®Kom
日記 | ヨモツãƒãƒƒãƒˆ
blog移行ã—ã¾ã—ãŸã€‚æ–°ã—ã„blogã§æ›´æ–°ã‚’続ã‘ã¦ã„ã¾ã™ã€‚ XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々ã®å‡ºæ¥äº‹2012å¹´7月8日日曜日 ブãƒã‚°ä½œã‚ŠãªãŠãã†ã‹ãªãƒ¼ã¨æ€ã£ã¦ã€ã“ã® Webサイト ã‚’ã¿ãªãŠã—ã¦ãŸã‚‰ã€Web ページã®ãƒ¡ã‚¿æƒ…å ±ã¨ã—ã¦ãƒ€ãƒ–リンコア (RDF) を混在ã•ã›ã¦ã„ãŸã“ã¨ã‚’æ€ã„出ã—ãŸã€‚ãƒãƒªãƒ‡ãƒ¼ã‚¿ãƒ¼ã«ã‹ã‘ã‚Œã°ã€ã‚°ãƒ©ãƒ•ã‚‚å–り出ã›ã¦ ã¿ãŸã„ãªæ„Ÿã˜ã«ãªã‚‹ã€‚ã§ã‚‚çµå±€ã‚ã¾ã‚Šæ„味ãªã‹ã£ãŸã§ã™å¤šåˆ†ã€‚ã„ã¾ã¯ OGP ã¨ã‹ã‚ã‚Šã¾ã™ã—ã。 Web ページ㯠XHTML ã«ã—ã¦ãŸã‘ã©ã€ãƒ–ãƒã‚°ã®ã‚³ãƒ¡ãƒ³ãƒˆã§å‚照先ã®ãªã„数値å‚ç…§ã¨ã‹æ··ãœã‚‰ã‚Œã‚‹ã¨ XML パースエラーã«ãªã‚‹ã—ã€XML ã ã‹ã‚‰ä»–ã®èªžå½™æ··åœ¨ã§ãã‚‹ã‘ã©ã€RDF ãらã„ã—ã‹æ··ãœã¦ãªã‹ã£ãŸã—ã€XHTML æ„味ãªã‹ã£ãŸã§ã™å¤šåˆ†ã€‚ã„ã¾ã¯ HTML ã« SVG 混在ã§ã
Martin’s Hopalong Orbits Visualizer
ã“ã‚“ã«ã¡ã¯muchoã§ã™ã€‚ 見ã¤ã‘ã¦ããŸã®ã¯kaminalyãªã‚“ã§ã™ãŒã€ Mr.Doobã®three.jsを使ã£ãŸã‚³ãƒ³ãƒ†ãƒ³ãƒ„㧠｢ãŠã£ï½£ã¨ç›®ã‚’引ãサイトãŒã‚ã£ãŸã®ã§ã”紹介。 Martin's Hopalong Orbits Visualizer æ°—ã«ãªã‚‹ã®ãŒã€æ画アルゴリズム。 (x, y) -> (y - sign(x)*sqrt(abs(b*x - c)), a -x ) where a, b, c are random parameters. ãªã‚“ã¨1è¡Œï¼ Hopalong Attractorã¨ã„ã†ã‚¢ãƒ«ã‚´ãƒªã‚ºãƒ ã ãã†ã§ã™ã€‚
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}