JavaScript 3DレンダリングエンジンのThree.jsを試す
こんにちは。 KRAYアルバイトの浅海です。 今回は、最近ちまたで噂のThree.jsで遊んでみようとおもいます。 http://github.com/mrdoob/three.js webgl対応のブラウザで見ている方は、右上に3Dのボックスが表示されていると思います。 Three.jsを使えば、このようなことを簡単にJavascriptで実現できるのです。 半信半疑で使ってみたところ、たしかにThree.jsでは、3D特有の行列計算や数学的思考をせずとも、3Dを表示、操作することができました。 「ちょっとのプログラムで3Dができる。」 この面白さを皆さんに届けたいです。 目次 立方体を表示する 光をあてる テスクチャを貼り付ける マウスで回転させる マウスで移動させる クリック判定する Three.js web上には、HTML5のcanvasを利用した様々なサンプルページやアプリケーシ
多彩な表現力のWebGLを扱いやすくする「Three.js」
color、specular、ambientの違いについては、以下の画像を見ていただければ一目瞭然でしょう。colorは光が当たっている部分の色、ambientは陰の部分の色、specularはハイライト（光沢面への光源の映り込み）の色を、それぞれ調整します。 通常、物体の色はcolorで決定し、ambientにはcolorと同じ色を設定します（環境光の色や強さはAmbientLightで調整できます）。specularは一般的に無彩色で、面の光沢によって明るさを調整すると良いでしょう。布のように光沢のまったくない物体であれば、specularは0になります。shininessも面の光沢に関係するパラメータで、だいたい10～200程度の範囲で、光沢のある面ほど大きな値を設定します（小さく、鋭いハイライトになります）。 さらに、金属の質感を表現したい場合は、metalをtrueにすると良いか
多彩な表現力のWebGLを扱いやすくする「Three.js」
多彩な表現力のWebGLを扱いやすくする「Three.js」：Webグラフィックをハックする（5）（5/5 ページ） インタラクティブ性を取り入れる ここまで、Three.jsのさまざまな機能の使用方法を解説してきました。読者の皆さんが「これは面白い、自分でも何か作ってみよう！」と感じられていたら幸いです。 しかし、記事中で取り上げてきたサンプルコードは、いずれも一方的に映像を流し続けるだけのものでした。3次元映像を自分で操作できるのがリアルタイム3Dグラフィックの醍醐味ですから、このままでは物足りないですね。そこで、マウスによるカメラ操作などの基本的なインタラクティビティの実現方法を解説して、この記事の締めくくりとします。 リサイズへの対応など これまでのサンプルコードには、インタラクティブ性の欠如の他にも以下の欠点がありました。 WebGLをサポートしないブラウザへの対応がない 画面サ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Three.js の WebGL+Canvas の実行サンプル / 二平面とローポリゴン 3D モデル : GINPRO / SQLの窓と銀プログラマ
