ホームページ >ウェブフロントエンド >jsチュートリアル >THREE.JS入門チュートリアル(6)パノラマ自作の実装手順_基礎知識
THREE.JS入門チュートリアル(6)パノラマ自作の実装手順_基礎知識
- WBOYオリジナル
- 2016-05-16 17:42:521347ブラウズ
翻訳
Three.js は、優れたオープンソース WebGL ライブラリです。WebGL を使用すると、JavaScript が GPU を操作してブラウザ側で真の 3D を実現できます。ただし、このテクノロジーはまだ開発段階にあり、情報が非常に少ないため、愛好家は基本的にデモのソース コードや Three.js 自体のソース コードを通じて学ぶ必要があります。
0. はじめに
パノラマはとてもクールです。 Three.js を使用すれば、独自のパノラマを作成することはそれほど難しくありません。
パノラマを作成するには、パノラマ写真を作成するソフトウェアが必要です (翻訳者注: 特別な機器をお持ちでない場合)。 iPhone の Microsoft Photosynth ソフトウェアを使用して作成しました。
1. 環境テクスチャ
まず、環境テクスチャとは何ですか? WebGL や OpenGL では、実際には特別な立方体テクスチャです。立方体テクスチャは、シーン全体 (仮想または現実) を観察したもので、シーンの外観が立方体の内面に「貼り付け」られています。あなたが山の頂上に立って、前、左、右、上、下、そして最後に後ろを向いていると想像してください。 「立方体」の内面を見るたびに、あなたは立方体の中心に立っていることになります。立方体が十分に大きい場合、立方体の端と角を区別するのが難しくなり、広い環境にいるような錯覚を与えます。まだ理解していない場合は、Wikipedia のキューブ マップに関するエントリが非常に役立ちます。
これは素晴らしいですが、どのように機能するのでしょうか?反射や屈折のようなことを行うことができ、実際、両方の機能は WebGL のシェーダ言語である GLSL にすでに組み込まれています。それぞれ立方体の内面を表す 6 つのテクスチャ イメージをシェーダに渡し、これが立方体テクスチャであることを WebGL に伝えるだけで、上記の効果を使用できるようになります。
半軸: この用語は立方体のテクスチャに使用されます。通常、3 次元空間を記述するには 3 つの軸 (x 軸、y 軸、z 軸) を使用するため、立方体のテクスチャに使用される画像も軸の名前によって識別されます。合計 6 つの画像があり、各軸に 2 つの画像があり、1 つは正の半軸に、1 つは負の半軸に対応しています。
2. パノラマを作成します
パノラマを作成する最初のステップは、外に出て携帯電話のアプリを使用して写真を撮ることです。ロンドンの金融街を歩き、その後ガーキンで写真を撮りました。次の画像が得られました:
このアプリは画像を球体に貼り付けていることに注意してください。これは良さそうですが、立方体の内面に取り付ける必要があるため、画像をもう少し加工する必要があります。
3. 立方体に変換する
この部分を簡単に紹介します。先ほど取得した写真をMayaやBlenderなどの3Dモデリングソフトに読み込み、球の内面に貼り付けました。次に、それぞれが半軸に対応する 6 つの正投影カメラを作成しました。最後に、これら6台のカメラで撮影した画像を保存しました。完成方法は非常に複雑なのでここで説明する必要もないので、Blender スクリプト ファイルを作成し、すべての設定が完了しました。
このスクリプト ファイルを使用するには、 だけを実行します。
1. 独自のパノラマの名前をenvironment.jpg に変更します。
2. パノラマと Blender スクリプト ファイルを結合します。同じフォルダー内にあります。
3. 右側の [アニメーション] ボタンをクリックします。
5. 6 つの画像が作成されます。
とてもクールですね?これで、各半軸に一致するように画像の名前を変更できるようになりました。例:
•0001.png → pos-z.png
•0002.png → neg-x.png
•0003.png → neg-z.png
•0004.png → pos-x.png
•0005.png → neg-y.png
•0006.png → pos-y.png
4. シーンに参加します さて、 have 環境テクスチャが取得され、シーンにロードされます。 Three.js を使用すると、これが非常に簡単になります:
Three.js は、優れたオープンソース WebGL ライブラリです。WebGL を使用すると、JavaScript が GPU を操作してブラウザ側で真の 3D を実現できます。ただし、このテクノロジーはまだ開発段階にあり、情報が非常に少ないため、愛好家は基本的にデモのソース コードや Three.js 自体のソース コードを通じて学ぶ必要があります。
0. はじめに
パノラマはとてもクールです。 Three.js を使用すれば、独自のパノラマを作成することはそれほど難しくありません。
パノラマを作成するには、パノラマ写真を作成するソフトウェアが必要です (翻訳者注: 特別な機器をお持ちでない場合)。 iPhone の Microsoft Photosynth ソフトウェアを使用して作成しました。
1. 環境テクスチャ
まず、環境テクスチャとは何ですか? WebGL や OpenGL では、実際には特別な立方体テクスチャです。立方体テクスチャは、シーン全体 (仮想または現実) を観察したもので、シーンの外観が立方体の内面に「貼り付け」られています。あなたが山の頂上に立って、前、左、右、上、下、そして最後に後ろを向いていると想像してください。 「立方体」の内面を見るたびに、あなたは立方体の中心に立っていることになります。立方体が十分に大きい場合、立方体の端と角を区別するのが難しくなり、広い環境にいるような錯覚を与えます。まだ理解していない場合は、Wikipedia のキューブ マップに関するエントリが非常に役立ちます。
これは素晴らしいですが、どのように機能するのでしょうか?反射や屈折のようなことを行うことができ、実際、両方の機能は WebGL のシェーダ言語である GLSL にすでに組み込まれています。それぞれ立方体の内面を表す 6 つのテクスチャ イメージをシェーダに渡し、これが立方体テクスチャであることを WebGL に伝えるだけで、上記の効果を使用できるようになります。
半軸: この用語は立方体のテクスチャに使用されます。通常、3 次元空間を記述するには 3 つの軸 (x 軸、y 軸、z 軸) を使用するため、立方体のテクスチャに使用される画像も軸の名前によって識別されます。合計 6 つの画像があり、各軸に 2 つの画像があり、1 つは正の半軸に、1 つは負の半軸に対応しています。
2. パノラマを作成します
パノラマを作成する最初のステップは、外に出て携帯電話のアプリを使用して写真を撮ることです。ロンドンの金融街を歩き、その後ガーキンで写真を撮りました。次の画像が得られました:
このアプリは画像を球体に貼り付けていることに注意してください。これは良さそうですが、立方体の内面に取り付ける必要があるため、画像をもう少し加工する必要があります。
3. 立方体に変換する
この部分を簡単に紹介します。先ほど取得した写真をMayaやBlenderなどの3Dモデリングソフトに読み込み、球の内面に貼り付けました。次に、それぞれが半軸に対応する 6 つの正投影カメラを作成しました。最後に、これら6台のカメラで撮影した画像を保存しました。完成方法は非常に複雑なのでここで説明する必要もないので、Blender スクリプト ファイルを作成し、すべての設定が完了しました。
このスクリプト ファイルを使用するには、 だけを実行します。
1. 独自のパノラマの名前をenvironment.jpg に変更します。
2. パノラマと Blender スクリプト ファイルを結合します。同じフォルダー内にあります。
3. 右側の [アニメーション] ボタンをクリックします。
5. 6 つの画像が作成されます。
とてもクールですね?これで、各半軸に一致するように画像の名前を変更できるようになりました。例:
•0001.png → pos-z.png
•0002.png → neg-x.png
•0003.png → neg-z.png
•0004.png → pos-x.png
•0005.png → neg-y.png
•0006.png → pos-y.png
4. シーンに参加します さて、 have 環境テクスチャが取得され、シーンにロードされます。 Three.js を使用すると、これが非常に簡単になります:
コードをコピーします コードは次のとおりです:
// テクスチャ画像の URL
var urls = [
'path/to/pos-x.png',
'path/to/neg-x.png',
'path/to /pos -y.png'、
'path/to/neg-y.png'、
'path/to/pos-z.png'、
'path/to/neg-z。 png'
],
// 必要なオブジェクトにパッケージ化します。
cubemap = THREE.ImageUtils.
loadTextureCube(urls);
// 形式を RGB に設定します
cubemap。 format = THREE .RGBFormat;
あとはキューブマップをマテリアルに割り当てるだけです。 var urls = [
'path/to/pos-x.png',
'path/to/neg-x.png',
'path/to /pos -y.png'、
'path/to/neg-y.png'、
'path/to/pos-z.png'、
'path/to/neg-z。 png'
],
// 必要なオブジェクトにパッケージ化します。
cubemap = THREE.ImageUtils.
loadTextureCube(urls);
// 形式を RGB に設定します
cubemap。 format = THREE .RGBFormat;
コードをコピー コードは次のとおりです:
varmaterial = new THREE
。 MeshLambertMaterial({
color: 0xffffff,
envMap: cubemap
});
5. まとめ
パノラマを実装するのは素晴らしいことです。特に、独自の場所を WebGL パノラマとして作成できます。いつものように、このチュートリアルのソース コードをパッケージ化しました
。 MeshLambertMaterial({
color: 0xffffff,
envMap: cubemap
});
5. まとめ
パノラマを実装するのは素晴らしいことです。特に、独自の場所を WebGL パノラマとして作成できます。いつものように、このチュートリアルのソース コードをパッケージ化しました
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。