Gecko [ dp-client.com ]

Name	Size	Permission
align-html-elements-to-3d.html	34.11 KB	-rw-r--r--
backgrounds.html	14.5 KB	-rw-r--r--
billboards.html	15.38 KB	-rw-r--r--
cameras.html	31.33 KB	-rw-r--r--
canvas-textures.html	19.04 KB	-rw-r--r--
cleanup.html	1.62 KB	-rw-r--r--
custom-buffergeometry.html	25.29 KB	-rw-r--r--
debugging-glsl.html	8 KB	-rw-r--r--
debugging-javascript.html	32.43 KB	-rw-r--r--
fog.html	14.84 KB	-rw-r--r--
fundamentals.html	21.88 KB	-rw-r--r--
game.html	1.63 KB	-rw-r--r--
indexed-textures.html	31.49 KB	-rw-r--r--
lights.html	29.56 KB	-rw-r--r--
load-gltf.html	36 KB	-rw-r--r--
load-obj.html	39.52 KB	-rw-r--r--
material-table.html	1.67 KB	-rw-r--r--
materials.html	21.2 KB	-rw-r--r--
multiple-scenes.html	29.63 KB	-rw-r--r--
offscreencanvas.html	48.19 KB	-rw-r--r--
optimize-lots-of-objects-anima...	24.44 KB	-rw-r--r--
optimize-lots-of-objects.html	27.12 KB	-rw-r--r--
picking.html	22.49 KB	-rw-r--r--
post-processing-3dlut.html	27.99 KB	-rw-r--r--
post-processing.html	18.46 KB	-rw-r--r--
prerequisites.html	21.03 KB	-rw-r--r--
primitives.html	25.51 KB	-rw-r--r--
rendering-on-demand.html	12.96 KB	-rw-r--r--
rendertargets.html	8.75 KB	-rw-r--r--
responsive.html	17.9 KB	-rw-r--r--
scenegraph.html	32.03 KB	-rw-r--r--
setup.html	5.28 KB	-rw-r--r--
shadertoy.html	25.61 KB	-rw-r--r--
shadows.html	30.69 KB	-rw-r--r--
textures.html	35.99 KB	-rw-r--r--
tips.html	18.07 KB	-rw-r--r--
transparency.html	20.81 KB	-rw-r--r--
voxel-geometry.html	1.69 KB	-rw-r--r--
webxr-basics.html	1.6 KB	-rw-r--r--
webxr-look-to-select.html	1.66 KB	-rw-r--r--
webxr-point-to-select.html	1.68 KB	-rw-r--r--

Code Editor : load-gltf.html

<!DOCTYPE html><html lang="ja"><head>
    <meta charset="utf-8">
    <title>でGLFTファイルを読み込む</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 – でGLFTファイルを読み込む">
    <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)">

<p><a href="load-obj.html">OBJファイルの読み込みのコード例</a>から始めて、OBJを読み込むコードを削除し、GLTFを読み込むコードに置き換えました。</p>
<p>以前のOBJコードは</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const mtlLoader = new MTLLoader();
mtlLoader.loadMtl('resources/models/windmill/windmill-fixed.mtl', (mtl) =&gt; {
  mtl.preload();
  mtl.materials.Material.side = THREE.DoubleSide;
  objLoader.setMaterials(mtl);
  objLoader.load('resources/models/windmill/windmill.obj', (event) =&gt; {
    const root = event.detail.loaderRootNode;
    scene.add(root);
    ...
  });
});
</pre>
<p>新しいGLTFのコードは</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
  const gltfLoader = new GLTFLoader();
  const url = 'resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf';
  gltfLoader.load(url, (gltf) =&gt; {
    const root = gltf.scene;
    scene.add(root);
    ...
  });
</pre>
<p>自動フレーミングのコードは以前のままです。</p>
<p>また <a href="/docs/#examples/loaders/OBJLoader"><code class="notranslate" translate="no">OBJLoader</code></a> を取り除き <a href="/docs/#examples/loaders/GLTFLoader"><code class="notranslate" translate="no">GLTFLoader</code></a> を含める必要があります。</p>
<pre class="prettyprint showlinemods notranslate lang-html" translate="no">-import {LoaderSupport} from 'three/addons/loaders/LoaderSupport.js';
-import {OBJLoader} from 'three/addons/loaders/OBJLoader.js';
-import {MTLLoader} from 'three/addons/loaders/MTLLoader.js';
+import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
</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-gltf.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/load-gltf.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p>魔法だ！テクスチャーも含めて上手くいっています。</p>
<p>次に走り回る車をアニメーションしたかったので、シーンに車が別のエンティティとして設定されているか、それが使用できるように設定されているか確認する必要があります。</p>
<p><a href="debugging-javascript.html">JavaScriptコンソール</a>にシーングラフをダンプするコードを書いてみました。</p>
<p>シーングラフを表示するコードです。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function dumpObject(obj, lines = [], isLast = true, prefix = '') {
  const localPrefix = isLast ? '└─' : '├─';
  lines.push(`${prefix}${prefix ? localPrefix : ''}${obj.name || '*no-name*'} [${obj.type}]`);
  const newPrefix = prefix + (isLast ? '  ' : '│ ');
  const lastNdx = obj.children.length - 1;
  obj.children.forEach((child, ndx) =&gt; {
    const isLast = ndx === lastNdx;
    dumpObject(child, lines, isLast, newPrefix);
  });
  return lines;
}
</pre>
<p>そして、シーンを読み込み直後に呼び出します。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const gltfLoader = new GLTFLoader();
gltfLoader.load('resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf', (gltf) =&gt; {
  const root = gltf.scene;
  scene.add(root);
  console.log(dumpObject(root).join('\n'));
</pre>
<p><a href="../examples/load-gltf-dump-scenegraph.html">実行すると</a> このようなリストが得られました。</p>
<pre class="prettyprint showlinemods notranslate lang-text" translate="no">OSG_Scene [Scene]
  └─RootNode_(gltf_orientation_matrix) [Object3D]
    └─RootNode_(model_correction_matrix) [Object3D]
      └─4d4100bcb1c640e69699a87140df79d7fbx [Object3D]
        └─RootNode [Object3D]
          │ ...
          ├─Cars [Object3D]
          │ ├─CAR_03_1 [Object3D]
          │ │ └─CAR_03_1_World_ap_0 [Mesh]
          │ ├─CAR_03 [Object3D]
          │ │ └─CAR_03_World_ap_0 [Mesh]
          │ ├─Car_04 [Object3D]
          │ │ └─Car_04_World_ap_0 [Mesh]
          │ ├─CAR_03_2 [Object3D]
          │ │ └─CAR_03_2_World_ap_0 [Mesh]
          │ ├─Car_04_1 [Object3D]
          │ │ └─Car_04_1_World_ap_0 [Mesh]
          │ ├─Car_04_2 [Object3D]
          │ │ └─Car_04_2_World_ap_0 [Mesh]
          │ ├─Car_04_3 [Object3D]
          │ │ └─Car_04_3_World_ap_0 [Mesh]
          │ ├─Car_04_4 [Object3D]
          │ │ └─Car_04_4_World_ap_0 [Mesh]
          │ ├─Car_08_4 [Object3D]
          │ │ └─Car_08_4_World_ap8_0 [Mesh]
          │ ├─Car_08_3 [Object3D]
          │ │ └─Car_08_3_World_ap9_0 [Mesh]
          │ ├─Car_04_1_2 [Object3D]
          │ │ └─Car_04_1_2_World_ap_0 [Mesh]
          │ ├─Car_08_2 [Object3D]
          │ │ └─Car_08_2_World_ap11_0 [Mesh]
          │ ├─CAR_03_1_2 [Object3D]
          │ │ └─CAR_03_1_2_World_ap_0 [Mesh]
          │ ├─CAR_03_2_2 [Object3D]
          │ │ └─CAR_03_2_2_World_ap_0 [Mesh]
          │ ├─Car_04_2_2 [Object3D]
          │ │ └─Car_04_2_2_World_ap_0 [Mesh]
          ...
</pre>
<p>この結果から全ての車が <code class="notranslate" translate="no">"Cars"</code> という名前の親の下にある事がわかります。</p>
<pre class="prettyprint showlinemods notranslate lang-text" translate="no">*          ├─Cars [Object3D]
          │ ├─CAR_03_1 [Object3D]
          │ │ └─CAR_03_1_World_ap_0 [Mesh]
          │ ├─CAR_03 [Object3D]
          │ │ └─CAR_03_World_ap_0 [Mesh]
          │ ├─Car_04 [Object3D]
          │ │ └─Car_04_World_ap_0 [Mesh]
</pre>
<p>そこで簡単なテストとして、"Cars"ノードの全ての子をY軸の周りに回転させようと思いました。</p>
<p>シーンを読み込み後に"Cars"ノードを調べて結果を保存しました。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+let cars;
{
  const gltfLoader = new GLTFLoader();
  gltfLoader.load('resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf', (gltf) =&gt; {
    const root = gltf.scene;
    scene.add(root);
+    cars = root.getObjectByName('Cars');
</pre>
<p><code class="notranslate" translate="no">render</code> 関数で <code class="notranslate" translate="no">cars</code> の全ての子の回転を設定します。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+function render(time) {
+  time *= 0.001;  // convert to seconds

if (resizeRendererToDisplaySize(renderer)) {
    const canvas = renderer.domElement;
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();
  }

+  if (cars) {
+    for (const car of cars.children) {
+      car.rotation.y = time;
+    }
+  }

renderer.render(scene, camera);

requestAnimationFrame(render);
}
</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-gltf-rotate-cars.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/load-gltf-rotate-cars.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p>うーん、残念ながら子のオリジンが回転目的のために設定されておらず、アニメーション用に設計されてないようです。トラックの回転方向が間違っています。</p>
<p>3Dで何かする場合の重要なポイントは、事前に計画を立ててアセットを設計する必要があります。アセットを正しい場所に配置し、正しいスケールになるようにデザインします。</p>
<p>私は3DCGアーティストではなくBlenderもよく知らないので、ハックしてみます。
それぞれの車で別の <a href="/docs/#api/ja/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a> を親にします。
次に <a href="/docs/#api/ja/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a> オブジェクトを移動させて車を移動させます。
個々に車のオリジンに <a href="/docs/#api/ja/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a> を設定して向きを変えられるので、必要な位置に設定する事ができます。</p>
<p>シーングラフのリストを見返すと "Car_08", "CAR_03", "Car_04" の3種類しかないようです。上手くいけば3種類の調整で済みます。</p>
<p>コードを以下のように変更しました。
それぞれの車でインスタンス作成した <a href="/docs/#api/ja/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a> を親にし、その <a href="/docs/#api/ja/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a> をシーンに追加します。
<em>車種</em>ごとの設定で向きを固定し、車の親の <a href="/docs/#api/ja/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a> の <code class="notranslate" translate="no">cars</code> 配列を追加します。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-let cars;
+const cars = [];
{
  const gltfLoader = new GLTFLoader();
  gltfLoader.load('resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf', (gltf) =&gt; {
    const root = gltf.scene;
    scene.add(root);

-    cars = root.getObjectByName('Cars');
+    const loadedCars = root.getObjectByName('Cars');
+    const fixes = [
+      { prefix: 'Car_08', rot: [Math.PI * .5, 0, Math.PI * .5], },
+      { prefix: 'CAR_03', rot: [0, Math.PI, 0], },
+      { prefix: 'Car_04', rot: [0, Math.PI, 0], },
+    ];
+
+    root.updateMatrixWorld();
+    for (const car of loadedCars.children.slice()) {
+      const fix = fixes.find(fix =&gt; car.name.startsWith(fix.prefix));
+      const obj = new THREE.Object3D();
+      car.getWorldPosition(obj.position);
+      car.position.set(0, 0, 0);
+      car.rotation.set(...fix.rot);
+      obj.add(car);
+      scene.add(obj);
+      cars.push(obj);
+    }
     ...
</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-gltf-rotate-cars-fixed.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/load-gltf-rotate-cars-fixed.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p>さあ、追い回してみましょう。</p>
<p>簡単なドライビングシステムを作るのはこの記事では無理がありますが、
その代わりに入り組んだパスを1本にし、そのパスに車を乗せる事ができそうです。
以下の画像はBlenderでパスを作っている途中です。</p>
<div class="threejs_center"><img src="../resources/images/making-path-for-cars.jpg" style="width: 1094px"></div>

<p>Blenderからパスのデータを取り出す方法が必要でした。
幸運な事にパスだけを選択し、"write nurbs"をチェックしてobjをエクスポートできました。</p>
<div class="threejs_center"><img src="../resources/images/blender-export-obj-write-nurbs.jpg" style="width: 498px"></div>

<p>OBJファイルを開くと頂点のリストを得る事ができました。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const controlPoints = [
  [1.118281, 5.115846, -3.681386],
  [3.948875, 5.115846, -3.641834],
  [3.960072, 5.115846, -0.240352],
  [3.985447, 5.115846, 4.585005],
  [-3.793631, 5.115846, 4.585006],
  [-3.826839, 5.115846, -14.736200],
  [-14.542292, 5.115846, -14.765865],
  [-14.520929, 5.115846, -3.627002],
  [-5.452815, 5.115846, -3.634418],
  [-5.467251, 5.115846, 4.549161],
  [-13.266233, 5.115846, 4.567083],
  [-13.250067, 5.115846, -13.499271],
  [4.081842, 5.115846, -13.435463],
  [4.125436, 5.115846, -5.334928],
  [-14.521364, 5.115846, -5.239871],
  [-14.510466, 5.115846, 5.486727],
  [5.745666, 5.115846, 5.510492],
  [5.787942, 5.115846, -14.728308],
  [-5.423720, 5.115846, -14.761919],
  [-5.373599, 5.115846, -3.704133],
  [1.004861, 5.115846, -3.641834],
];
</pre>
<p>THREE.jsにはいくつかの曲線クラスがあります。
<a href="/docs/#api/ja/extras/curves/CatmullRomCurve3"><code class="notranslate" translate="no">CatmullRomCurve3</code></a> が使えそうな気がしたので <a href="/docs/#api/ja/extras/curves/CatmullRomCurve3"><code class="notranslate" translate="no">CatmullRomCurve3</code></a> を使ってみた。
この曲線は頂点を通る滑らかな曲線を作ります。</p>
<p>実際にはこれらの頂点を直接入力すると次のような曲線が生成されます。</p>
<div class="threejs_center"><img src="../resources/images/car-curves-before.png" style="width: 400px"></div>

<p>しかし、もっと角をシャープにして欲しいです。
いくつかの頂点を追加し計算すれば、望んだ角度が得られる気がします。
各頂点のペアで2つのポイントの間の10%と90%の道を計算し、その結果を <a href="/docs/#api/ja/extras/curves/CatmullRomCurve3"><code class="notranslate" translate="no">CatmullRomCurve3</code></a> に渡します。</p>
<p>このような曲線が得られます。</p>
<div class="threejs_center"><img src="../resources/images/car-curves-after.png" style="width: 400px"></div>

<p>曲線を作成するコードは以下の通りです。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">let curve;
let curveObject;
{
  const controlPoints = [
    [1.118281, 5.115846, -3.681386],
    [3.948875, 5.115846, -3.641834],
    [3.960072, 5.115846, -0.240352],
    [3.985447, 5.115846, 4.585005],
    [-3.793631, 5.115846, 4.585006],
    [-3.826839, 5.115846, -14.736200],
    [-14.542292, 5.115846, -14.765865],
    [-14.520929, 5.115846, -3.627002],
    [-5.452815, 5.115846, -3.634418],
    [-5.467251, 5.115846, 4.549161],
    [-13.266233, 5.115846, 4.567083],
    [-13.250067, 5.115846, -13.499271],
    [4.081842, 5.115846, -13.435463],
    [4.125436, 5.115846, -5.334928],
    [-14.521364, 5.115846, -5.239871],
    [-14.510466, 5.115846, 5.486727],
    [5.745666, 5.115846, 5.510492],
    [5.787942, 5.115846, -14.728308],
    [-5.423720, 5.115846, -14.761919],
    [-5.373599, 5.115846, -3.704133],
    [1.004861, 5.115846, -3.641834],
  ];
  const p0 = new THREE.Vector3();
  const p1 = new THREE.Vector3();
  curve = new THREE.CatmullRomCurve3(
    controlPoints.map((p, ndx) =&gt; {
      p0.set(...p);
      p1.set(...controlPoints[(ndx + 1) % controlPoints.length]);
      return [
        (new THREE.Vector3()).copy(p0),
        (new THREE.Vector3()).lerpVectors(p0, p1, 0.1),
        (new THREE.Vector3()).lerpVectors(p0, p1, 0.9),
      ];
    }).flat(),
    true,
  );
  {
    const points = curve.getPoints(250);
    const geometry = new THREE.BufferGeometry().setFromPoints(points);
    const material = new THREE.LineBasicMaterial({color: 0xff0000});
    curveObject = new THREE.Line(geometry, material);
    scene.add(curveObject);
  }
}
</pre>
<p>このコードの最初の部分は曲線を作ります。
コードの2番目の部分は曲線から250頂点を生成し、その250頂点を結んで作られた線を表示するオブジェクトを作成します。</p>
<p><a href="../examples/load-gltf-car-path.html">このサンプル</a>を実行してもカーブが見えませんでした。
見えるようにするために、深度テストを無視して最後にレンダリングするようにしました。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">    curveObject = new THREE.Line(geometry, material);
+    material.depthTest = false;
+    curveObject.renderOrder = 1;
</pre>
<p>そして、カーブがあまりにも小さすぎる事に気がつきました。</p>
<div class="threejs_center"><img src="../resources/images/car-curves-too-small.png" style="width: 498px"></div>

<p>Blenderで階層を確認してみると、3DCGアーティストが全ての親となるノードをスケーリングしていました。</p>
<div class="threejs_center"><img src="../resources/images/cars-scale-0.01.png" style="width: 342px;"></div>

<p>リアルタイムの3Dアプリではスケーリングが悪です。
リアルタイム3Dを行う際には、様々な問題が発生し不満が尽きません。
3Dアプリ開発ではシーン全体を拡大縮小するのはとても簡単ですが、3DCGアーティストはこれを知らない事が多いです。
もしあなたがリアルタイムの3Dアプリを作ろうと決めたら、3DCGアーティストには絶対に何もスケールしないようにお願いする事をお勧めします。
スケールを変更する場合は、そのスケールを頂点に適用する方法を見つける必要があります。</p>
<p>スケールだけでなく、その親である <code class="notranslate" translate="no">Cars</code> ノードによって回転されオフセットされます。
これでは実行時にワールド座標での車の移動が困難になります。
はっきり言うと、この場合はワールド座標で車を走らせたいのでこの問題が出てきます。
月が地球を中心に回転しているようなローカル座標で操作される場合、これはあまり問題ではありません。</p>
<p>上記で書いたシーングラフをダンプする関数に戻り、各ノードの位置、回転、スケールをダンプしてみましょう。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+function dumpVec3(v3, precision = 3) {
+  return `${v3.x.toFixed(precision)}, ${v3.y.toFixed(precision)}, ${v3.z.toFixed(precision)}`;
+}

function render(time) {
  ...

-  for (const car of cars) {
-    car.rotation.y = time;
-  }

+  {
+    const pathTime = time * .01;
+    const targetOffset = 0.01;
+    cars.forEach((car, ndx) =&gt; {
+      // a number between 0 and 1 to evenly space the cars
+      const u = pathTime + ndx / cars.length;
+
+      // get the first point
+      curve.getPointAt(u % 1, carPosition);
+      carPosition.applyMatrix4(curveObject.matrixWorld);
+
+      // get a second point slightly further down the curve
+      curve.getPointAt((u + targetOffset) % 1, carTarget);
+      carTarget.applyMatrix4(curveObject.matrixWorld);
+
+      // put the car at the first point (temporarily)
+      car.position.copy(carPosition);
+      // point the car the second point
+      car.lookAt(carTarget);
+
+      // put the car between the 2 points
+      car.position.lerpVectors(carPosition, carTarget, 0.5);
+    });
+  }
</pre>
<p>そしてそれを実行すると、それぞれの車のオリジンの上に高さが一貫して設定されていなかったので、少しオフセットする必要がありました。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const loadedCars = root.getObjectByName('Cars');
const fixes = [
-  { prefix: 'Car_08', rot: [Math.PI * .5, 0, Math.PI * .5], },
-  { prefix: 'CAR_03', rot: [0, Math.PI, 0], },
-  { prefix: 'Car_04', rot: [0, Math.PI, 0], },
+  { prefix: 'Car_08', y: 0,  rot: [Math.PI * .5, 0, Math.PI * .5], },
+  { prefix: 'CAR_03', y: 33, rot: [0, Math.PI, 0], },
+  { prefix: 'Car_04', y: 40, rot: [0, Math.PI, 0], },
];

root.updateMatrixWorld();
for (const car of loadedCars.children.slice()) {
  const fix = fixes.find(fix =&gt; car.name.startsWith(fix.prefix));
  const obj = new THREE.Object3D();
  car.getWorldPosition(obj.position);
-  car.position.set(0, 0, 0);
+  car.position.set(0, fix.y, 0);
  car.rotation.set(...fix.rot);
  obj.add(car);
  scene.add(obj);
  cars.push(obj);
}
</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-gltf-animated-cars.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/load-gltf-animated-cars.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p>数分間の作業にしては悪くない結果です。</p>
<p>最後にやりたいのはシャドウをつける事です。</p>
<p>これを行うために<a href="shadows.html">シャドウの記事</a>にある <a href="/docs/#api/ja/lights/DirectionalLight"><code class="notranslate" translate="no">DirectionalLight</code></a> の例から全てのGUIコードを取得し、最新のコードに貼り付けました。</p>
<p>読み込み後に全てのオブジェクトにシャドウをオンにする必要があります。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
  const gltfLoader = new GLTFLoader();
  gltfLoader.load('resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf', (gltf) =&gt; {
    const root = gltf.scene;
    scene.add(root);

+    root.traverse((obj) =&gt; {
+      if (obj.castShadow !== undefined) {
+        obj.castShadow = true;
+        obj.receiveShadow = true;
+      }
+    });
</pre>
<p>シャドウヘルパーが機能していない理由を探るのに4時間近くを費やしました。
シャドウを有効にするのを忘れていたのが原因でした。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">renderer.shadowMap.enabled = true;
</pre>
<p>😭</p>
<p>そのあと、<code class="notranslate" translate="no">DirectionLight</code> のシャドウカメラがシーン全体を覆うようになるまで値を調整しました。
これらの設定は私が最終的にたどり着いたものです。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
  const color = 0xFFFFFF;
  const intensity = 1;
  const light = new THREE.DirectionalLight(color, intensity);
+  light.castShadow = true;
*  light.position.set(-250, 800, -850);
*  light.target.position.set(-550, 40, -450);

+  light.shadow.bias = -0.004;
+  light.shadow.mapSize.width = 2048;
+  light.shadow.mapSize.height = 2048;

scene.add(light);
  scene.add(light.target);
+  const cam = light.shadow.camera;
+  cam.near = 1;
+  cam.far = 2000;
+  cam.left = -1500;
+  cam.right = 1500;
+  cam.top = 1500;
+  cam.bottom = -1500;
...
</pre>
<p>また、背景色を水色に設定してみました。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const scene = new THREE.Scene();
-scene.background = new THREE.Color('black');
+scene.background = new THREE.Color('#DEFEFF');
</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-gltf-shadows.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/load-gltf-shadows.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p>このプロジェクトを説明する事で、シーングラフを使ってファイルを読込する際の問題点・解決事例をいくつか示せたと思います。</p>
<p>興味深いのはblendファイルとgltfファイルの場合、blendファイルにはいくつかのライトがありますが、シーンに読み込み後はライトがありません。
GLTFファイルはただのJSONファイルなので簡単に中身を見れます。
これは複数の配列から成り、配列内の各項目は他の場所にインデックスを付けて参照されます。
拡張機能がありますが、ほとんど全ての3Dフォーマットの問題を指摘しています。<strong>全てのケースをカバーする事はできません。</strong></p>
<p>もっとデータが欲しいというニーズは常にあります。
例えば今回は手動で車のパスをエクスポートしました。
理想的にはGLTFファイルに情報を格納する事ができますが、独自のエクスポーターを作成しエクスポートしたい方法でノードをマークするか、命名スキームなどを使用してデータを作成するために使用しているツールからアプリにデータを取得する必要があります。</p>
<p>その全ては読者の皆様の演習としてお任せします。</p>

</div>
      </div>
    </div>
  
  <script src="../resources/prettify.js"></script>
  <script src="../resources/lesson.js"></script>

</body></html>

${this.title}

Code Editor : load-gltf.html