多彩な表現力のWebGLを扱いやすくする「Three.js」
多彩な表現力の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はこれまで解説し
Three.jsでいろいろな図形を描いてみる | mwSoft
ShapeGeometry ShapeGeometryはShapeで2Dの図形を描く。 <!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を用意 renderer = new THREE.WebGLRenderer( { 'canvas' : $('#canvas')[0] } ); renderer.setSize(300, 300); // Cameraを用意 camera = new TH
Three.jsの基本⑥ - Three.jsを使って、作ってみた
今回は、Three.jsのGeometry（ジオメトリ ）をやります。 Geometryは、球や立方体などの実際に表示する物体の事です。形状と言ったほうがいいのかな（笑） ざっくりというと、今回は、物体の生成から位置や色の設定を中心にやっていきます（笑） 「introduction.html」では、この部分が物体を表示している所です。 /*------------Geometry処理(物体表示)⑤-------------*/ var sphere,plane,axis; //グローバル変数 function initObject(){ //球体を表示する部分 sphere = new THREE.Mesh( //球のジオメトリ （半径：２００） new THREE.SphereGeometry(200), //マテリアル （材質） new THREE.MeshPhongMaterial(
Monacaで始めるthree.js 第1回 ～3Dモデルを表示する～
こんにちは、Monacaチームで3Dモデリングを担当している浦本です。 three.js（ http://threejs.org/ ）とは、ブラウザベースでリアルタイムな3Dグラフィックス描画を可能とするJSライブラリです。FlashやUnityなどの外部プラグインに依存せずにWebGLを利用して描画が行われるため、HTML5アプリに手軽に3Dコンテンツを組み込むことができます！今回はMonacaを用いて、three.jsをモバイルアプリで利用してみたいと思います。 ■デモ 今回作るのは3Dモデルファイルを読み込んで表示するだけの簡単なサンプルアプリです。 マウスを動かすと、Monaca公式キャラクターであるモナカマンがぬるぬる動きます。 ■動作環境 WebGLの動作環境として、AndroidアプリであればAndroid 4.0以上、かつCrosswalkを有効にしていることが必要です。M
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞ 小山田 晃浩（株式会社 ピクセルグリッド） WebGLはとても高度な技術である一方、APIは低レベルであるためそのまま使うにはどうしても冗長な準備を行う必要があります。一方で、JavaScriptライブラリーを通して高レベルなAPIとしてWebGLを利用する方法があります。こうしたJavaScriptライブラリーとしてはthree.js、Away3D.js、Babylon.jsなどが有名です。その中でも特に人気があるthree.jsを通して、WebGLを利用する方法を解説します。(three.jsのリビジョンは執筆現在の最新であるr65を利用します) three.jsを手に入れる three.jsはhttp://threejs.org/から手に入れることができます。downloadから、zipファイルを手に入れま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
