|
@@ -22,7 +22,7 @@ Three.jsは多くのプリミティブがあります。
|
|
|
|
|
|
|
|
|
|
以下のプリミティブの多くは、一部または全てのパラメータにデフォルト値が設定されています。
|
|
以下のプリミティブの多くは、一部または全てのパラメータにデフォルト値が設定されています。
|
|
-そのため、必要に応じて、上手く使うことができます。
|
|
|
|
|
|
+そのため、必要に応じて、上手く使い分けることができます。
|
|
|
|
|
|
|
|
|
|
<div id="Diagram-BoxBufferGeometry" data-primitive="BoxBufferGeometry">立方体</div>
|
|
<div id="Diagram-BoxBufferGeometry" data-primitive="BoxBufferGeometry">立方体</div>
|
|
@@ -34,7 +34,7 @@ Three.jsは多くのプリミティブがあります。
|
|
押し出しでできた2次元形状、ベベルオプション付き。
|
|
押し出しでできた2次元形状、ベベルオプション付き。
|
|
これは<code>TextBufferGeometry</code>と<code>TextGeometry</code>のそれぞれの基礎になることに注意してください。</div>
|
|
これは<code>TextBufferGeometry</code>と<code>TextGeometry</code>のそれぞれの基礎になることに注意してください。</div>
|
|
<div id="Diagram-IcosahedronBufferGeometry" data-primitive="IcosahedronBufferGeometry">二十面体(20面のもの)</div>
|
|
<div id="Diagram-IcosahedronBufferGeometry" data-primitive="IcosahedronBufferGeometry">二十面体(20面のもの)</div>
|
|
-<div id="Diagram-LatheBufferGeometry" data-primitive="LatheBufferGeometry">線を回転させてできた形状。例としてはこんなところでしょうか:ランプやボーリングのピン、ろうそく、ろうそく立て、ワイングラス、ドリンクグラス、などなど...。点の連続として2次元の輪郭を与え、その輪郭を軸の周りで回転させる際に、どのくらい細分化するかthree.jsに指示することができます。</div>
|
|
|
|
|
|
+<div id="Diagram-LatheBufferGeometry" data-primitive="LatheBufferGeometry">線を回転させてできる形状。例としてはこんなところでしょうか:ランプやボーリングのピン、ろうそく、ろうそく立て、ワイングラス、ドリンクグラス、などなど...。点の連続として2次元の輪郭を与え、その輪郭を軸の周りで回転させる際に、どのくらい細分化するかthree.jsに指示することができます。</div>
|
|
<div id="Diagram-OctahedronBufferGeometry" data-primitive="OctahedronBufferGeometry">八面体(8面)</div>
|
|
<div id="Diagram-OctahedronBufferGeometry" data-primitive="OctahedronBufferGeometry">八面体(8面)</div>
|
|
<div id="Diagram-ParametricBufferGeometry" data-primitive="ParametricBufferGeometry">関数を与えることでできる表面。この関数は、グリッド上2次元の点を引数に取り、対応する3次元の点を返す。</div>
|
|
<div id="Diagram-ParametricBufferGeometry" data-primitive="ParametricBufferGeometry">関数を与えることでできる表面。この関数は、グリッド上2次元の点を引数に取り、対応する3次元の点を返す。</div>
|
|
<div id="Diagram-PlaneBufferGeometry" data-primitive="PlaneBufferGeometry">2次元の四角形</div>
|
|
<div id="Diagram-PlaneBufferGeometry" data-primitive="PlaneBufferGeometry">2次元の四角形</div>
|
|
@@ -54,7 +54,7 @@ Three.jsは多くのプリミティブがあります。
|
|
この2つの違いは、高い柔軟性とパフォーマンスです。
|
|
この2つの違いは、高い柔軟性とパフォーマンスです。
|
|
|
|
|
|
`BufferGeometry`に基づいたプリミティブはパフォーマンス志向の種類です。
|
|
`BufferGeometry`に基づいたプリミティブはパフォーマンス志向の種類です。
|
|
-ジオメトリの頂点は、GPUにアップロードして描画するのに適した配列形式へ、直接生成されます。
|
|
|
|
|
|
+ジオメトリの頂点は、GPUにアップロードして描画するのに適した配列形式へ、直接変換されます。
|
|
これは、起動が速く省メモリであることを意味しますが、データの修正により複雑なプログラミングが必要になることが多いです。
|
|
これは、起動が速く省メモリであることを意味しますが、データの修正により複雑なプログラミングが必要になることが多いです。
|
|
|
|
|
|
`Geometry`に基づいたプリミティブは柔軟で、操作しやすい種類です。
|
|
`Geometry`に基づいたプリミティブは柔軟で、操作しやすい種類です。
|
|
@@ -67,10 +67,10 @@ Three.jsは多くのプリミティブがあります。
|
|
|
|
|
|
単純な例だと、`BufferGeometry`は新しい頂点群を簡単に追加できません。
|
|
単純な例だと、`BufferGeometry`は新しい頂点群を簡単に追加できません。
|
|
使う頂点の数は作成時に宣言され、記憶領域が確保され、データが書き込まれます。
|
|
使う頂点の数は作成時に宣言され、記憶領域が確保され、データが書き込まれます。
|
|
-一方、`Geometry`は、したいように頂点群を追加できます。
|
|
|
|
|
|
+一方、`Geometry`は、みなさんがしたいように頂点群を追加できます。
|
|
|
|
|
|
[別の記事](threejs-custom-geometry.html)で、カスタムジオメトリの作成について説明します。
|
|
[別の記事](threejs-custom-geometry.html)で、カスタムジオメトリの作成について説明します。
|
|
-今はそれぞれの種類のプリミティブを作成する例を作ってみましょう。
|
|
|
|
|
|
+今はそれぞれの種類のプリミティブを作成する例を作ってみます。
|
|
[以前の記事](threejs-responsive.html)を例に始めましょう。
|
|
[以前の記事](threejs-responsive.html)を例に始めましょう。
|
|
|
|
|
|
最初の方で、背景色を指定します。
|
|
最初の方で、背景色を指定します。
|
|
@@ -143,7 +143,7 @@ function createMaterial() {
|
|
`side: THREE.DoubleSide`を設定しないと、裏側を見たときに消えてしまうことでしょう。
|
|
`side: THREE.DoubleSide`を設定しないと、裏側を見たときに消えてしまうことでしょう。
|
|
|
|
|
|
`side: THREE.DoubleSide`に**not**が設定された方が、描画が速くなります。
|
|
`side: THREE.DoubleSide`に**not**が設定された方が、描画が速くなります。
|
|
-そのため、理想的には本当に必要な時だけ設定するのが良いことを注記しておきます。
|
|
|
|
|
|
+そのため、理想的には本当に必要なときだけ設定するのが良いことを注記しておきます。
|
|
しかしこの例だと、そんなにたくさん描画しないので心配ありません。
|
|
しかしこの例だと、そんなにたくさん描画しないので心配ありません。
|
|
|
|
|
|
`addSolidGeometry`関数を作りましょう。ジオメトリを渡すと`createMaterial`によってランダムに色が付いたマテリアルを作り、`addObject`によってシーンに追加してくれます。
|
|
`addSolidGeometry`関数を作りましょう。ジオメトリを渡すと`createMaterial`によってランダムに色が付いたマテリアルを作り、`addObject`によってシーンに追加してくれます。
|
|
@@ -174,7 +174,7 @@ function addSolidGeometry(x, y, geometry) {
|
|
{{{example url="../threejs-primitives.html" }}}
|
|
{{{example url="../threejs-primitives.html" }}}
|
|
|
|
|
|
上記のパターンには、2つの特筆すべき例外があります。
|
|
上記のパターンには、2つの特筆すべき例外があります。
|
|
-一番大きなものは、たぶん`TextBufferGeometry`です。テキストのメッシュを作る時は、事前に3Dフォントデータを読み込む必要があります。このデータの読み込みは非同期的に行われるので、ジオメトリを作ろうとする前に、読み込みを待つ必要があります。フォントの読み込みにpromiseを使うと、もっと速く読み込むことができます。
|
|
|
|
|
|
+一番大きなものは、たぶん`TextBufferGeometry`です。テキストのメッシュを作るときは、事前に3Dフォントデータを読み込む必要があります。このデータの読み込みは非同期的に行われるので、ジオメトリを作ろうとする前に、読み込みを待つ必要があります。フォントの読み込みにpromiseを使うと、もっと速く読み込むことができます。
|
|
`FontLoader`を作成し、読み込みが完了するとフォントを提供してくれるpromiseを返す`loadFont`関数を作ります。
|
|
`FontLoader`を作成し、読み込みが完了するとフォントを提供してくれるpromiseを返す`loadFont`関数を作ります。
|
|
次に、`doit` と呼ばれる`async`関数を作り、`await`を使ってフォントを読み込みます。
|
|
次に、`doit` と呼ばれる`async`関数を作り、`await`を使ってフォントを読み込みます。
|
|
最後に、ジオメトリを作り、`addObject`を呼んでシーンに追加します。
|
|
最後に、ジオメトリを作り、`addObject`を呼んでシーンに追加します。
|
|
@@ -255,7 +255,7 @@ threeが知る手助けをします。
|
|
ここで繰り返し説明するよりも[このドキュメント](https://threejs.org/docs/)を覗いてもらうのが最善です。
|
|
ここで繰り返し説明するよりも[このドキュメント](https://threejs.org/docs/)を覗いてもらうのが最善です。
|
|
また、各形状の横にある上記のリンクをクリックすると、その形状のドキュメントに直接案内されます。
|
|
また、各形状の横にある上記のリンクをクリックすると、その形状のドキュメントに直接案内されます。
|
|
|
|
|
|
-上記パターンに全然はまらないクラスの組があります。
|
|
|
|
|
|
+上記パターンに全然当てはまらないクラスの組があります。
|
|
それは`PointsMaterial`と`Points`クラスです。`Points`は`LineSegments`に似ていて、
|
|
それは`PointsMaterial`と`Points`クラスです。`Points`は`LineSegments`に似ていて、
|
|
`Geometry`か`BufferGeometry`を引数に取ります。しかし、線の代わりに各頂点の点を描画します。
|
|
`Geometry`か`BufferGeometry`を引数に取ります。しかし、線の代わりに各頂点の点を描画します。
|
|
使うためには、`PointsMaterial`も渡す必要があります。
|
|
使うためには、`PointsMaterial`も渡す必要があります。
|
|
@@ -321,7 +321,7 @@ const material = new THREE.PointsMaterial({
|
|
</div>
|
|
</div>
|
|
|
|
|
|
5000個の三角形からできる右側の球体が、たった480個の三角形からできる真ん中の球体よりも良いかは、明らかではありません。
|
|
5000個の三角形からできる右側の球体が、たった480個の三角形からできる真ん中の球体よりも良いかは、明らかではありません。
|
|
-地球の地図のために1個の地球儀というように、もし少ない数の球体を描くだけなら、
|
|
|
|
|
|
+地球の地図のために1個の地球儀を作るときのように、もし少ない数の球体を描くだけなら、
|
|
10000個の三角形の球体でも悪い選択ではありません。
|
|
10000個の三角形の球体でも悪い選択ではありません。
|
|
一方で、1000個の球体を書こうとしているなら、1000個の球体におのおの10000個の三角形が
|
|
一方で、1000個の球体を書こうとしているなら、1000個の球体におのおの10000個の三角形が
|
|
かかり、一千万個の三角形になります。
|
|
かかり、一千万個の三角形になります。
|
|
@@ -329,7 +329,7 @@ const material = new THREE.PointsMaterial({
|
|
ブラウザは1秒間に6億個の三角形を描画する必要があります。
|
|
ブラウザは1秒間に6億個の三角形を描画する必要があります。
|
|
それは計算が多すぎます。
|
|
それは計算が多すぎます。
|
|
|
|
|
|
-選ぶのが簡単な時もあります。例えば、平面の細分化を選ぶこともできます。
|
|
|
|
|
|
+選ぶのが簡単なときもあります。例えば、平面の細分化を選ぶこともできます。
|
|
|
|
|
|
<div class="spread">
|
|
<div class="spread">
|
|
<div data-diagram="PlaneBufferGeometryLow"></div>
|
|
<div data-diagram="PlaneBufferGeometryLow"></div>
|
|
@@ -337,8 +337,8 @@ const material = new THREE.PointsMaterial({
|
|
</div>
|
|
</div>
|
|
|
|
|
|
左側の四角形は2個の三角形からできています。右側の四角形は200個の三角形からできています。
|
|
左側の四角形は2個の三角形からできています。右側の四角形は200個の三角形からできています。
|
|
-球体の時と異なり、四角形の場合だと、質的なトレードオフは全くありません。
|
|
|
|
-いくつかの用途、たいてい四角形を改造したり歪めたりしたいと思っている時に、細分化するだけで良いでしょう。
|
|
|
|
|
|
+球体のときと異なり、四角形の場合だと、質的なトレードオフは全くありません。
|
|
|
|
+いくつかの用途で、たいてい四角形を改造したり歪めたりしたいと思っているときに、細分化するだけで良いでしょう。
|
|
立方体も同様です。
|
|
立方体も同様です。
|
|
|
|
|
|
みなさんの状況にふさわしいものを選びましょう。
|
|
みなさんの状況にふさわしいものを選びましょう。
|