約 2,199,484 件
https://w.atwiki.jp/false999/pages/23.html
cssと組み合わせで立体的な描画ができるよう 例：元素周期表@three.js three.jsホーム
https://w.atwiki.jp/threejs/pages/85.html
更新日：2013-04-26, r58 Physijsに比べて圧倒的に軽い気がする。影付けない状態では特に。 リンク cannon.js本家 ダウンロード右上zip or tar GitHub Pages Examples Doc メモ 平面 CANNON.Plane はサイズ指定不可・広さ無限の平面 （上例では市松模様の床の位置に平面を設定。床の外側にも判定があるため、赤球や緑箱は下に落ちない。 赤と青の板はPlaneではなくCANNON.ConvexPolyhedronで作っている。そのため赤球はちゃんと下に落ちる。） ベクトル CANNON.Vec3() クォターニオン CANNON.Quaternion() copyメソッドがthree.jsとは主客が反対 (例：[vector3 of three.js].copy(B) ＝ 自分自身にBをコピーする、[vector3 of cannon.js].copy(B) ＝ Bに自分をコピーする) 姿勢はquaternion。 three.js側でもQuaternionを使うには、 [mesh of three.js].useQuaternion = true; position（位置）、quaternion（回転）、 velocity（速度）、angularVelocity（角速度）
https://w.atwiki.jp/cscd/pages/236.html
オイラー角で回転 Three.jsで物体を回転させるときに最もよく使われるのはオイラー角のもよう。オイラー角の定義は オイラー角 - Wikipedia Euler Angles -- from Wolfram MathWorld にあるような感じで、ふつうはこれと同じようにz-x-zの順で回転すると思うんだが（ランダウの力学の定義もこうだったと思う）、 ロテーションについて - webgl - three.js によるとx-y-zの順で回転するらしい。別の定義でオイラー角を計算し直すのはめんどうなので、Three.jsのほうでなんとかしてくれませんか。上のリンクからeulerOrder()というメソッドを使えばいいとわかっても引数をどうすればいいのか不明だったのだけど、そのままだった。 object.eulerOrder= XYZ ; のようにする。（例えば、Streaming data from Blender into Three.js (WebGL+Websockets)に載ってた。） オイラー回転じゃなく、グローバルな座標に対して回転させたいとき javascript - How to rotate a object on axis world three.js? - Stack Overflow たぶんだけどこれ使えば任意のベクトルのまわりで回転できる。 好きな方向を向かせる 数日間、回転について色々調べてうまく行かなかったんだけど、ベクトルの方向を求めて、それにそってlookAt(position)を使ってやるのががけっきょく簡単だった。 javascript - Three.js lookat seems to be flipped - Stack Overflow ちなみにROOTにおける回転は、 TRotation にあるようにz-x-zの順。よく読んだら、ランダウ-リフシッツやゴールドスタインもこれって書いてある。 参考リンク ロテーションについて - webgl - three.js クォータニオンによる視点の移動 （WebGL（Three.js）） three.jsでの 物体の座標軸回転 - jsdo.it - Share JavaScript, HTML5 and CSS Rotate and position cylinders · Issue #1958 · mrdoob/three.js · GitHub 名前 コメント すべてのコメントを見る
https://w.atwiki.jp/555ftp617/pages/13.html
大阪玉造から徒歩約１０分！！ 南国ムード漂う ＣＡＦＥ＆ＢＡＲ 555 FIVE THREE POINTです★ 店内にはハワイアンミュージックが流れ サーフブランドCAKURAや 基礎化粧品・アロマオイルetc... もおいてます★ WIIやプレステ3なんかもおいちゃってます♪ CAFE BARなのでFOODMENUも充実してますよ～(~▼＾)p
https://w.atwiki.jp/threejs/pages/50.html
更新日：2013-04-20, r58 回転体。レイズ lathe って旋盤のことらしい。 (わかりやすくするためにワイヤーフレームも一緒に表示。わかりづらいが、図形の元になった辺(紫)も表示。） 説明 THREE.LatheGeometry ( points, segments, phiStart, phiLength ) Z軸を中心とした回転体を作る。 パラメータ points array of points |回転体にしたい図形の頂点の配列。頂点はnew THREE.Vector3(x,y,z)でベクトル作ってもいいし、単に{ x hoge, y huga, z piyo }でもおｋ。速度はどっちでも差なし。始点と終点を一緒にするとくっつく。注意： Z軸に沿った辺を書くのはやめた方がいいかもしれん segments int [= 12] |分割数。増やすと滑らかな回転体に近づく。 phiStart float [= 0] |開始角度。単位はラジアン。+X方向が0度、+Y方向が90度。 phiStart float [= 0] |中心角。単位はラジアン。 例 ジオメトリ作ってマテリアルと合わせてメッシュにしてシーンに追加するまで。 // 回転させる辺や図形の頂点の配列。 var points = [ new THREE.Vector3(30,0,-40), new THREE.Vector3(60,0,-5), new THREE.Vector3(58,0,0), new THREE.Vector3(60,0,5), new THREE.Vector3(30,0,40) ]; var lathe = new THREE.Mesh( new THREE.LatheGeometry(points, 16), // pointsで指定した図形を16段階で回転体化 new THREE.MeshLambertMaterial( { color 0x00ff00 } ) ); scene.add( lathe ); Z軸上の辺 仕様なのかバグなのかわからんが、Z軸上に辺を書くといろいろ削除されてしまう。 （左）茶碗内側底面(終点)から外側底面(始点)への辺は書かず、開いた辺のまま回転体。 （右）閉じた辺で回転体。欠けてしまう。
https://w.atwiki.jp/threejs/pages/27.html
更新日：2013-04-20, r58 (わかりやすくするためにワイヤーフレームも一緒に表示している。) 説明 THREE.SphereGeometry ( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength ) 球のジオメトリを作る。 パラメータ radius float [= 50] |半径。 widthSegments int [= 8] |経度分割数。経線が細かくなる。 heightSegments int [= 6] |緯度分割数。緯線が細かくなる。 phiStart float [= 0] |開始経度。単位はラジアン。-X方向が0度、+Z方向が90度。undefinedだと0が設定される。 phiLength float [= 2π] |経線中心角。単位はラジアン。undefinedだと2πが設定される。 thetaStart float [= 0] |開始緯度。単位はラジアン。+Y方向を北として、北極が0度、赤道が90度、南極が180度。 thetaLength float [= π] |緯線中心角。単位はラジアン。 例 ジオメトリ作ってマテリアルと合わせてメッシュにしてシーンに追加するまで。 var sphereGeo = new THREE.SphereGeometry(10); // 半径10の球 var greanMaterial = new THREE.MeshLambertMaterial( { color 0x00ff00 } ); var sphere = new THREE.Mesh( sphereGeo, greanMaterial ); scene.add( sphere );
https://w.atwiki.jp/threejs/
更新日：2016-02-10, r58 three.jsについて分からんなりにまとめたりするページ。 three.jsとは JavaScriptで3DCGが簡単に動かせるやつ。 GPUに3DCGさせるやつ(OpenGL)をブラウザ上でJavaScriptで動くようにしたやつ(WebGL)の使い勝手をよくしたライブラリ(three.js)。 (WebGLだけじゃなくCanvas、SVG、CSS3D用レンダラも扱ってたり。でもだいたい重い。) 環境 ビデオカードが新しめのOpenGLに対応してないとそもそも動かない。 WebGLブラウザ対応状況IE(Microsoft)は自社のDirectXがOpenGLと競合関係にあるので当分対応しないだろう（と思ったがIE11で対応するかもしれないとの噂が）。IEの人はGoogle Chrome Frameを入れましょう。入れてください。 入手 three.js本家downloadから。three.jsセットが入ったzipを解凍すると、buildフォルダの中にthree.js(人間が読む用)とthree.min.js(使う用に記述を圧縮したもの)がある。 (GitHubでやりたい人はそっちへ。) 入門サイト どこもそれなりにわかりやすい。 THREE.js で WebGL | ヨモツネットリビジョン r45。ヨモツさん。 多彩な表現力のWebGLを扱いやすくする「Three.js」- ＠IT の前半リビジョン r52。 HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（１／３）～リビジョン r48。 サンプル Three.js - examplesリビジョン r56。シンプルなサンプルが多くわかりやすい。zipはGitHubへのリンクから。 three.js本家トップページのfeatured projects以外のexamples。（three.jsセットのexamplesフォルダに同じものが入ってる。しかしFirefox以外はローカルのテクスチャ画像ファイルやモデルデータの読み込みを禁じており、一部サンプルは正常に動かないため、 本家のWeb上サンプル見るのが手軽。） Examples created by Yomotsu using THREE.jsリビジョン r49。モデル読み込みサンプル充実。zipは右上GitHubへのリンクから。これもヨモツさん。 中級 WebGL and Three.jsWebGL・Three.jsについて広く触れられたスライド。これもヨモツさん。 多彩な表現力のWebGLを扱いやすくする「Three.js」- ＠IT の後半リビジョン r52。 ドキュメント three.js本家 - documentationぼつぼつ未完成。three.jsセットのdocsフォルダに同じものが入ってる。 THREE.js Docソース読み支援リファレンス。
https://w.atwiki.jp/threejs/pages/89.html
更新日：2013-04-30, r58 基本 script src="examples/js/postprocessing/EffectComposer.js" /script script src="examples/js/shaders/CopyShader.js" /script !-- EffectComposerに必要 -- script src="examples/js/postprocessing/MaskPass.js" /script !-- EffectComposerに必要 -- script src="examples/js/postprocessing/RenderPass.js" /script script src="examples/js/postprocessing/ShaderPass.js" /script script src="examples/js/shaders/DotScreenShader.js" /script !-- 好きなシェーダ -- script src="examples/js/shaders/FXAAShader.js" /script !-- 好きなシェーダ -- 読んどく // EffectComposer。WebGLRendererをラップする。addPassでフィルタ追加していく。 // サイズ設定のための記述。幅window.innerWidth, 高さwindow.innerHeightだったら必要ない。 var parameters = { // EffectComposerのデフォパラメータ minFilter THREE.LinearFilter, magFilter THREE.LinearFilter, format THREE.RGBFormat, stencilBuffer false }; var renderTarget = new THREE.WebGLRenderTarget( 320, 240, parameters ); // サイズ設定 var composer = new THREE.EffectComposer( renderer, renderTarget ); // 普通のrendererをラップ // RenderPass。現在シーンを普通に描画。 composer.addPass( new THREE.RenderPass( scene, camera ) ); // ShaderPass(1) DotScreenShader。ドットスクリーン。ハーフトーン。網点。新聞の写真に使われてるようなやつ。 var dotscreen = new THREE.ShaderPass( THREE.DotScreenShader ); composer.addPass( dotscreen ); dotscreen.enabled = false; // enabledをfalseにするとこのフィルタはOFFになる // ShaderPass(2) FXAA。アンチエイリアスの一種。 var fxaa = new THREE.ShaderPass( THREE.FXAAShader ); fxaa.uniforms[ resolution ].value = new THREE.Vector2( 1 / 320, 1 / 240 ); composer.addPass( fxaa ); // ShaderPass(3) Copy to screen // ただコピーするだけのフィルタ ― var toScreen = new THREE.ShaderPass( THREE.CopyShader ); composer.addPass( toScreen ); toScreen.renderToScreen = true; // ― にrenderToScreenを有効にして // スクリーン描画させるだけのフィルタとして使う。 // 1コ前のFXAAにrenderToScreenさせることもできるが // 最後にCopyShaderかましとくといろいろ安全。 // renderToScreenの機能を持たないBloomフィルタなどを使うときや // この例でFXAAもオフにしたいときとかにも。 // render composer.render(); // renderer.render(scene, camera) の代わりにこれを使ってレンダリング WebGLRenderer 普通のレンダラ。 RenderPass+ CopyShader(renderToScreen) 現在シーンを描画するだけ。 以降、RenderPass + BloomPass (要 ConvolutionShader)+ CopyShader(renderToScreen) 明るい部分の周囲に光がぼんやりにじむライトブルーム。renderer.autoClearをfalseっておく。 BleachBypassShader 銀残し(Wikipedia)。 BrightnessContrastShader 明るさとコントラスト。 ColorCorrectionShader 色調補正。色をRGBそれぞれについて何乗して何倍するか指定。 ColorifyShader 単色塗り。指定した色についてのグレースケール。 DotScreenShader ドットスクリーン。ハーフトーン。網点(Wikipedia)。新聞の写真に使われるような画像。 EdgeShader エッジ抽出。背景色黒。 EdgeShader2 エッジ抽出。背景色透明。 FilmShader ノイズと走査線。time引数によってノイズの種を与える。 FocusShader フォーカス。画面中央から外側へ離れるに従ってゆがんでボケる。 FXAAShader アンチエイリアス。 HorizontalBlurShader 水平方向にブレる。 VerticalBlurShader 垂直方向にブレる。 HorizontalTiltShiftShader ある画面水平線から上下に離れるほど水平方向にブレる。 VerticalTiltShiftShader ある画面水平線から上下に離れるほど垂直方向にブレる。 HueSaturationShader 色相と彩度の調整。 KaleidoShader 万華鏡。 LuminosityShader 明度の抽出。 MirrorShader 鏡。 RGBShiftShader RGBのブレ。 SepiaShader セピアカラー。 SSAOShader 光の当たりにくそうなところを暗くする。環境遮蔽。 VignetteShader 画面周辺部が暗くなる。ヴィネット。口径食(Wikipedia)。 BokehShader ボケ。下例だと赤箱の角の距離でピントが合っていて、離れるに従いボケている。
https://w.atwiki.jp/threejs/pages/51.html
更新日：2013-04-21, r58 テキストジオメトリ。使い道多そうなのに下準備がちょっと面倒くさいヤツ。 説明 script type="text/javascript" src="fonts/helvetiker_regular.typeface.js" /script まずtypeface.js形式のフォントファイルを読ませないとダメ。three.js読み込んだ後に。 THREE.TextGeometry( text, { size, curveSegments, height, font, weight, style, material, extrudeMaterial, bevelEnabled, bevelSize, bevelThickness, bevelSegments, extrudePath, steps, UVGenerator, frames }) それからテキストのジオメトリを作る。 いっぱいパラメータが並んでるが、最短これで作れる（要読み込みhelvetiker_regular.typeface.js）。 var textGeo = new THREE.TextGeometry ( "Hello, World!", { } ); パラメータ size float [= 100] |高さ。 curveSegments int [= 4] |字カーブ分割数。増やすと字の曲線が滑らかに。 height float [= 50] |厚さ。名称が紛らわしいがこう書いてあるから仕方ない。 font string [= "helvetiker"] |読ませたフォントを指定。（読み込ませたtypeface.jsのfamilyNameプロパティ値を小文字で。） weight string [= "normal"] |"normal"：通常、"bold"：太字。（読み込ませたtypeface.jsのcssFontWeightプロパティ値。） style string [= "normal"] |"normal"：通常, "italics"：斜体。（読み込ませたtypeface.jsのcssFontStyleプロパティ値。） material int |フォント自体の前面・背面部分のマテリアルのインデックス。 extrudeMaterial int |側面のマテリアルのインデックス。 bevelEnabled bool [= false] |true：ベベルをつける、false：ベベルをつけない（もちろんfalseだと以下の3つのベベルパラメータも無意味に）。 bevelSize float [= 8] |アウトラインの太さ。 bevelThickness float [= 10] |押し出し量。増やすと厚くなり、それに従いベベルの傾斜がゆるやかになる。 bevelSegments int [= 3] |ベベル分割数。増やすとベベル側面が滑らかに。 extrudePath THREE.CurvePath |3Dスプラインパスを渡すとそれに沿って押し出し。heightの意味はなくなりベベルは効かなくなる。(creates Frames if .frames aren t defined) steps int [= 1] |厚さの分割数。extrudePathの押し出しが滑らかに。number of points for z-side extrusions / used for subdividing segements of extrude spline too UVGenerator Object [= new THREE.ExtrudeGeometry.WorldUVGenerator] |わからん。object that provides UV generator functions. frames THREE.TubeGeometry.FrenetFrames [= new THREE.TubeGeometry.FrenetFrames(extrudePath, steps, false)] |わからん。containing arrays of tangents, normals, binormals. 例 ジオメトリ作ってマテリアルと合わせてメッシュにしてシーンに追加するまで（helvetiker_regular.typeface.js読み込み済とする）。 var textGeo = new THREE.TextGeometry( Leg , { size 40, // 高さ40 curveSegments 1, // 字曲線分割数1。カクカク。eが8角形に見える。 height 20, // 厚さ20 // フォント指定しないとhelvetikerの非ボールド、非イタリックに bevelEnabled true, bevelSize 3, bevelThickness 5, bevelSegments 2 // ベベル有効、3太らせる、5伸ばす、ベベル分割数2 }); var greenMaterial = new THREE.MeshLambertMaterial( { color 0x00ff00 } ); var text = new THREE.Mesh( textGeo, greenMaterial ); scene.add( text ); 例2 ジオメトリ作ってマテリアルと合わせてメッシュにしてシーンに追加するまで（helvetiker_regular.typeface.js読み込み済とする）。 var textGeo = new THREE.TextGeometry( Leg , { size 40, // 高さ40 curveSegments 2, // 字曲線分割数2。eが16角形に。 height 20, // 厚さ20 font helvetiker , weight normal , style normal , // フォントhelvetiker、非ボールド、非イタリック material 0, extrudeMaterial 1, // 前面背面はインデックス0、側面はインデックス1 bevelEnabled true, bevelSize 5, bevelThickness 20, bevelSegments 3 // ベベル有効、5太らせる、20伸ばす、ベベル分割数3 }); var materialArray = [ new THREE.MeshLambertMaterial( { color 0xffff00 } ), // インデックス0に黄色マテリアル new THREE.MeshLambertMaterial( { color 0xff0000 } ) // インデックス1に赤いマテリアル ]; var textMaterial = new THREE.MeshFaceMaterial( materialArray ); // マテリアル配列をMeshFaceMaterialオブジェクトに持たせる var text = new THREE.Mesh( textGeo, textMaterial ); scene.add( text ); 例3 ジオメトリ作ってマテリアルと合わせてメッシュにしてシーンに追加するまで（helvetiker_regular.typeface.js読み込み済とする）。 // パス（スプライン曲線3D） var path = new THREE.SplineCurve3([ new THREE.Vector3(0,0,0), new THREE.Vector3(0,40,0), new THREE.Vector3(40,40,0), new THREE.Vector3(40,40,40) ]); // テキスト var text = new THREE.Mesh( new THREE.TextGeometry( Leg , { size 25, curveSegments 1, height 100, // extrudePath使うのでheightは意味がなくなる bevelEnabled true, bevelThickness 8, bevelSize 8, bevelSegments 1, // ベベル有効にしても効かなくなる material 0, extrudeMaterial 1, extrudePath path, // パスに沿って押し出し steps 32 // 32分割で }), new THREE.MeshFaceMaterial([ new THREE.MeshLambertMaterial( { color 0x00ffff } ), new THREE.MeshLambertMaterial( { color 0x0000ff } ) ]) ); scene.add( text ); パスの方も押し出しの方もまだちゃんとできてないのか、入力次第ではヘンテコな表示になる。 実際、例の Leg の g のあたり見るとズレてる。
https://w.atwiki.jp/threejs/pages/23.html
更新日：2013-04-20, r58 (わかりやすくするためにワイヤーフレームも一緒に表示している。) 説明 THREE.CircleGeometry ( radius, segments, thetaStart, thetaLength ) 円のジオメトリを作る。 パラメータ radius float [= 50] |半径。 segments int [= 8] |thetaLengthで設定した角度をこの数で分割する。円と言っているが3DCGでは実際のところ多角形である。thetaLengthが2π(360度まるまる)のとき、segments=6だと正6角形、segments=8だと正8角形になる。増やすにつれ真の円に近付く。 thetaStart float [= 0] |開始角度。単位はラジアン。+X方向が0度、+Y方向が90度。 thetaLength float [= 2π] |中心角。単位はラジアン。(2πでも円周の始点と終点はくっつかない。) 例 ジオメトリ作ってマテリアルと合わせてメッシュにしてシーンに追加するまで。 var circleGeo = new THREE.CircleGeometry(10, 16), // 半径10、正16角形 var greenMaterial = new THREE.MeshLambertMaterial( { color 0x00ff00 } ); var circle = new THREE.Mesh( circleGeo, greenMaterial ); scene.add( circle ); // circle.geometry.computeVertexNormals(); // r57以前でのバグ対策。r58以降は不要。 etc 何も設定しないとオモテ面だけなので裏返ると全く見えなくなる（上の表示例ではワイヤーフレームも一緒に出してるので見えるが）。 (わかりやすくするためにワイヤーフレームも一緒に表示している。) 前述したように正多角形もこのジオメトリで作れる。 普通に正5角形とか作ると+X向きになるので、この時点で90度回して頂点位置を書き変えておくと後々便利かもしれない（それに従って+Y方向が0度になる）。 var regularPolygon = new THREE.Mesh( new THREE.CircleGeometry(10,5), new THREE.MeshLambertMaterial( { color 0x00ff00 } ) ); scene.add( regularPolygon ); for(var i=1, len = regularPolygon.geometry.vertices.length; i len; i++){ regularPolygon.geometry.vertices[i].applyAxisAngle({x 0, y 0, z 1}, Math.PI/2); // Z軸で90度回転 } // polygon.geometry.computeVertexNormals(); // r57以前でのバグ対策。r58以降は不要。