Three.js で始めるマウスでグリグリ | tyablog.net
Three.js で描画された3D空間を、マウスでグリグリ操作するための記事です。 これで、自由に3D空間を見渡す事ができますよ。 なんと! そんな機能はすでにThree.js の方で用意されているのだ。 OrbitControls というもので、 カメラから生成しておくだけで、もう充分使えるようになっている。 Three.js の便利コントローラ カメラ操作のような視点を変えるのだけじゃなく、 3Dオブジェクトを選択して、自由にドラッグしたりするコントローラも用意されている。 以下のようなものが用意されている。 TrackballControls (トラックボールでの操作) OrthographicTrackballControls FlyControls (カーソルキーによる浮遊した操作ができる) OrbitControls (マウスドラッグに追従する) PointerLockCont
Three.js入門サイト - ICS MEDIA
このサイトは、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
Three.js テクスチャの貼り方 - Three.jsを使って、作ってみた
Three.jsの物体へのテクスチャの貼り方を書いていきます。 テクスチャを貼り付けた、実行例がこちらです。 上のやつには、これらのテクスチャを使いました。 ① ② ペイントで、さくっと作りました（笑） ①のテクスチャはキューブ（立方体）に貼り、②のテクスチャは円に貼り付けました。 xyz軸は、THREE.AxisHelperのものです。軸にはテクスチャは貼っていません（笑） では、テクスチャの貼り方を解説していきます！ テクスチャの読み込み方はこちらです。 THREE.ImageUtils.loadTexture('ファイル名'); 有名な拡張子（png,jpg)は、ほとんど使えるようです。 THREE.ImageUtils.loadTextureだけでは、読み込んだだけです。 物体にテクスチャを貼り付けるには、マテリアルのプロパティの一つ「map」を使います。 こんな感じです。 var
最新版で学ぶThree.js入門 - 手軽にWebGLを扱える3Dライブラリ - ICS MEDIA
Three.jsとは、手軽に3Dコンテンツを制作できる商用利用可能なJavaScriptライブラリ。WebGLだけで3D表現をするためには、立方体1つ表示するだけでも多くのJavaScriptやGLSLコードを書く必要があり専門知識も必要です。Three.jsを使えばJavaScriptの知識だけで簡単に3Dコンテンツが作成できるため、手軽に扱えるようになります。 もともと2000年代後半のFlashの時代から、ウェブの3D表現が人気を集めてきました。今では標準技術としてのWebGLが、ゲームやビジュアライゼーションなどの多くの場面で採用されています。WebGLとThree.jsは実際に多くのサイトで使用されており、ユーザーに印象に残るウェブコンテンツには欠かせない技術となっています。また、JSライブラリの容量も126KB（GZIP）しかなく、とても軽量です。 本記事でThree.jsによ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
three.jsによる透明な背景
