今回は、Three.jsの「LatheGeometry」について、書きます。 LatheGeometryは、Three.jsのジオメトリ （形状）の一つです。 こちらは、Z軸を中心とした回転体を作るジオメトリです。 例えば、こんな形が作れます。 ワイヤーフレームで表示したもの。 LatheGeo…

今回は、Three.jsの「Detector.js」について書きます。 Detector.jsは、WebGL未サポートブラウザへの対応です。 未対応のブラウザで閲覧した場合に、このようなエラーを表示するものです。 英語のメッセージと情報へのリンクが表示されます。Detector.jsを使…

今回は、Three.jsのリサイズについて書きます。 リサイズは、ウィンドウのサイズを変更することです。 実行後に、画面のサイズをマウスとかで変更しても、自動でサイズを合わせます。 実装方法を書いていきます。 こちらは、青い球を表示するプログラムです…

今回は、Three.jsの「HemisphereLight」について書きます。 HemisphereLightは、光源です。DirectionalLightやAmbientLightなどと同じ分類です。 特徴は、scene を囲う半球 (空) からの光だそうです。 文字だけでは、よくわからないので、実行した写真がこち…

今回は、Three.jsの「視点の切り替え方法」について書きます。 今回のやつは、例えて言うなら、キーボードの１を押すと物体を上から見る視点、２を押すと物体を横から見る視点に視点を切り替えられるというものです。 やり方は、とてもシンプルです。 コード…

今回は、Three.jsの「STLLoader」について書きます。 STLLoaderは、stl（3DCGファイルの方）をThree.jsに読み込む事ができる関数です。 ちなみに、stlは、三次元形状を表現するデータを保存するファイルフォーマットのひとつです。 詳しくは、ウィキペディア…

今回は、Three.jsの「TorusGeometry」について、書きます。 TorusGeometryは、Three.jsのジオメトリ （形状）の一つです。 形は、ドーナツです。 TorusGeometryのコンストラクタです。 THREE.TorusGeometry ( radius, tube, radialSegments, tubularSegments…

今回は、Three.jsで「２画面表示させる方法」を書きます。 ２画面表示とは、こんな感じの事です。 左と右、別々の事を表示させています。 ちなみに、左が立方体を上から見た画面で、右が真横からみたものです。 ２画面表示させる方法は、簡単に説明しますと…

今回は、「OctahedronGeometry(正８面体)」について書きます。 OctahedronGeometry(正８面体)は、Three.jsのジオメトリ（形状）の一つです。 形はコレです。ひし形のような形ですね。 ワイヤーフレームだけで表示したものです。 OctahedronGeometryのコンス…

今回は、Three.jsの「TextGeometry 」について書きます。 こちらは、3Dのテキストを表示させることができるジオメトリ （形状）です。 こんなのが表示できます。 横から見ると、 こんな感じです。 TextGeometryを使用するには、気をつけることが、一つありま…

今回は、Three.jsの「FlyControls.js」について書きます。 こちらは、マウスやキーボードで視点がグルグル回せる事ができるクラスです。 以前に紹介した、「OrbitControls.js」や「TrackballControls.js」と同じ分類です。 FlyControls.jsの特徴は、空を飛ん…

今回は、Three.jsの「GridHelper」について書きます。 GridHelperは、こんなやつです。 グリッドを表示させるオブジェクトです。 実際のコードから書いていきます。 //GridHelper(大きさ, １マスの大きさ) var grid = new THREE.GridHelper(100, 50); //シー…

今回は、Three.jsの「OrbitControls.js」について書きます。 OrbitControls.jsは、マウスドラッグによる視点移動と、マウスホイールによるズームが可能になるクラスです。簡単に言いますと、マウスで視点がグルグル回せるということです。 以前に、「Trackba…

今回は、Three.jsの「三角形オブジェクト」について書きます。 こんな形の三角形の作り方を書いていきます。 横から見ると、 こんなんです。 最初は、コードから書いていきます。 コチラです。 //ジオメトリ（形状）の宣言と生成 var geometry = new THREE.G…

今回は、Three.jsの「影ができない原因」を書きます。 影が出来なかった原因と簡単な対処法を書きます。※影については、コチラを見てください↓↓ Three.js 影の描画（シャドウマッピング） - Three.jsを使って、作ってみた 影ができなかった原因は、これらが…

今回は、Three.jsの「CylinderGeometry（円柱）」について書きます。 CylinderGeometry（円柱）は、Three.jsのジオメトリ（形状）の一つです。 形はコレです。 円柱です。 こちらのジオメトリ（形状）は、少し値を変えれば、円錐などの形に変える事ができま…

今回は、Three.jsの「TrackballControls.js（トラックボールコントロール）」について書きます。 TrackballControls.js（トラックボールコントロール）は、マウスドラッグによる視点移動と、ホイールによるズームが可能になるクラスです。 簡単に言いますと…

今回は、Three.jsの「クォータニオン（Quaternion）」について書きます。 クォータニオン（Quaternion）は、簡単に言いますと、物体を回転させる方法です。 以前にも、物体を回転させる方法について書きましたが、それとは別のやり方です。 以前のやり方は、…

今回は、Three.jsの「影」について、書きます。 今回の内容は「シャドウマッピング」と専門的には言うのかな？ Three.jsの場合、影をつけるには、４つの準備が必要です。 レンダラー・・・shadowMapEnabled = true 光源・・・castShadow = true 物体1・・・c…

今回は、Three.jsのジオメトリ（形状）の一つである「PlaneGeometry（平面）」について書きます。 PlaneGeometry（平面）は、平面のジオメトリです。よく地面に使われているようです。 形はこんな感じです。 PlaneGeometryのコンストラクタです。 THREE.Plan…

今回は、Three.jsの「バンプマッピング(Bump mapping)」について書きます。 バンプマッピング(Bump mapping)は、平面である物体の表面に細かい凹凸があるように見せかける処理のことです。 Three.jsでは、簡単にバンプマッピングを利用することが出来ます。 …

今回は、Three.jsの「アンチエイリアス(antialias)の設定」について書きたいと思います。 アンチエイリアスとは、物体の輪郭がギザギザになることを抑える処理のことです。 さらに詳しく、知りたい人はこちらのWikipediaを見てください。 アンチエイリアス -…

今回は、Three.jsの「マテリアル（材質）のプロパティ」について書きます。 マテリアル（材質）のプロパティを設定することで、さまざまな質感を表現することができます。 設定のやり方もとても簡単です。この辺りはThree.jsの良い所の一つだと思います。 ※…

今回は、Three.jsの「CircleGeometry（円）」について書きます。 CircleGeometryは、円のことです。平らな円です。そして、Three.jsのジオメトリ（形状）のひとつです。 形は、こんな感じです。 まず、始めに、コンストラクタから〜 CircleGeometryのコンス…

今回は、Three.jsのジオメトリ （形状）のひとつである、「IcosahedronGeometry(正２０面体)」について書きます。 IcosahedronGeometry(正２０面体)は、こんな形です。（分かりやすくするために、ワイヤーフレームも一緒に表示しています） IcosahedronGeome…

今回は、Three.jsの「Fog(フォグ)」についてまとめます。 「フォグ」というのは、遠くに行くほど物体が白く霞んでいく処理のことです。 これを使いますと、リアルな情景を表現できたり、遠くの景色をぼかすことができます。 (※こちらのサイトに詳しく書かれ…

今回は、Three.jsの「ワイヤーフレーム（wireframe）」について書きます。 ワイヤーフレームを使うと、こんなのが出来ます。 ワイヤーフレームを使ってない状態はコレです。 ワイヤーフレームは、簡単に言いますと、3Dモデルを竹ひご細工のような線形状のみ…

３Dプリンター楽しすぎです（笑） 「３Dプリンターで印刷できる３Dモデルを無料でダウンロード出来るサイト」って、ないのかな？？ 無いなら、つくろうかな・・・あると、便利な気がする。 今回は、「Three.jsの3Dモデル」をマウスでクリックする方法を書き…

今回は、Three.jsの「TorusKnotGeometry」という物体について書いていきます。 個人的に好きな形の物体です（笑） こんな形です。 変な形です（笑）TorusKnotGeometryのコンストラクタです。 THREE.TorusKnotGeometry ( radius, tube, radialSegments, tubul…

今回は、Three.jsの「scale（大きさ）」について書きます。 scaleを使うと、物体（球,立方体など）の大きさを変更できます。scaleを使わず、このようなソースコードで実行した場合は、 //「立方体」の生成 var cube = new THREE.Mesh( //立方体の大きさ(300,…