サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。 three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。 ・シーンを作成 ・ライトを作成、位置と向きを設定、シーンに追加 ・カメラを作成、位置と向きを設定、シーンに追加 ・マテリアルを作成、色を指定 ・BoxGeometryを作成、サイズを指定 ・メッシュを作成、位置と向きを設定、シーンに追加 ・レンダラーを作成 ・レンダリングループ処理 これらのひとつでも間違えたりパラメーターが適切でな
はじめに three.jsはレンダラを変えるだけで、Canvas(2D)にもWebGLにも書き出せるっていう、色々と技術遷移中の今の時代にピッタリなJavascript 3D Engineです。 node.jsも楽しいけど、表現系でも遊んでみたい！って時に手軽にさわれる逸品です。(3Dよくわかりませんが・・・) とりあえずは準備 まず、GitHubからソース落としてきます。gitで落としてもいいし、zipファイル(右の方にダウンロードボタンがあるよ)でも落とせます。 展開すると色々入ってますが、基本必要なのは "build/Three.js" です。サンプルでは他のも利用しますが、随時配置してください。 あー、それとthree.jsのデモを見た人は、3Dモデリングソフトで作ったモデルを読み込んでグリグリ・・・みたいなのを期待してるかもしれませんが、今回そーいうの無いですよ、自分、3Dソフト
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
こんにちは。 KRAYアルバイトの浅海です。 今回は、最近ちまたで噂のThree.jsで遊んでみようとおもいます。 http://github.com/mrdoob/three.js webgl対応のブラウザで見ている方は、右上に3Dのボックスが表示されていると思います。 Three.jsを使えば、このようなことを簡単にJavascriptで実現できるのです。 半信半疑で使ってみたところ、たしかにThree.jsでは、3D特有の行列計算や数学的思考をせずとも、3Dを表示、操作することができました。 「ちょっとのプログラムで3Dができる。」 この面白さを皆さんに届けたいです。 目次 立方体を表示する 光をあてる テスクチャを貼り付ける マウスで回転させる マウスで移動させる クリック判定する Three.js web上には、HTML5のcanvasを利用した様々なサンプルページやアプリケーシ
2013年02月25日19:00 カテゴリthree.jsWebGL three.jsでテクスチャをはる場合の画像のサイズについて three.jsでテクスチャをはる場合の画像のサイズについて 100*100の大きさの面に100*100のテクスチャをはるのは特に違和感なくはれます。 100*100の大きさの面に50*50のテクスチャをはると100*100の面にうまくはりつくように画像が拡大されてはりつきます。100*100の大きさの面に10*10のテクスチャをはると、とても画像が粗くなります。 100*100の大きさの面に100*50のテクスチャをはると100*100の面にうまくはりつくように…横だけ2倍に引き延ばされて画像が拡大されてはりつきます。 100*100の大きさの面に200*200のテクスチャをはると100*100の面にうまくはりつくように画像が縮小されてはりつきます。 100
Cubeの各面に異なるマテリアルを使う 見事にハマったのでメモしておく。 //Cube var materials = []; for(var i = 0;i < 6;i++){ materials.push(new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) ); } var CUBE_WIDTH = 200; var CUBE_HEIGHT = 200; var CUBE_DEPTH = 200; var CUBE_WIDTH_SEGMENTS = null; var CUBE_HEIGHT_SEGMENTS = null; var CUBE_DEPTH_SEGMENTS = null; var cube_geo = new THREE.CubeGeometry( CUBE_WIDTH, CUBE_HEI
Three.jsの物体へのテクスチャの貼り方を書いていきます。 テクスチャを貼り付けた、実行例がこちらです。 上のやつには、これらのテクスチャを使いました。 ① ② ペイントで、さくっと作りました（笑） ①のテクスチャはキューブ（立方体）に貼り、②のテクスチャは円に貼り付けました。 xyz軸は、THREE.AxisHelperのものです。軸にはテクスチャは貼っていません（笑） では、テクスチャの貼り方を解説していきます！ テクスチャの読み込み方はこちらです。 THREE.ImageUtils.loadTexture('ファイル名'); 有名な拡張子（png,jpg)は、ほとんど使えるようです。 THREE.ImageUtils.loadTextureだけでは、読み込んだだけです。 物体にテクスチャを貼り付けるには、マテリアルのプロパティの一つ「map」を使います。 こんな感じです。 var
はじめに 数あるHTML5の機能の中でも特にビジュアルでインパクトのあるWebGL。GPUを駆使した高速3DCGレンダリングが可能なことで話題になったものの、今1つ普及しない背景には「実装があまりにも難しい」ことがあるのではないでしょうか。 three.jsの登場により大分実装のハードルが下がったものの、JavaScriptに精通したプログラマでなければ使いこなすのは容易ではなく、ビジュアル要素の強いWebGLにあってデザイナーさんの参入は難しいのが現状です。 今回紹介する「jThree（ジェイスリー）」はそんなWebGLをjQueryの記法で扱えるようにするための国産JavaScriptライブラリです。前述のthree.jsをラップしてjQueryで操作できるよう設計されており、jQueryを使ったことのある方なら手軽にWebGLコンテンツを作ることができます。本記事ではこのjThre
今回は、Three.jsで「２画面表示させる方法」を書きます。 ２画面表示とは、こんな感じの事です。 左と右、別々の事を表示させています。 ちなみに、左が立方体を上から見た画面で、右が真横からみたものです。 ２画面表示させる方法は、簡単に説明しますと、カメラを２つ作り、シーンオブジェクトに追加するというものです。 やり方を書いていきます。 ① レンダラーオブジェクトを生成した後に、こちらを追加してください。 //rendererはレンダラーオブジェクト renderer.autoClear = false これを追加しないと、描画されません。 autoClearはWebGLRendererのプロパティの一つです。 ② カメラオブジェクトを２つ作ります。 //カメラオブジェクトを２つ作る。cameraLは左画面,cameraRは右画面です。 //position,lookAtは任意で追加して
多彩な表現力の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はこれまで解説し
var projector = new THREE.Projector(); var mouseX = e.clientX -getElementPosition(renderer.domElement).left; var mouseY = e.clientY - getElementPosition(renderer.domElement).top; var x = (mouseX / renderer.domElement.width) * 2 - 1; var y = -(mouseY/renderer.domElement.height) * 2 + 1; var vector = new THREE.Vector3(x, y, 1); projector.unprojectVector(vector, camera);
前回のWebGL(Three.js)とStage3D(Away3D)の比較ですが、Mr.doobさんを始め国内外の多くの方からご指摘頂きWebGL(Three.js)版を最適化したところ、最終的にはFlash(Away3D)版と同じぐらいのパフォーマンスになりました。当初、最適化・検証不足で間違った情報を掲載してしまい申し訳ありませんでした。 さて、そのWebGL(Three.js)版を最適化した手法が有意義だったのでシェアしたいと思います。 デモの紹介 まずはこちらの2つのデモの再生を比較してみてください。WebGL対応のブラウザ(例：GoogleChrome)でご覧ください。 ▼最適化前 ▼最適化後 どうでしょう？ 圧倒的に後者のほうが滑らかに再生できているのではないかと思います。 後者のほうは配置している3Dのオブジェクト数が10倍近く多いにもかかわらずです。 ※ちなみにFlash
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
