lxc
/
threejs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
10 Commits
1 Branch
0 Tags
697 MiB
 
 
 
 
 
Branch: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
threejs/manual/ja/load-obj.html

579 lines
40 KiB
Raw Permalink Blame History

<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>でOBJファイルを読み込む</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@threejs">
<meta name="twitter:title" content="Three.js – でOBJファイルを読み込む">
<meta property="og:image" content="https://threejs.org/files/share.png">
<link rel="shortcut icon" href="/files/favicon_white.ico" media="(prefers-color-scheme: dark)">
<link rel="shortcut icon" href="/files/favicon.ico" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="/manual/resources/lesson.css">
<link rel="stylesheet" href="/manual/resources/lang.css">
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "../../build/three.module.js"
}
}
</script>
</head>
<body>
<div class="container">
<div class="lesson-title">
<h1>でOBJファイルを読み込む</h1>
</div>
<div class="lesson">
<div class="lesson-main">
<p>みんながthree.jsでやりたい事の1つに、3Dモデルをロードして表示があります。
一般的な3DフォーマットであるOBJファイルを読み込んでみましょう。</p>
<p>ネットで検索し<a href="https://www.blendswap.com/user/ahedov">ahedov</a>さんの<a href="https://www.blendswap.com/blends/view/69174">CC-BY-NC 3.0 風車3Dモデル</a>を見つけました。</p>
<div class="threejs_center"><img src="../resources/images/windmill-obj.jpg"></div>
<p>blendファイルをダウンロードし<a href="https://blender.org">Blender</a>で読み込んでOBJファイルを書き出してみました。</p>
<div class="threejs_center"><img style="width: 827px;" src="../resources/images/windmill-export-as-obj.jpg"></div>
<blockquote>
<p>注意：Blenderを使った事がない人は、Blenderは今まで使ってきた他のプログラムとは異なり驚くかもしれません。また、Blenderの基本的なUI操作を理解する時間が必要かもしれません。</p>
<p>一般的な3Dプログラムは、1000以上の機能を持つ巨大なモンスターである事も付け加えておきましょう。Blenderもその中の最も複雑なソフトウェアの1つです。
私が1996年に3D Studio Maxを初めて知った時、600ページのマニュアルの70%を3週間ほど1日数時間かけて読み通しました。
数年後にMayaを学んだ時には、3d Studio Maxで学んだ経験がMayaでも生かせました。
もし本当に3Dソフトウェアを使って3Dアセットを構築したり、既存のものを修正したりできるようになりたいなら、自分のスケジュールと時間を確保していくつかのレッスンを受ける事をお勧めします。</p>
</blockquote>
<p>いずれにしても、私は以下のExportオプションを使用しました。</p>
<div class="threejs_center"><img style="width: 239px;" src="../resources/images/windmill-export-options.jpg"></div>
<p>それでは表示してみましょう！</p>
<p><a href="lights.html">ライティングの記事</a> にあるディレクショナルライティングの例から始めて、半球ライティングの例と組み合わせて <a href="/docs/#api/ja/lights/HemisphereLight"><code class="notranslate" translate="no">HemisphereLight</code></a> と <a href="/docs/#api/ja/lights/DirectionalLight"><code class="notranslate" translate="no">DirectionalLight</code></a> を1つ作る事にしました。その結果として <a href="/docs/#api/ja/lights/HemisphereLight"><code class="notranslate" translate="no">HemisphereLight</code></a> は1つ、<a href="/docs/#api/ja/lights/DirectionalLight"><code class="notranslate" translate="no">DirectionalLight</code></a> は1つになりました。
また、ライトの調整に関連する全てのGUIを削除しました。シーンに追加していたキューブとスフィアも削除しました。</p>
<p>まず最初に <a href="/docs/#examples/loaders/OBJLoader"><code class="notranslate" translate="no">OBJLoader</code></a> のローダーをコードに含める必要があります。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {OBJLoader} from 'three/addons/loaders/OBJLoader.js';
</pre>
<p>次にOBJファイルをロードするために <a href="/docs/#examples/loaders/OBJLoader"><code class="notranslate" translate="no">OBJLoader</code></a> のインスタンスを作成し、OBJファイルのURLを渡し、ロードされたモデルをシーンに追加するコールバックを渡します。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
const objLoader = new OBJLoader();
objLoader.load('resources/models/windmill/windmill.obj', (root) =&gt; {
scene.add(root);
});
}
</pre>
<p>それを実行したらどうなりますか？</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
<div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/load-obj-no-materials.html"></iframe></div>
<a class="threejs_center" href="/manual/examples/load-obj-no-materials.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>
<p></p>
<p>これはやりたい事に近いですが、シーンにマテリアルとOBJファイルにマテリアルのパラメーターがなく、マテリアルのエラーが発生しています。</p>
<p>OBJローダーには名前とマテリアルのペアのオブジェクトを渡す事ができます。
OBJファイルをロードした時に見つけたマテリアル名で、ローダーに設定されたマテリアルのマップ内で対応するマテリアルを探します。
マテリアル名で一致するものが見つかった場合はそのマテリアルを使用します。
見つからない場合はローダーのデフォルトマテリアルを使用します。</p>
<p>OBJファイルにはマテリアルを定義するMTLファイルが付属している事があります。
今回はエクスポーターでMTLファイルも作成しました。
MTL形式はプレーンなASCIIコードなので見やすいです。MTLファイルの中身を見てみると</p>
<pre class="prettyprint showlinemods notranslate lang-mtl" translate="no"># Blender MTL File: 'windmill_001.blend'
# Material Count: 2
newmtl Material
Ns 0.000000
Ka 1.000000 1.000000 1.000000
Kd 0.800000 0.800000 0.800000
Ks 0.000000 0.000000 0.000000
Ke 0.000000 0.000000 0.000000
Ni 1.000000
d 1.000000
illum 1
map_Kd windmill_001_lopatky_COL.jpg
map_Bump windmill_001_lopatky_NOR.jpg
newmtl windmill
Ns 0.000000
Ka 1.000000 1.000000 1.000000
Kd 0.800000 0.800000 0.800000
Ks 0.000000 0.000000 0.000000
Ke 0.000000 0.000000 0.000000
Ni 1.000000
d 1.000000
illum 1
map_Kd windmill_001_base_COL.jpg
map_Bump windmill_001_base_NOR.jpg
map_Ns windmill_001_base_SPEC.jpg
</pre>
<p>5つのjpgテクスチャを参照しているマテリアルが2つありますが、テクスチャのファイルはどこにあるのでしょうか？</p>
<div class="threejs_center"><img style="width: 757px;" src="../resources/images/windmill-exported-files.png"></div>
<p>存在するのはOBJファイルとMTLファイルだけです。</p>
<p>このモデルではテクスチャはダウンロードしたblendファイルに埋め込まれている事が判明しました。
blenderで <strong>File-&gt;External Data-&gt;Unpack All Into Files</strong> を選択し、これらのファイルをエクスポートする事ができます。</p>
<div class="threejs_center"><img style="width: 828px;" src="../resources/images/windmill-export-textures.jpg"></div>
<p>そして <strong>Write Files to Current Directory</strong> を選択します。</p>
<div class="threejs_center"><img style="width: 828px;" src="../resources/images/windmill-overwrite.jpg"></div>
<p>これでテクスチャのファイルはblendファイルと同じフォルダ内の <strong>textures</strong> というサブフォルダに出力されます。</p>
<div class="threejs_center"><img style="width: 758px;" src="../resources/images/windmill-exported-texture-files.png"></div>
<p>これらのテクスチャをOBJファイルと同じフォルダにコピーしました。</p>
<div class="threejs_center"><img style="width: 757px;" src="../resources/images/windmill-exported-files-with-textures.png"></div>
<p>テクスチャを利用できるようになったのでMTLファイルをロードします。
<a href="/docs/#examples/loaders/MTLLoader"><code class="notranslate" translate="no">MTLLoader</code></a> をimportする必要があります。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
import {OBJLoader} from 'three/addons/loaders/OBJLoader.js';
+import {MTLLoader} from 'three/addons/loaders/MTLLoader.js';
</pre>
<p>まず、MTLファイルをロードします。
読込後にロードしたマテリアルを <a href="/docs/#examples/loaders/OBJLoader"><code class="notranslate" translate="no">OBJLoader</code></a>に設定して、<a href="/docs/#examples/loaders/OBJLoader"><code class="notranslate" translate="no">OBJLoader</code></a> でOBJファイルをロードします。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
+ const mtlLoader = new MTLLoader();
+ mtlLoader.load('resources/models/windmill/windmill.mtl', (mtl) =&gt; {
+ mtl.preload();
+ objLoader.setMaterials(mtl);
objLoader.load('resources/models/windmill/windmill.obj', (root) =&gt; {
scene.add(root);
});
+ });
}
</pre>
<p>それを試してみると...</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
<div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/load-obj-materials.html"></iframe></div>
<a class="threejs_center" href="/manual/examples/load-obj-materials.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>
<p></p>
<p>モデルを回転させると風車の布が消える事に注意して下さい。</p>
<div class="threejs_center"><img style="width: 528px;" src="../resources/images/windmill-missing-cloth.jpg"></div>
<p>風車の羽根のマテリアルは両面に適用する必要があり、これは<a href="materials.html">マテリアルの記事</a>で説明しました。
MTLファイルを簡単に修正する方法はありません。
私の思いつきではこの問題を修正する3つの方法があります。</p>
<ol>
<li><p>マテリアルの読込後、全てのマテリアルをループさせて両面を適用する</p>
<pre class="prettyprint showlinemods notranslate notranslate" translate="no"> const mtlLoader = new MTLLoader();
mtlLoader.load('resources/models/windmill/windmill.mtl', (mtl) =&gt; {
mtl.preload()
for (const material of Object.values(mtl.materials)) {
material.side = THREE.DoubleSide;
}
...
</pre><p>この解決策は動作しますが、理想的には両面描画は片面描画よりも遅く、両面描画が必要なマテリアルだけを両面にしたいです。</p>
</li>
<li><p>特定のマテリアルを手動で設定する</p>
<p>MTLファイルを見ると2つのマテリアルがあります。
1つは <code class="notranslate" translate="no">"winddmill"</code> と呼び、もう1つは <code class="notranslate" translate="no">"Material"</code> と呼びます。
試行錯誤の結果、風車の羽根は <code class="notranslate" translate="no">"Material"</code> というマテリアル名を使う事が分かりました。</p>
<pre class="prettyprint showlinemods notranslate notranslate" translate="no"> const mtlLoader = new MTLLoader();
mtlLoader.load('resources/models/windmill/windmill.mtl', (mtl) =&gt; {
mtl.perload();
mtl.materials.Material.side = THREE.DoubleSide;
...
</pre></li>
<li><p>MTLファイルには制限がある事に気付き、MTLファイルを使わず自前でマテリアルを作成する</p>
<pre class="prettyprint showlinemods notranslate notranslate" translate="no"> objLoader.load('resources/models/windmill/windmill.obj', (root) =&gt; {
const materials = {
Material: new THREE.MeshPhongMaterial({...}),
windmill: new THREE.MeshPhongMaterial({...}),
};
root.traverse(node =&gt; {
const material = materials[node.material?.name];
if (material) {
node.material = material;
}
})
scene.add(root);
});
</pre></li>
</ol>
<p>どれを選ぶかはあなた次第です。
1が1番簡単です。3が最も柔軟です。2はその中間で今回は2を選びます。</p>
<p>この変更で背面から見た時にはまだ風車の羽根に布が見えるはずですが、もう1つ問題があります。
近くで拡大すると濃淡のむらがある事がわかります。</p>
<div class="threejs_center"><img style="width: 700px;" src="../resources/images/windmill-blocky.jpg"></div>
<p>これはどうしたんでしょう？</p>
<p>テクスチャを見てみると、ノーマルマップにはNORと書かれた2つのテクスチャがあります。
これはノーマルマップのように見えます。
ノーマルマップは一般的に紫色ですが、バンプマップは黒と白になっています。
ノーマルマップはサーフェスの方向を表し、バンプマップはサーフェスの高さを表します。</p>
<div class="threejs_center"><img style="width: 256px;" src="../examples/resources/models/windmill/windmill_001_base_NOR.jpg"></div>
<p><a href="https://github.com/mrdoob/three.js/blob/1a560a3426e24bbfc9ca1f5fb0dfb4c727d59046/examples/js/loaders/MTLLoader.js#L432">MTLLoaderのソースを見ると</a>ノーマルマップのキーワード <code class="notranslate" translate="no">norm</code> を期待しているのでMTLファイルを編集してみましょう。</p>
<pre class="prettyprint showlinemods notranslate lang-mtl" translate="no"># Blender MTL File: 'windmill_001.blend'
# Material Count: 2
newmtl Material
Ns 0.000000
Ka 1.000000 1.000000 1.000000
Kd 0.800000 0.800000 0.800000
Ks 0.000000 0.000000 0.000000
Ke 0.000000 0.000000 0.000000
Ni 1.000000
d 1.000000
illum 1
map_Kd windmill_001_lopatky_COL.jpg
-map_Bump windmill_001_lopatky_NOR.jpg
+norm windmill_001_lopatky_NOR.jpg
newmtl windmill
Ns 0.000000
Ka 1.000000 1.000000 1.000000
Kd 0.800000 0.800000 0.800000
Ks 0.000000 0.000000 0.000000
Ke 0.000000 0.000000 0.000000
Ni 1.000000
d 1.000000
illum 1
map_Kd windmill_001_base_COL.jpg
-map_Bump windmill_001_base_NOR.jpg
+norm windmill_001_base_NOR.jpg
map_Ns windmill_001_base_SPEC.jpg
</pre>
<p>これでロードするとノーマルマップとして扱うようになり、風車の羽根の裏が描画されるようになりました。</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
<div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/load-obj-materials-fixed.html"></iframe></div>
<a class="threejs_center" href="/manual/examples/load-obj-materials-fixed.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>
<p></p>
<p>別のファイルを読み込んでみましょう。</p>
<p>ネットで検索すると<a href="http://www.gerzi.ch/">Roger Gerzner / GERIZ.3D Art</a>で作られた<a href="https://creativecommons.org/licenses/by-nc/4.0/">CC-BY-NC</a>の風車の3Dモデルを見つけました。</p>
<div class="threejs_center"><img src="../resources/images/windmill-obj-2.jpg"></div>
<p>これにはOBJファイルが既にありました。
それをロードしてみましょう（ここでMTLローダーを削除した事に注意して下さい）</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">- objLoader.load('resources/models/windmill/windmill.obj', ...
+ objLoader.load('resources/models/windmill-2/windmill.obj', ...
</pre>
<p></p><div translate="no" class="threejs_example_container notranslate">
<div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/load-obj-wat.html"></iframe></div>
<a class="threejs_center" href="/manual/examples/load-obj-wat.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>
<p></p>
<p>うーん、何も出てこない...。何が問題でしょうか？
モデルのサイズはどれくらいなんだろう？</p>
<p>Three.jsにモデルのサイズを確認してカメラを自動設定してみます。</p>
<p>まず最初にThree.jsに先ほど読み込んだシーンを含むボックスを計算し、そのサイズと中心座標を確認してみましょう。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">objLoader.load('resources/models/windmill_2/windmill.obj', (root) =&gt; {
scene.add(root);
+ const box = new THREE.Box3().setFromObject(root);
+ const boxSize = box.getSize(new THREE.Vector3()).length();
+ const boxCenter = box.getCenter(new THREE.Vector3());
+ console.log(boxSize);
+ console.log(boxCenter);
</pre>
<p><a href="debugging-javascript.html">JavaScriptコンソール</a>を見ると</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">size 2123.6499788469982
center p {x: -0.00006103515625, y: 770.0909731090069, z: -3.313507080078125}
</pre>
<p>現在カメラは <code class="notranslate" translate="no">near</code> が0.1、<code class="notranslate" translate="no">far</code> が100で約100ユニットしか表示されていません。
地上は40ユニットしかなく、この風車のモデルは2000ユニットと非常に大きく、カメラとその全ての部分が錐台の外にあります。</p>
<div class="threejs_center"><img style="width: 280px;" src="../resources/images/camera-inside-windmill.svg"></div>
<p>手動で修正することもできますが、シーンを自動でフレーム化する事もできます。</p>
<p>それを試してみましょう。
先ほど計算したボックスを使いシーン全体を表示するためにカメラの設定を調整する事ができます。カメラをどこに置くかは <em>正解はない</em> 事に注意して下さい。
どの方向から見てもどの高さでも向き合う事ができるので何かを選ぶしかないですね。</p>
<p><a href="cameras.html">カメラの記事</a>で説明したようにカメラは錐台を定義します。
視野 (<code class="notranslate" translate="no">fov</code>) と <code class="notranslate" translate="no">near</code> と <code class="notranslate" translate="no">far</code> の設定によって錐台が定義されます。
カメラが現在持っている視野がどのようなものであっても、シーンが入っているボックスが画面外が永遠に伸びていると仮定して画面外の中に収まるように、カメラはどのくらい離れている必要があるのかを知りたいです。
つまり <code class="notranslate" translate="no">near</code> は0.00000001、<code class="notranslate" translate="no">far</code> は無限大であるとすると <code class="notranslate" translate="no">near</code> は0.00000001、<code class="notranslate" translate="no">far</code> は無限大です。</p>
<p>ボックスの大きさと視野が分かっているので次のような三角形ができます。</p>
<div class="threejs_center"><img style="width: 600px;" src="../resources/images/camera-fit-scene.svg"></div>
<p>左側にカメラがあり、青い錐台が突き出しているのが分かります。
風車が入っているボックスを計算してみました。
ボックスが錐台の中に現れるように、カメラがボックスからどのくらい離れているかを計算する必要があります。</p>
<p>基本的な <em>直角三角形</em> の三角法と<a href="https://www.google.com/search?q=SOHCAHTOA">SOHCAHTOA</a>を使用します。
視野とボックスの大きさが分かっていれば <em>距離</em> を計算できます。</p>
<div class="threejs_center"><img style="width: 600px;" src="../resources/images/field-of-view-camera.svg"></div>
<p>この図に基づいて距離を計算する式は次のようになります。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">distance = halfSizeToFitOnScreen / tangent(halfFovY)
</pre>
<p>コードに変換してみましょう。
まずは <code class="notranslate" translate="no">距離</code> を計算する関数を作り、ボックスの中心から <code class="notranslate" translate="no">距離</code> 単位でカメラを移動させてみましょう。
次にカメラをボックスの <code class="notranslate" translate="no">中心</code> に向けます。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.5;
const halfFovY = THREE.MathUtils.degToRad(camera.fov * .5);
const distance = halfSizeToFitOnScreen / Math.tan(halfFovY);
// compute a unit vector that points in the direction the camera is now
// from the center of the box
const direction = (new THREE.Vector3()).subVectors(camera.position, boxCenter).normalize();
// move the camera to a position distance units way from the center
// in whatever direction the camera was from the center already
camera.position.copy(direction.multiplyScalar(distance).add(boxCenter));
// pick some near and far values for the frustum that
// will contain the box.
camera.near = boxSize / 100;
camera.far = boxSize * 100;
camera.updateProjectionMatrix();
// point the camera to look at the center of the box
camera.lookAt(boxCenter.x, boxCenter.y, boxCenter.z);
}
</pre>
<p>2つのサイズを引数に渡しています。
<code class="notranslate" translate="no">boxSize</code> と <code class="notranslate" translate="no">sizeToFitOnScreen</code> の事です。
<code class="notranslate" translate="no">boxSize</code> を渡し <code class="notranslate" translate="no">sizeToFitOnScreen</code> として使用すれば、計算でボックスが錐台の中に完全に収まるようになります。
上下に少し余分なスペースが欲しいので少し大きめのサイズにします。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
const objLoader = new OBJLoader();
objLoader.load('resources/models/windmill_2/windmill.obj', (root) =&gt; {
scene.add(root);
+ // compute the box that contains all the stuff
+ // from root and below
+ const box = new THREE.Box3().setFromObject(root);
+
+ const boxSize = box.getSize(new THREE.Vector3()).length();
+ const boxCenter = box.getCenter(new THREE.Vector3());
+
+ // set the camera to frame the box
+ frameArea(boxSize * 1.2, boxSize, boxCenter, camera);
+
+ // update the Trackball controls to handle the new size
+ controls.maxDistance = boxSize * 10;
+ controls.target.copy(boxCenter);
+ controls.update();
});
}
</pre>
<p>上記の図のように <code class="notranslate" translate="no">boxSize * 1.2</code> を渡しボックスを錐台内に収める際にボックスの上下に20%のスペースを確保する事ができます。
また <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> を更新し、カメラがシーンの中心を周回するようにしました。</p>
<p>それを試してみると...</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
<div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/load-obj-auto-camera.html"></iframe></div>
<a class="threejs_center" href="/manual/examples/load-obj-auto-camera.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>
<p></p>
<p>これはほぼ動作してますね。
カメラを回転させるためにマウスを使用し、風車が表示されるはずです。
問題は風車が大きく、箱の中心が(0,770,0)くらいにあります。
つまり、カメラをスタート地点(0, 10, 20)から中心から <code class="notranslate" translate="no">距離</code> 単位で移動させると、カメラは中心に対して相対的に風車の下をほぼ真下に移動しています。</p>
<div class="threejs_center"><img style="width: 360px;" src="../resources/images/computed-camera-position.svg"></div>
<p>ボックスの中心からカメラのある方向に横に移動するように変更してみましょう。
そのために必要なのはボックスからカメラまでのベクトルの <code class="notranslate" translate="no">y</code> をゼロにする事です。
ベクトルを正規化するとXZ平面に平行なベクトルになります。
言い換えれば地面と平行になります。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-// compute a unit vector that points in the direction the camera is now
-// from the center of the box
-const direction = (new THREE.Vector3()).subVectors(camera.position, boxCenter).normalize();
+// compute a unit vector that points in the direction the camera is now
+// in the xz plane from the center of the box
+const direction = (new THREE.Vector3())
+ .subVectors(camera.position, boxCenter)
+ .multiply(new THREE.Vector3(1, 0, 1))
+ .normalize();
</pre>
<p>風車の底を見ると小さな四角いものが見えます。それが地上面です。</p>
<div class="threejs_center"><img style="width: 365px;" src="../resources/images/tiny-ground-plane.jpg"></div>
<p>40 × 40ユニットしかないので風車に比べて小さすぎます。
風車の大きさが2000ユニットを超えているので、地上面の大きさをもっとピッタリしたものに変えてみましょう。
また、テクスチャのrepeatを調整する必要があります。
チェッカーボードはズームインしない限り、見る事さえできないような細かいものになります。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const planeSize = 40;
+const planeSize = 4000;
const loader = new THREE.TextureLoader();
const texture = loader.load('resources/images/checker.png');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.magFilter = THREE.NearestFilter;
-const repeats = planeSize / 2;
+const repeats = planeSize / 200;
texture.repeat.set(repeats, repeats);
</pre>
<p>これで風車を見る事ができます。</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
<div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/load-obj-auto-camera-xz.html"></iframe></div>
<a class="threejs_center" href="/manual/examples/load-obj-auto-camera-xz.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>
<p></p>
<p>マテリアルを元に戻してみましょう。
先ほどと同じようにテクスチャを参照しているMTLファイルがありますが、ファイルを見てみるとすぐに問題点が浮き上がります。</p>
<pre class="prettyprint showlinemods notranslate lang-shell" translate="no"> $ ls -l windmill
-rw-r--r--@ 1 gregg staff 299 May 20 2009 windmill.mtl
-rw-r--r--@ 1 gregg staff 142989 May 20 2009 windmill.obj
-rw-r--r--@ 1 gregg staff 12582956 Apr 19 2009 windmill_diffuse.tga
-rw-r--r--@ 1 gregg staff 12582956 Apr 20 2009 windmill_normal.tga
-rw-r--r--@ 1 gregg staff 12582956 Apr 19 2009 windmill_spec.tga
</pre>
<p>TARGA(.tga)ファイルが巨大です！</p>
<p>Three.jsにはTGAローダーがありますが、ほとんどのユースケースでそれを使うのは間違いです。
ネット上で見つけたランダムな3Dファイルを閲覧できるようなビューアを作っているのであれば、TGAファイルを読み込んだ方がいいかもしれません。(<a href="#loading-scenes">*</a>)</p>
<p>TGAファイルの問題点は、全てを上手く圧縮できない事です。
TGAは非常に単純な圧縮しかサポートしておらず、上記を見てみると全てのファイルが同じサイズになる確率が非常に低いため、圧縮されていない事がわかります。</p>
<p>さらにそれぞれが12MB!</p>
<p>もしTGAのファイルを使った場合、風車を見るために36MBのファイルをダウンロードしなければならないでしょう。</p>
<p>TGAのもう1つの問題はブラウザ自体がTGAをサポートしていない事です。
TGAの読み込みはJPGやPNGのようなサポートされているフォーマットの読込よりも遅くなる可能性が高いです。</p>
<p>私はthree.jsで3Dモデルを表示するためには、TGAをJPGに変換する事が最善の選択肢であると確信しています。
中身を見るとそれぞれ3チャンネル、RGBでアルファチャンネルはありません。
JPGはダウンロードするためにファイルをロス有り圧縮を行い、少ないサイズのファイルダウンロードを提供します。</p>
<p>ファイルを読み込むと2048 x 2048サイズになっていました。
私には無駄に大きいサイズに思えましたが、もちろん使用ケースによります。
1024 x 1024にしPhotoshopで50%の画質設定で保存してみました。
ファイルリストを取得すると</p>
<pre class="prettyprint showlinemods notranslate lang-shell" translate="no"> $ ls -l ../threejs.org/manual/examples/resources/models/windmill
-rw-r--r--@ 1 gregg staff 299 May 20 2009 windmill.mtl
-rw-r--r--@ 1 gregg staff 142989 May 20 2009 windmill.obj
-rw-r--r--@ 1 gregg staff 259927 Nov 7 18:37 windmill_diffuse.jpg
-rw-r--r--@ 1 gregg staff 98013 Nov 7 18:38 windmill_normal.jpg
-rw-r--r--@ 1 gregg staff 191864 Nov 7 18:39 windmill_spec.jpg
</pre>
<p>36MEGから0.55MEGまで圧縮できました！
3DCGデザイナーなどのアーティストはこの圧縮に満足していないかもしれませんので、トレードオフについて相談するようにして下さい。</p>
<p>さてMTLファイルを使用するには、JPGファイルを参照するように編集する必要があります。
TGAファイルの代わりにJPGファイルを使用します。
幸いな事にこれは単純なテキストファイル編集のみで簡単です。</p>
<pre class="prettyprint showlinemods notranslate lang-mtl" translate="no">newmtl blinn1SG
Ka 0.10 0.10 0.10
Kd 0.00 0.00 0.00
Ks 0.00 0.00 0.00
Ke 0.00 0.00 0.00
Ns 0.060000
Ni 1.500000
d 1.000000
Tr 0.000000
Tf 1.000000 1.000000 1.000000
illum 2
-map_Kd windmill_diffuse.tga
+map_Kd windmill_diffuse.jpg
-map_Ks windmill_spec.tga
+map_Ks windmill_spec.jpg
-map_bump windmill_normal.tga
-bump windmill_normal.tga
+map_bump windmill_normal.jpg
+bump windmill_normal.jpg
</pre>
<p>MTLファイルが適度なサイズのテクスチャを指しているので、それをロードする必要があります。
上記で行ったようにまずマテリアルをロードしてから <a href="/docs/#examples/loaders/OBJLoader"><code class="notranslate" translate="no">OBJLoader</code></a> に設定します。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
+ const mtlLoader = new MTLLoader();
+ mtlLoader.load('resources/models/windmill_2/windmill-fixed.mtl', (mtl) =&gt; {
+ const objLoader = new OBJLoader();
+ mtl.preload();
+ objLoader.setMaterials(mtl);
objLoader.load('resources/models/windmill/windmill.obj', (root) =&gt; {
root.updateMatrixWorld();
scene.add(root);
// compute the box that contains all the stuff
// from root and below
const box = new THREE.Box3().setFromObject(root);
const boxSize = box.getSize(new THREE.Vector3()).length();
const boxCenter = box.getCenter(new THREE.Vector3());
// set the camera to frame the box
frameArea(boxSize * 1.2, boxSize, boxCenter, camera);
// update the Trackball controls to handle the new size
controls.maxDistance = boxSize * 10;
controls.target.copy(boxCenter);
controls.update();
});
+ });
}
</pre>
<p>実際にやってみる前にいくつかの問題にぶつかりました。</p>
<p>問題1: 3つの <a href="/docs/#examples/loaders/MTLLoader"><code class="notranslate" translate="no">MTLLoader</code></a> は、マテリアルのディフューズカラーにディフューズテクスチャマップを乗算したマテリアルを作成します。</p>
<p>これは便利な機能ですがMTLファイルの上記の行を見ると</p>
<pre class="prettyprint showlinemods notranslate lang-mtl" translate="no">Kd 0.00 0.00 0.00
</pre>
<p>ディフューズ色を0に設定します。
テクスチャマップ * 0 = 黒です!
風車を作るのに使われたモデリングツールがディフューズテクスチャマップにディフューズカラーを掛けていなかった可能性があります。
だからこそ、この風車を作った3DCGデザイナーなどのアーティストの3DCG Tool上では動作してました。</p>
<p>これを修正するには、次の行を修正する必要があります。</p>
<pre class="prettyprint showlinemods notranslate lang-mtl" translate="no">Kd 1.00 1.00 1.00
</pre>
<p>テクスチャ マップ * 1 = テクスチャマップです。</p>
<p>問題点その2：スペキュラカラーも黒である</p>
<p><code class="notranslate" translate="no">Ks</code> で始まる行はスペキュラカラーを指定します。
風車を作るのに使われたモデリングソフトはスペキュラマップの色をスペキュラハイライトに使うという点でディフューズマップと似たような事をしていたのでしょう。
Three.jsではスペキュラカラーをどの程度反射させるかの入力値は、スペキュラマップの赤チャンネルのみを使用しています。
つまり、スペキュラカラーセットが必要です。</p>
<p>上記のようにMTLファイルを以下のように修正する事ができます。</p>
<pre class="prettyprint showlinemods notranslate lang-mtl" translate="no">-Ks 0.00 0.00 0.00
+Ks 1.00 1.00 1.00
</pre>
<p>問題 #3: <code class="notranslate" translate="no">windmill_normal.jpg</code> はバンプマップではなくノーマルマップです</p>
<p>上記のようにMTLファイルを編集する必要があります。</p>
<pre class="prettyprint showlinemods notranslate lang-mtl" translate="no">-map_bump windmill_normal.jpg
-bump windmill_normal.jpg
+norm windmill_normal.jpg
</pre>
<p>それを考慮し試してみるとマテリアルが一杯になるはずです。</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
<div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/load-obj-materials-windmill2.html"></iframe></div>
<a class="threejs_center" href="/manual/examples/load-obj-materials-windmill2.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>
<p></p>
<p>モデルをロードするとこのような問題が発生することがよくあります。
よくある問題には以下のようなものがあります。</p>
<ul>
<li><p>サイズを把握する必要がある</p>
<p>上記のようにカメラにシーンをフレーミングしようとさせましたが、それは必ずしも適切な事ではありません。
一般的に最も適切なのは自分でモデルを作るか、モデルをダウンロードし、3Dソフトでロードしてそのスケールを見て必要に応じて調整する事です。</p>
</li>
<li><p>方向性の違い</p>
<p>three.jsは一般的にはy = upです。モデリングツールによってはZ = upにデフォルトで設定されているものもあれば、Y = upに設定されているものもあります。
設定可能なものもあります。
モデルをロードして横になっているようなケースに遭遇した場合、モデルを回転させるコードをハックすることもできます（推奨されません）。
また、お気に入りのモデリングツールにモデルを読み込むか、コマンドラインツールを使い、ウェブサイト用の画像をダウンロードしてコードを適用するのではなく、ウェブサイト用の画像を編集するように必要な方向にオブジェクトを回転させる事もできます。</p>
</li>
<li><p>MTLファイルや間違ったマテリアル、互換性のないパラメータがない場合</p>
<p>上記ではMTLファイルを使用していましたが、マテリアルの読込には問題がありました。
OBJファイルの中身を見てどんなマテリアルがあるのかを確認したり、three.jsでOBJファイルを読み込んでシーンを歩いて全てのマテリアルをプリントアウトしたりするのも一般的です。</p>
</li>
<li><p>テクスチャが大きすぎる</p>
<p>3Dモデルの多くは建築用、映画やCM用、ゲーム用のどちらかに作られています。
建築や映画の場合は誰もがテクスチャのサイズを気にしていません。
ゲームはメモリが限られていますが、ほとんどのゲームはローカルで実行されているので、ゲーム開発者は気にしています。
Webページはできるだけ速く読みたいので、テクスチャをできるだけ小さく、かつ見栄えの良いものにする必要があります。
実際に最初の風車では、間違いなくテクスチャについて何かをするべきでした。現在のサイズ合計は10MBです!</p>
<p> <a href="textures.html">テクスチャの記事</a>で述べたようにテクスチャはメモリを取ります。
4096 x 4096に展開された50kのJPGは高速にダウンロードされますが、大量のメモリを消費する事を覚えておいて下さい。</p>
</li>
</ul>
<p>最後に見せたかったのは風車を回している所です。残念ながらOBJファイルには階層がありません。
つまり、各風車のパーツは基本的に1つのメッシュとして考えられています。
ミルの羽根は分離されていないので回転させる事はできません。</p>
<p>これがOBJファイルは良いフォーマットではない主な理由の1つです。
推測するならば、他のフォーマットよりも一般的な理由はシンプルで多くの機能をサポートしていないため、より多くの場合に動作します。
特に建築物のイメージのような静止したものを作っていて、何かをアニメーション化する必要がない場合はシーンに静的な小道具を入れるのには悪くない方法です。</p>
<p>次はgLTFシーンをロードしてみます。gLTFフォーマットは他にも多くの機能をサポートしています。</p>
</div>
</div>
</div>
<script src="/manual/resources/prettify.js"></script>
<script src="/manual/resources/lesson.js"></script>
</body></html>