8章高度なメッシュとジオメトリ
この章では高度で複雑なジオメトリとメッシュを作成するこれまでとは異なる方法を紹介します。「5章 ジオメトリ」と「6章 高度なジオメトリとブーリアン演算」でThree.js組み込みのオブジェクトを使用して高度なジオメトリを作成する方法をいくつか紹介しました。この章ではそれらとは異なる次の2つの方法で高度なジオメトリとメッシュを作成します。
- グループ化とマージ
- ここで紹介する最初の方法ではThree.jsの組み込みの機能を使用して既存のジオメトリをグループ化またはマージします。これによって既存のオブジェクトから新しいメッシュやジオメトリを作り出すことができます。
- 外部から読み込み
- どのようにして外部ソースからメッシュとジオメトリを読み込むかを次に説明します。例えば、Blenderを使用してThree.jsがサポートしている形式でメッシュを書き出す方法について紹介します。
まずはグループ化とマージを使う方法の説明から始めましょう。この方法では新しいオブジェクトを作成するためにThree.jsで標準のグループ化やTHREE.Geometry.merge()関数を使用します。
8.1 ジオメトリのグループ化とマージ
この節ではThree.jsの基本的な機能を2つ紹介します。具体的には、複数オブジェクトをひとつにグループ化する機能と複数のメッシュを単一のメッシュにマージする機能です。
8.1.1 複数のオブジェクトをまとめてグループ化
先のいくつかの章で複数マテリアルの使用について説明した時にすでにこの内容について紹介しています。複数マテリアルを使用したジオメトリからメッシュを作成するとThree.jsはグループを作成します。つまりジオメトリを必要な数だけ複製してグループに追加し、それぞれに独自のマテリアルを設定します。このグループをメッシュのように扱うと、マテリアルを複数使用しているように見えることになります。しかし実際にはそのグループの中にはメッシュが多数含まれているわけです。 ...
Get 初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
