このサイトは、WebGLのライブラリ「Three.js」の入門サイトです。 初学者から学べるように基本から解説しつつ、発展的な内容までまとめています。このサイトを通して、ウェブの3Dのインタラクションデザインについて学んでいきましょう。 Three.js概要 Three.jsは、HTML5で3Dコンテンツを制作するためのJavaScriptライブラリです。Mr.doob氏が中心となって開発されており、オープンソースソフトウェアとして個人・商用でも無償で利用できます。 WebGLだけで3D表現をするためには、立方体1つ表示するだけでも多くのJavaScriptやGLSLコードを書く必要があり専門知識も必要です。Three.jsを使えばJavaScriptの知識だけで簡単に3Dコンテンツが作成できるため、手軽に扱えるようになります。 もともと2000年代後半のFlashの時代から、ウェブの3D
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。 | More ≫ HTML5による物理シミュレーション【拡散・波動編】 JavaScriptライブラリとCanvas 2D Context/Web Workersを使う 著者 遠藤 理平 出版社 株式会社カットシステム 発売日 2013年5月25日 判型 B5変型判、456頁 税込価格 4,410円（本体4,200円） ISBN 978-4-87783-312-1 最新のthree.jsで利用するために必要な変更点をまとめました：three.js仕様変更による変更点（PDF） フジテレビ月９ドラマ【ガリレオ】HTML5による物理シミュレー
本稿では新しいWEBページ用の言語であるHTML5＋WebGLを利用して、 ウェブブラウザ上で、物理シミュレーションの計算と描画をリアルタイムに実行する「物理シミュレータ」の作成までの手順を記述します。 本稿では、物理シミュレータの例として、任意の初期条件に対する２重振り子の時間発展を４次のルンゲクッタ法を計算する「２重振子シミュレータ」を構築します。また、本稿では WebGL を簡単に利用することができるWebGLライブラリとして著名な Three.js を用いています。 物理や工学とは無関係に、初めて Three.js を利用する人がチュートリアルとしても利用できることも意図しております。 パート１では、主に Three.js の使い方について触れました。 パート２では、拘束力のある運動の代表例である単振子を取り上げ、物理演算結果のリアルタイム描画＋物理量の時間発展の様子をグラフ化しま
本稿では新しいWEBページ用の言語であるHTML5＋WebGLを利用して、 ウェブブラウザ上で、物理シミュレーションの計算と描画をリアルタイムに実行する「物理シミュレータ」の作成までの手順を記述します。 本稿では、物理シミュレータの例として、任意の初期条件に対する２重振り子の時間発展を４次のルンゲクッタ法を計算する「２重振子シミュレータ」を構築します。また、本稿では WebGL を簡単に利用することができるWebGLライブラリとして著名な Three.js を用いています。 物理や工学とは無関係に、初めて Three.js を利用する人がチュートリアルとしても利用できることも意図しております。 パート１では、主に Three.js の使い方について触れました。 パート２では、拘束力のある運動の代表例である単振子を取り上げ、物理演算結果のリアルタイム描画＋物理量の時間発展の様子をグラフ化しま
HTML5とWebGL 初めにHTML5の位置づけについて簡単に触れます。HTML5とはこれまでのWebページ作成言語で主流だったHTML4やXHTMLの後継言語のことで、 2008年に草案がまとめられ、2014年までにウェブブラウザ各社への正式勧告を目指して策定が進められています。 HTML5は 2012年1月でもまだ「草案」段階で、仕様も流動的な準備段階であるが、開発側からもユーザ側からも非常に注目が集められています。 その大きな理由の一つに挙げられているのが、iPhoneやAndroidなどのスマートフォンの台頭による情報端末の多様化への対応のためです。つまり、様々なWEBコンテンツのクロスプラットフォーム化への重要な貢献が期待されているからです。 というのもスマートフォンの登場までは、Adobe社が提供する FLASH が動画やオーディオなどが組み合わされたマルチメディアコンテンツ
今回はthree.jsの三次元物理演算プラグインのPhysijsを使用して、ジャンプ台や、デコボコ道を通る、オフロードレースゲームサンプルを作成しました。 PhysijsはChandlerPrall氏による作成されたthree.jsの物理演算用のプラグインです。内部でammo.jsという物理演算ライブラリを使用していて、ammo.jsとthree.jsを簡単に連携させることができるようになっています。ammo.jsはBulletという有名なオープンソースの物理演算エンジンをJavaScriptに移植したものです。 Physijs このPhysijsを利用して、オフロードレースゲームのサンプルを作成しました。まずはサンプルをご覧ください。 ソースコード ※操作方法 : 前進「↑」キー、後退「↓」キー、旋回「←→」キー、カメラアングル切り替え「スペース」キー ※WebGLを使用したデモなのでC
昨今のWebサイトではWebGLを利用した3Dコンテンツをしばしば見かけるようになってきました。WebGLに対応した端末が普及してきていることや、Three.jsなどのライブラリが充実していることもあり、実案件での採用が現実的になってきているからです。 しかし、いざ3Dコンテンツを作ってみると、どこか味気のないものになってしまう事があります。そんな時はエフェクトの追加をオススメです。エフェクトを追加することで、コンテンツの見栄えが派手になったり、キャラやゲームの状態が伝わりやすくなります。今回エフェクトの例として、RPGのセーブポイントや回復ポイントで使用されそうなデモを制作してみました。 デモを別ウインドウで再生する ソースコードを見る ※このデモはThree.js r146とTypeScript 4.9によって書かれています。 本記事では、セーブポイント風なエフェクトの作成を通して、T
きっかけ Blenderでアペンドミクさん表示したい。Blenderにpmxを読み込みレンダリングまで ↓ Unityでアペンドミクさん動かしたい。[MMD4Mecanimを使用してMMDモデルにUnityで踊って頂いてみた。] (http://qiita.com/hiroyuki_hon/items/931c79164b0ffe19517f) ↓ WEBブラウザ上でMMD動くの！？MMD on three.js / three.jsで遊んでみる（29） ↓ とりあえずWEBGLと物理エンジン試してみよう ←イマココ この記事で行うこと 下のアニメーションが動く所まで。 ammo.js (JavaScriptの3D物理エンジン) の簡単な使い方 three.js (JavaScriptの3D描画ライブラリ) の簡単な使い方 この記事で行わないこと ベクトルとか物理数学関係の計算 three
このエントリーは GraphicalWeb Advent Calendar 2013、25日目のエントリーです。 自分でも、MMD を three.js で動かしてみたいと思っていたのでやってみました。 demo (音を有効にしてみてね) 音を出してお楽しみください。Chrome, Firefox, IE11 上でなら動作します。 Akihiro Oyamada (a.k.a yomotsu) I'm a Web-Front-End-Engineer, as well as a Microsoft MVP for Internet Explorer since 2011 to 2017. Playing with CSS3, SVG, WebGL and others. If you have any feedback or comments, as well as speaker inv
three.js は skeletal animation （ボーンやリグ）を持った 3D モデルを読み込み、再生することができます。3D モデルを three.js 用に書き出すため一番いいツールは Blender です。 Blender 上でボーンとアニメーションをつけていきます。Dope Sheet を使って、アニメーションを複数持たせると、three.js 上でも異なる複数のアニメーションとして利用することができます。 なお、Blender 上のボーンをつけて書きだすまでの操作は動画にしているので合わせて参考にどうぞ。 1. アニメーションを Bake するFK のみでアニメーションをさせている場合には、この設定は必要ありません。 three.js 上では基本的に FK のみ対応しています。IK や物理演算による自動計算には対応していません。そのため、FK 以外で動かしているボーン
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 前置き このエントリはHTML5 Advent Calendar 2014の12月15日の記事かつ私のQiitaデビュー作です。 three.js/examples/js見てますか・・・の前にそもそもthree.js使ってますか？残念ながらこのエントリは（別に難しいことは書いていないとはいえ）全く使ったことがない人に向けては書かれていないので、three.js使ってない人は明日以降のエントリに期待しつつ、そっとこのタブを閉じましょう。 three.js/examples/js さて、ということで本題です。みなさんthree.js/exa
○○で地球を回してみるシリーズ。 今回日程 シリーズ構成言語 １日目OpenGL で地球を回してみるテスト C/C++ ２日目DirectX で地球を回してみるテスト C/C++ ３日目Java 3D で地球を回してみるテスト Java ４日目WebGL で地球を回してみるテスト JavaScript ⇒５日目Three.js で地球を回してみるテスト JavaScript ６日目Babylon.js で地球を回してみるテストJavaScript ７日目gl.enchant.js で地球を回してみるテストJavaScript ８日目PhiloGL で地球を回してみるテストJavaScript ９日目CubicVR.js で地球を回してみるテストJavaScript 最終日Away3D で地球を回してみるテストJavaScript 追加+1Flash 版 Away3D で地球を回してみるテス
多彩な表現力のWebGLを扱いやすくする「Three.js」：Webグラフィックをハックする（5）（1/5 ページ） Three.jsはWebGLの冗長な仕様をうまくラップし、扱いやすいインターフェイスで提供するライブラリだ。サンプルコードと見比べながら、効率良く学習しよう Three.jsの基礎 本連載も5回目を迎え、いよいよ佳境に入ります。今回の題材は、Webブラウザ上で3次元グラフィックを実現する「WebGL」です。ただし、これまでと違ってAPIを直接は触れず、「Three.js」を利用します。Three.jsはWebGLの冗長な仕様をうまくラップし、扱いやすいインターフェイスで提供するライブラリです。Mr.Doob氏を中心にオープンソースで開発が進められており、WebGL界隈ではデファクトスタンダードに近い地位を築いています。 Three.jp公式サイト WebGLはこれまで解説し
Webブラウザ向けの3DCGライブラリであるthree.jsで、3D描画に2D描画*1を織り交ぜる方法を紹介します。これにより、前景と背景に自由に2D画像を描画できるようになり、ゲームのHUD表示などが可能になります。 基本的な考え方 three.jsに限った話ではありませんが、3DCGで2D描画をしたい機会は多い割に、意外と簡単ではないことが多いです。 3DCGで2D描画を行う場合、大きく分けて2つの方法が考えられます。 1. 3D描画と全く別個に描画を行う。 2. 3D描画で適切にカメラやオブジェクトをセッティングする。 1はWebGLなど3DCG支援機能を一切使わない方法です。Webならcanvas要素の前後に適当にimg要素などを配置するだけで擬似的に実現できます。欠点としては、ちゃんと要素が重なるように位置を調整する必要がある点でしょうか。 2は3DCG支援機能を利用した上で上手
光を当てていない状態 まずは光を当てない状態で物体Xを表示してみる。 <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <script src="three.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script> $(document).ready( function() { // Rendererを用意 var renderer = new THREE.WebGLRenderer( { 'canvas' : $('#canvas')[0] } ); // Cameraを用意 var camera = new THREE.PerspectiveCamera(); came
WebGLのシェーダーGLSLでの画像処理の作り方（モノクロ、セピア、モザイク、渦巻き） WebGLを使うと画像処理が実現でき、HTMLコンテンツに多彩なグラフィカル表現をもたらすことができます。たとえば、表示をモノクロームやモザイクにするといった画像エフェクトは簡単に実現できます。 WebGLはGPUの恩恵を受けれるため高速に実行でき、他の代替手法（canvas要素Context2Dオブジェクトによる画像処理等）よりも負荷が軽いのが利点です。 今回はWebGLの定番JSライブラリ「Three.js」とGLSLというシェーダー言語を使った、9種類の画像処理の実装方法を紹介します。ソースコードは「GitHub」からダウンロードして読み進めてください。 サンプルを試してみよう 次のサンプルでは複数のシェーダーを適用できます。画面左上のチェックボックスで画像加工を選択でき、ラジオボタンから画像と
WebGL Advent Calender ８日目。 まずここに、７日も過ぎての投稿になってしまったことをお詫び申し上げます・・・！ 完全に忘れていたとは口が裂けても言えないですね。 Three.jsは実は沢山のライブラリがある 試しにThree.jsのGithubリポをフォークしてみると、 本体 本体のソース・ファイル（たくさんの.jsファイル） Example build用スクリプト などなど、色んなファイルが置いてありますね。 今日見ていくのは、 Example > js ディレクトリです。 examples ├── js ├── cameras ├── controls ├── crossfade ├── curves ├── effects ├── exporters ├── geometries ├── libs ├── loaders ├── math ├── modifie
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く