javascript
/
three.js
peilaus alkaen https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433
							<!DOCTYPE html><html lang="ja"><head>
    <meta charset="utf-8">
    <title>のカスタムジオメトリ</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 – のカスタムジオメトリ">
    <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/[email protected]/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>のカスタムジオメトリ</h1>
      </div>
      <div class="lesson">
        <div class="lesson-main">
          <div class="warning">
<strong>NOTE!</strong> This article is deprecated. Three.js r125
removed support for <code class="notranslate" translate="no">Geometry</code>. Please refer to
the article on <a href="custom-buffergeometry.html">custom BufferGeometry</a>.
</div>


<p>前回の<a href="primitives.html">記事</a>ではTHREE.jsにある基本ジオメトリであるプリミティブジオメトリを紹介しました。この記事ではカスタムジオメトリを紹介します。</p>
<p>まず最初に断っておきますが、本格的な３Dコンテンツを作りたい場合は
３Dモデリングツールを使うべきです。３Dモデリングツールには
<a href="https://blender.org">Blender</a>,
<a href="https://www.autodesk.com/products/maya/overview">Maya</a>,
<a href="https://www.autodesk.com/products/3ds-max/overview">3D Studio Max</a>,
<a href="https://www.maxon.net/en-us/">Cinema4D</a>などがあります。</p>
<p>これらのモデリングツールでモデルを作ってから<a href="load-gltf.html">gLTF</a>や<a href="load-obj.html">.obj</a> 
にエクスポートしたものをTHREE.jsにインポートすることもできます。
どのモデリングツールも習得にそれなりの時間がかかります。</p>
<p>ここまで簡単なカスタムジオメトリであれば大袈裟なモデリングツールを使わずにTHREE.jsのコードで作れます。</p>
<p>まずは立方体を作ってみましょう。THREE.jsの<a href="/docs/#api/ja/geometries/BoxGeometry"><code class="notranslate" translate="no">BoxGeometry</code></a>や<a href="/docs/#api/ja/geometries/BoxGeometry"><code class="notranslate" translate="no">BoxGeometry</code></a>を使えば一発で
立方体を作れますが、簡単な例としてカスタムジオメトリで作ってみましょう。</p>
<p>THREE.jsにはカスタムジオメトリを作る方法が２つあります。１つ目は<code class="notranslate" translate="no">Geometry</code>クラスで２つ目が<a href="/docs/#api/ja/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>です。
それぞれに利点があります。<code class="notranslate" translate="no">Geometry</code>は簡単に使えますが遅く、メモリをより消費します。1000個以下の三角形を作る際は
よいですが、10,000個の三角形を作る時には<a href="/docs/#api/ja/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>が良いでしょう。</p>
<p><a href="/docs/#api/ja/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>は使うのが難しいですがメモリの消費が小さく速いです。１万個の三角形を作る時にはこれを使いましょう。</p>
<p>ただし変形などがない場合はそれほど変わりません。<code class="notranslate" translate="no">Geometry</code>が遅いというのはジオメトリが編集された
場合に遅いと言う意味で、もし編集が必要なくそれほど大きくなければこの両者はあまり変わりません。
この記事では両方紹介します。最初は簡単な<code class="notranslate" translate="no">Geometry</code>を紹介します。</p>
<p>まずは<code class="notranslate" translate="no">Geometry</code>で立方体を作ってみましょう。<a href="responsive.html">レスポンシブの記事</a>の例を使います。</p>
<p><a href="/docs/#api/ja/geometries/BoxGeometry"><code class="notranslate" translate="no">BoxGeometry</code></a>を使っている部分を消して<code class="notranslate" translate="no">Geometry</code>で置き換えてみます。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const boxWidth = 1;
-const boxHeight = 1;
-const boxDepth = 1;
-const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
+const geometry = new THREE.Geometry();
</pre>
<p>まずは８つの角を追加してみます。</p>
<div class="threejs_center"><img src="../resources/cube-vertex-positions.svg" style="width: 500px"></div>

<p>中心の周囲にこのようにvertexを追加します。（訳註：vertexとはジオメトリを構成する頂点です。３つの頂点を結ぶことでface＝面ができます）。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const geometry = new THREE.Geometry();
+geometry.vertices.push(
+  new THREE.Vector3(-1, -1,  1),  // 0
+  new THREE.Vector3( 1, -1,  1),  // 1
+  new THREE.Vector3(-1,  1,  1),  // 2
+  new THREE.Vector3( 1,  1,  1),  // 3
+  new THREE.Vector3(-1, -1, -1),  // 4
+  new THREE.Vector3( 1, -1, -1),  // 5
+  new THREE.Vector3(-1,  1, -1),  // 6
+  new THREE.Vector3( 1,  1, -1),  // 7
+);
</pre>
<p>vertexを結んで三角形を作ります。１面につき２つの三角形を使います。
（訳註：立方体は６つの正方形で構成されます。１つの正方形は２つの三角形で構成されます。）</p>
<div class="threejs_center"><img src="../resources/cube-triangles.svg" style="width: 500px"></div>

<p>vertexを結んで三角形を作るには<a href="/docs/#api/ja/core/Face3"><code class="notranslate" translate="no">Face3</code></a>を使います。<a href="/docs/#api/ja/core/Face3"><code class="notranslate" translate="no">Face3</code></a>の３は３つのvertexでfaceを作ると言う意味です。</p>
<p>vertexを指定する順序は重要です。faceには表面と裏面があります。立方体を構成するfaceの
面が外に向くためには反時計回りの順序でvertexを指定します。</p>
<div class="threejs_center"><img src="../resources/cube-vertex-winding-order.svg" style="width: 500px"></div>

<p>同じように１２個の三角形を作って立方体を作ります。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.faces.push(
  // front
  new THREE.Face3(0, 3, 2),
  new THREE.Face3(0, 1, 3),
  // right
  new THREE.Face3(1, 7, 3),
  new THREE.Face3(1, 5, 7),
  // back
  new THREE.Face3(5, 6, 7),
  new THREE.Face3(5, 4, 6),
  // left
  new THREE.Face3(4, 2, 6),
  new THREE.Face3(4, 0, 2),
  // top
  new THREE.Face3(2, 7, 6),
  new THREE.Face3(2, 3, 7),
  // bottom
  new THREE.Face3(4, 1, 0),
  new THREE.Face3(4, 5, 1),
);
</pre>
<p>ちょっとコードを変えるだけで動きます。</p>
<p>これらの立方体は前に使った<a href="/docs/#api/ja/geometries/BoxGeometry"><code class="notranslate" translate="no">BoxGeometry</code></a>の立方体より２倍のサイズがあります。
全体が映るようにカメラを引きます。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
const aspect = 2;  // the canvas default
const near = 0.1;
-const far = 5;
+const far = 100;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
-camera.position.z = 2;
+camera.position.z = 5;
</pre>
<p>わかりやすいようにそれぞれを離して色を変えます。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const cubes = [
-  makeInstance(geometry, 0x44aa88,  0),
-  makeInstance(geometry, 0x8844aa, -2),
-  makeInstance(geometry, 0xaa8844,  2),
+  makeInstance(geometry, 0x44FF44,  0),
+  makeInstance(geometry, 0x4444FF, -4),
+  makeInstance(geometry, 0xFF4444,  4),
];
</pre>
<p>この状態ではnormal（法線）がないのでライトが当たりません。
そこでライトが必要ないマテリアルに変えます。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function makeInstance(geometry, color, x) {
-  const material = new THREE.MeshPhongMaterial({color});
+  const material = new THREE.MeshBasicMaterial({color});

  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  ...
</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/custom-geometry-cube.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/custom-geometry-cube.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p>それぞれのfaceに対して<code class="notranslate" translate="no">color</code>を設定することで色を変えられます。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.faces[ 0].color = geometry.faces[ 1].color = new THREE.Color('red');
geometry.faces[ 2].color = geometry.faces[ 3].color = new THREE.Color('yellow');
geometry.faces[ 4].color = geometry.faces[ 5].color = new THREE.Color('green');
geometry.faces[ 6].color = geometry.faces[ 7].color = new THREE.Color('cyan');
geometry.faces[ 8].color = geometry.faces[ 9].color = new THREE.Color('blue');
geometry.faces[10].color = geometry.faces[11].color = new THREE.Color('magenta');
</pre>
<p>マテリアルには<code class="notranslate" translate="no">vertexColors</code>を使うように設定します。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const material = new THREE.MeshBasicMaterial({color});
+const material = new THREE.MeshBasicMaterial({vertexColors: true});
</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/custom-geometry-cube-face-colors.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-face-colors.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p><code class="notranslate" translate="no">vertexcolors</code>を設定すればvertexそれぞれに色を設定できます。
３つのvertexに対して３つの色を設定してみます。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.faces.forEach((face, ndx) =&gt; {
  face.vertexColors = [
    (new THREE.Color()).setHSL(ndx / 12      , 1, 0.5),
    (new THREE.Color()).setHSL(ndx / 12 + 0.1, 1, 0.5),
    (new THREE.Color()).setHSL(ndx / 12 + 0.2, 1, 0.5),
  ];
});
</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/custom-geometry-cube-vertex-colors.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-vertex-colors.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p>ライトを適用する時はnormalが必要です。normalはfaceの向きを示すベクトルです。
色を設定したのと同じようにそれぞれのfaceにのnormalを設定します。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">face.normal = new THREE.Vector3(...)
</pre>
<p><code class="notranslate" translate="no">vertexNormals</code>でvertexに対してnormalを設定することもできます。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">face.vertexNormals = [
  new THREE.Vector3(...),
  new THREE.Vector3(...),
  new THREE.Vector3(...),
]
</pre>
<p>しかしTHREE.jsに自動的にnormalを設定してもらうこともできます。
faceのnormalに対しては<code class="notranslate" translate="no">Geometry.computeFaceNormals</code>を使います。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.computeFaceNormals();
</pre>
<p>vertex colorを消してマテリアルを<a href="/docs/#api/ja/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a>に戻します。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const material = new THREE.MeshBasicMaterial({vertexColors: true});
+const material = new THREE.MeshPhongMaterial({color});
</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/custom-geometry-cube-face-normals.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-face-normals.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p>vertex normalsを使うことで滑らかな表面を表現できます。
<code class="notranslate" translate="no">Geometry.computeVertexNormals</code>を設定してください。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-geometry.computeFaceNormals();
+geometry.computeVertexNormals();
</pre>
<p>ここまで説明しておいてなんですが立方体はvertex normalの例としてはあまり適切ではありません。
なぜなら１つのvertex normalがそのvertexが接する全ての面に依存しているからです。</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/custom-geometry-cube-vertex-normals.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-vertex-normals.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p>テクスチャの座標（UVと呼ばれる）を設定するには<code class="notranslate" translate="no">faces</code>に対応した配列を用意します。
<code class="notranslate" translate="no">Geometry.faceVertexUvs</code>で設定します。
これらのテクニックを使うと以下のような立方体ができます。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.faceVertexUvs[0].push(
  // front
  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
  // right
  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
  // back
  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
  // left
  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
  // top
  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
  // bottom
  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1) ],
  [ new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1) ],
);
</pre>
<p><code class="notranslate" translate="no">faceVertexUvs</code>は配列の配列によってUV座標がレイヤー状に格納されています。それぞれの配列にはUV座標が入っています。デフォルトではレイヤー数は１です。もう１つレイヤーを追加してみます。</p>
<p>マテリアルに<a href="textures.html">テクスチャを追加</a> してください。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-geometry.computeVertexNormals();
+geometry.computeFaceNormals();

+const loader = new THREE.TextureLoader();
+const texture = loader.load('resources/images/star.png');

function makeInstance(geometry, color, x) {
-  const material = new THREE.MeshPhongMaterial({color});
+  const material = new THREE.MeshPhongMaterial({color, map: texture});

  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  ...
</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/custom-geometry-cube-texcoords.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/custom-geometry-cube-texcoords.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p>OKです。単純なハイトマップをterrain meshから作りましょう。</p>
<p>terrain meshからつくるハイトマップとは詰まるところ二次元配列です。配列の数値は高さの表現に使います。二次元配列を取得するには画像編集ソフトで適当な画像を作ってしまうのが楽です。96x96の画像を作ってみました。</p>
<div class="threejs_center"><img src="../examples/resources/images/heightmap-96x64.png" style="width: 512px; image-rendering: pixelated;"></div>

<p>このPNG画像をロードして二次元配列にしてハイトマップとして使います。
画像をロードするには<a href="/docs/#api/ja/loaders/ImageLoader"><code class="notranslate" translate="no">ImageLoader</code></a>を使います。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const imgLoader = new THREE.ImageLoader();
imgLoader.load('resources/images/heightmap-96x64.png', createHeightmap);

function createHeightmap(image) {
  // extract the data from the image by drawing it to a canvas
  // and calling getImageData
  const ctx = document.createElement('canvas').getContext('2d');
  const {width, height} = image;
  ctx.canvas.width = width;
  ctx.canvas.height = height;
  ctx.drawImage(image, 0, 0);
  const {data} = ctx.getImageData(0, 0, width, height);

  const geometry = new THREE.Geometry();
</pre>
<p>画像から二次元配列を取り出しました。次に粗い正方形で区切られたグリッドを作ります。このグリッドはそれぞれのピクセルの中心点を四隅とした正方形で構成されています。</p>
<div class="threejs_center"><img src="../resources/heightmap-points.svg" style="width: 500px"></div>

<p>それぞれの正方形に対して５つのvertexを作ります。４つは正方形の四隅のピクセル値で、のこり１つはその四隅の平均です。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const cellsAcross = width - 1;
const cellsDeep = height - 1;
for (let z = 0; z &lt; cellsDeep; ++z) {
  for (let x = 0; x &lt; cellsAcross; ++x) {
    // compute row offsets into the height data
    // we multiply by 4 because the data is R,G,B,A but we
    // only care about R
    const base0 = (z * width + x) * 4;
    const base1 = base0 + (width * 4);

    // look up the height for the for points
    // around this cell
    const h00 = data[base0] / 32;
    const h01 = data[base0 + 4] / 32;
    const h10 = data[base1] / 32;
    const h11 = data[base1 + 4] / 32;
    // compute the average height
    const hm = (h00 + h01 + h10 + h11) / 4;

    // the corner positions
    const x0 = x;
    const x1 = x + 1;
    const z0 = z;
    const z1 = z + 1;

    // remember the first index of these 5 vertices
    const ndx = geometry.vertices.length;

    // add the 4 corners for this cell and the midpoint
    geometry.vertices.push(
      new THREE.Vector3(x0, h00, z0),
      new THREE.Vector3(x1, h01, z0),
      new THREE.Vector3(x0, h10, z1),
      new THREE.Vector3(x1, h11, z1),
      new THREE.Vector3((x0 + x1) / 2, hm, (z0 + z1) / 2),
    );
</pre>
<p>この５つのvertexを元に４つの三角形を作ります。</p>
<div class="threejs_center"><img src="../resources/heightmap-triangles.svg" style="width: 500px"></div>

<pre class="prettyprint showlinemods notranslate lang-js" translate="no">    // create 4 triangles
    geometry.faces.push(
      new THREE.Face3(ndx + 0, ndx + 4, ndx + 1),
      new THREE.Face3(ndx + 1, ndx + 4, ndx + 3),
      new THREE.Face3(ndx + 3, ndx + 4, ndx + 2),
      new THREE.Face3(ndx + 2, ndx + 4, ndx + 0),
    );

    // add the texture coordinates for each vertex of each face
    const u0 = x / cellsAcross;
    const v0 = z / cellsDeep;
    const u1 = (x + 1) / cellsAcross;
    const v1 = (z + 1) / cellsDeep;
    const um = (u0 + u1) / 2;
    const vm = (v0 + v1) / 2;
    geometry.faceVertexUvs[0].push(
      [ new THREE.Vector2(u0, v0), new THREE.Vector2(um, vm), new THREE.Vector2(u1, v0) ],
      [ new THREE.Vector2(u1, v0), new THREE.Vector2(um, vm), new THREE.Vector2(u1, v1) ],
      [ new THREE.Vector2(u1, v1), new THREE.Vector2(um, vm), new THREE.Vector2(u0, v1) ],
      [ new THREE.Vector2(u0, v1), new THREE.Vector2(um, vm), new THREE.Vector2(u0, v0) ],
    );
  }
}
</pre>
<p>仕上げです。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">  geometry.computeFaceNormals();

  // center the geometry
  geometry.translate(width / -2, 0, height / -2);

  const loader = new THREE.TextureLoader();
  const texture = loader.load('resources/images/star.png');

  const material = new THREE.MeshPhongMaterial({color: 'green', map: texture});

  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
}
</pre>
<p>すこし視点を変えるとみやすくなります。</p>
<ul>
<li><a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>を追加してください。</li>
</ul>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
+import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
</pre>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
const aspect = 2;  // the canvas default
const near = 0.1;
-const far = 100;
+const far = 200;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
-camera.position.z = 5;
+camera.position.set(20, 20, 20);

+const controls = new OrbitControls(camera, canvas);
+controls.target.set(0, 0, 0);
+controls.update();
</pre>
<p>ライトも２つ入れましょう。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-{
+function addLight(...pos) {
  const color = 0xFFFFFF;
  const intensity = 1;
  const light = new THREE.DirectionalLight(color, intensity);
-  light.position.set(-1, 2, 4\);
+  light.position.set(...pos);
  scene.add(light);
}

+addLight(-1, 2, 4);
+addLight(1, 2, -2);
</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/custom-geometry-heightmap.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/custom-geometry-heightmap.html" target="_blank">ここをクリックして別のウィンドウで開きます</a>
</div>

<p></p>
<p><code class="notranslate" translate="no">Geometry</code>の使用方法をおわかりいただけたでしょうか？</p>
<p><a href="custom-buffergeometry.html">この記事</a>では<a href="/docs/#api/ja/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>について説明します。</p>

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


</body></html>