プログラミング/JavaScript/three.js/再入門 の変更点

更新 
[[公開メモ]]

#contents

* 準備 [#gf36364d]

https://www.jsdelivr.com/package/npm/three

へ行き、Copy HTML + SRI を押すと

 LANG:html
 <script src="https://cdn.jsdelivr.net/npm/three@0.138.3/build/three.min.js" 
 integrity="sha256-TJ+e0PQs7GxkFRYdn1Cc0N0hL5xuh15qCSMqw8kBLDk=" crossorigin="anonymous"></script>

が手に入る。

そこでテスト用には、

 LANG:html
 <!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="utf-8">
 <script src="https://cdn.jsdelivr.net/npm/three@0.138.3/build/three.min.js" 
 integrity="sha256-TJ+e0PQs7GxkFRYdn1Cc0N0hL5xuh15qCSMqw8kBLDk=" crossorigin="anonymous"></script>
 </head>
 <body>
 <!-- ここに html を書く -->
 <script>
 window.addEventListener("DOMContentLoaded", setup);
 function setup() {
 // ここにコードを書く
 }
 </script>
 </body>
 </html>

のようなひな形を使えば良さそう。

* 立方体のチュートリアル [#c97f1541]

** レンダリングの基本 [#u21e2247]

公式チュートリアル：~
https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

一部こちらも参考にさせていただいて：~
https://ics.media/entry/14771/

three.js で描画するには以下の手順を踏むことになる

+ 描画先を指定してレンダラーを作る
+ シーンを作る
-- シーンにオブジェクトや光源を追加する
+ カメラを作る
+ シーンとカメラを指定してレンダリングする

ここでは、

 LANG:html
 <canvas id="canvas1" width="800", height="600">

に書き込むことにする。

 LANG:js
 // ここにコードを書く
 
 // 描画先の canvas エレメント
 const canvas = document.querySelector("#canvas1");
 
 // レンダラーを作成 (描画先を指定した)
 const renderer = new THREE.WebGLRenderer({canvas: canvas});
 renderer.setSize( canvas.width, canvas.height );
 renderer.setPixelRatio(window.devicePixelRatio);
 
 // カメラを作成 (画角、アスペクト比、描画開始距離、描画終了距離)
 const camera = new THREE.PerspectiveCamera( 
    45, canvas.width / canvas.height, 0.1, 10000 );
 camera.position.set(0, 0, +1000); // x, y, z
 
 // シーンを作成
 const scene = new THREE.Scene();
 
 // ここでシーンにオブジェクトや光源を追加する
 // setup_objects(scene);
 // setup_lights(scene);
 
 // レンダリング
 renderer.render(scene, camera);

これで正しくレンダリングされる。~
ただし、オブジェクトも光源もないシーンなので真っ暗なまま。

** オブジェクトと光源を追加してみる [#z005ed48]

 LANG:js
 // ここでシーンにオブジェクトや光源を追加する
 setup_objects(scene);
 setup_lights(scene);
 
 function setup_lights(scene) {
   // 平行光源
   const light = new THREE.DirectionalLight(0xff80ff);
   light.intensity = 1;
   light.position.set(1, 1, 1);
   scene.add(light); // シーンに追加
 
   // 環境光
   const ambient = new THREE.AmbientLight( 0x80ffff );
   ambient.intensity = 0.2;
   scene.add(ambient); // シーンに追加
 }
 
 function setup_objects(scene) {
    // 箱を作成
   const geometry = new THREE.BoxGeometry(300, 300, 300);              // 形状
   const material = new THREE.MeshStandardMaterial({color: 0x8080ff}); // 単色の材質
   const box = new THREE.Mesh(geometry, material);  // 形状と材質を指定してメッシュを作成
   box.rotation.x = 3.14/4;
   box.rotation.y = 3.14/4;
   scene.add(box); // シーンに追加
 }

これで立方体が表示された。
 
&ref(box1.png);

** アニメーションさせる [#s11c3846]

一定時間間隔でシーンを変更しつつ renderer.render を呼ぶための機構が備わっている。

 LANG:js
 // レンダリング
 renderer.render(scene, camera);

としていた部分を、たとえば

 LANG:js
  function renderFrame() {
    renderer.render( scene, camera );
 
    scene.update(); // シーンを更新する
 
    // 次フレームの描画を予約
    requestAnimationFrame( renderFrame );
  }
  
  // 次フレームの描画を予約
  requestAnimationFrame( renderFrame );

とするとともに、オブジェクトの追加時に

 LANG:js
  function setup_objects(scene) {
    // 箱を作成
    const geometry = new THREE.BoxGeometry(300, 300, 300);              // 形状
    const material = new THREE.MeshStandardMaterial({color: 0x8080ff}); // 単色の材質
    const box = new THREE.Mesh(geometry, material);  // 形状と材質を指定してメッシュを作成
    box.rotation.x = 3.14/4;
    box.rotation.y = 3.14/4;
    scene.add(box); // シーンに追加
  
    // シーンの更新方法を指定（箱を回転させる）
    scene.update = function() {
     box.rotation.x += 0.01;
     box.rotation.y += 0.01;
    }
  }

のようにシーンの更新方法を登録しておく。

これでアニメーションが行われる。

&attachref(box1.gif);

** ここまでのコード [#bea92dc5]

 LANG:html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <script src="https://cdn.jsdelivr.net/npm/three@0.138.3/build/three.min.js" 
 integrity="sha256-TJ+e0PQs7GxkFRYdn1Cc0N0hL5xuh15qCSMqw8kBLDk=" crossorigin="anonymous"></script>
 </head>
 <body>
 
 <canvas id="canvas1" width="800", height="600"></canvas>
 
 <script>
 window.addEventListener("DOMContentLoaded", init);
 
 function init() {
   
    // 描画先の canvas エレメント
    const canvas = document.querySelector("#canvas1");
    
    // レンダラーを作成 (描画先を指定した)
    const renderer = new THREE.WebGLRenderer({canvas: canvas});
    renderer.setSize( canvas.width, canvas.height );
    renderer.setPixelRatio(window.devicePixelRatio);
    
    // カメラを作成 (画角、アスペクト比、描画開始距離、描画終了距離)
    const camera = new THREE.PerspectiveCamera( 
       45, canvas.width / canvas.height, 0.1, 10000 );
    camera.position.set(0, 0, +1000); // x, y, z
    
    // シーンを作成
    const scene = new THREE.Scene();
    
    // ここでシーンにオブジェクトや光源を追加する
    setup_objects(scene);
    setup_lights(scene);
    
    // レンダリング
    renderer.render(scene, camera);
   
   function renderFrame() {
     renderer.render( scene, camera );
  
     scene.update(); // シーンを更新する
  
     // 次フレームの描画を予約
     requestAnimationFrame( renderFrame );
   }
   
   // 次フレームの描画を予約
   requestAnimationFrame( renderFrame );
 }
   
 function setup_lights(scene) {
   // 平行光源
   const light = new THREE.DirectionalLight(0xff80ff);
   light.intensity = 1;
   light.position.set(1, 1, 1);
   scene.add(light); // シーンに追加
    
   // 環境光
   const ambientLight = new THREE.AmbientLight( 0x80ffff );
   ambientLight.intensity = 0.2;
   scene.add( ambientLight );
 }
 
 function setup_objects(scene) {
   // 箱を作成
   const geometry = new THREE.BoxGeometry(300, 300, 300);              // 形状
   const material = new THREE.MeshStandardMaterial({color: 0x8080ff}); // 単色の材質
   const box = new THREE.Mesh(geometry, material);  // 形状と材質を指定してメッシュを作成
   box.rotation.x = 3.14/4;
   box.rotation.y = 3.14/4;
   scene.add(box); // シーンに追加
 
   // シーンを更新する（箱を回転させる）
   scene.update = function() {
    box.rotation.x += 0.01;
    box.rotation.y += 0.01;
   }
 }
 
 </script>
 
 </body>
 </html>

* 任意形状のメッシュを生成 [#k98c0e43]

 LANG:js
 function setup_objects(scene) {
 
   // 正方形の頂点セット
   // 実際には２つの三角形を組み合わせて正方形にしているため
   // (0,0,0) と (100,100,0) が２回表れる
   const vertices = new Float32Array( [
           0,   0,   0,
         100,   0,   0,
         100, 100,   0,
 
         100, 100,   0,
           0, 100,   0,
           0,   0,   0,
   ] );
 
   const geometry = new THREE.BufferGeometry();
   // 頂点あたりの引数の数を itemSize = 3 として指定
   geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
   geometry.computeVertexNormals();  // これを忘れると表示されない
   const material = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
   material.side = THREE.DoubleSide; // 裏側も描画
   const mesh = new THREE.Mesh( geometry, material );
   scene.add(mesh);
 
   // シーンを更新する（回転させる）
   scene.update = function() {
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;
    mesh.rotation.z += 0.005;
   }
 }

&attachref(square1.gif);

* ExtrudeGeometry で厚みのある形状 [#u23e7cb1]

https://threejs.org/docs/#api/en/geometries/ExtrudeGeometry

 LANG:js
 function setup_objects(scene) {
  
   const h = 120, w = 80;
   
   const shape = new THREE.Shape();
   shape.moveTo( 0,0 );
   shape.lineTo( 0, w );
   shape.lineTo( h, w );
   shape.lineTo( h, 0 );
   shape.lineTo( 0, 0 );
   
   const extrudeSettings = {
   	steps:           2, // 押し出し方向の分割数
   	depth:         160, // 押し出し長さ
   	bevelEnabled: true, // bevel で面取りができる
   	bevelThickness: 30, // 押し出し方向の面取り量（depth の外側に追加）
   	bevelSize:      30, // 面内方向の面取り量
   	bevelOffset:    20, // 外形からの距離（って何だ？）
   	bevelSegments:   1  // 大きくすると丸くなる
   };
   
   const geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
  
   geometry.computeVertexNormals();  // これを忘れると表示されない
   const material = new THREE.MeshStandardMaterial( { color: 0xffffff } );
   material.side = THREE.DoubleSide; // 裏側も描画
   const mesh = new THREE.Mesh( geometry, material );
   scene.add(mesh);
 
   // シーンを更新する（箱を回転させる）
   scene.update = function() {
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;
    mesh.rotation.z += 0.005;
   }
 }

右は bevelSegments = 10 としたもの。

&attachref(extruded1.gif,,66%);
&attachref(extruded2.gif,,66%);

* 円盤 [#o83fd2b2]

https://observablehq.com/@rkaravia/2d-shapes-in-three-js を参考に、

 LANG:js
   const shape = new THREE.Shape();
   shape.absarc(0, 0, 100); // 円弧を書く
   
   const extrudeSettings = {
   	steps:           2, // 押し出し方向の分割数
   	depth:           0, // 押し出し長さ
   	bevelEnabled: true,
   	bevelThickness: 20, // 押し出し方向
   	bevelSize:      20, // 面内方向
   	bevelOffset:     0, // 外形からの距離（って何だ？）
   	bevelSegments:  10, // 大きくすると丸くなる
   	curveSegments:  60, // 大きくすると丸くなる
   };
   const geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );

として生成できた。

&attachref(disk1.gif);
&attachref(disk2.gif);

curveSegments のデフォルトは 12 なので、これを大きくしないとガタガタになる(右図)。

* スムーズシェーディング [#jbc741e4]

https://discourse.threejs.org/t/smooth-shading-for-extruded-circle/25782

通常 ExtrudeGeometry で作った geometry は flatShading で描画されるのだけれど、
THREE.BufferGeometryUtils.mergeVertices で重なった頂点を除去しつつ、
頂点にインデックスをつけると computeVertexNormals() で頂点の法線ベクトルを計算できて
スムーズシェーディングが効くようになるらしい（なんのこっちゃ？）

 LANG:js
  const shape = new THREE.Shape();
  shape.absarc(0, 0, 100);  // 円弧を書く
 
  const extrudeSettings = {
  	steps:           2, // 押し出し方向の分割数
  	depth:           0, // 押し出し長さ
  	bevelEnabled: true,
  	bevelThickness: 20, // 押し出し方向
  	bevelSize:      20, // 面内方向
  	bevelOffset:     0, // 外形からの距離（って何だ？）
  	bevelSegments:  5, // 大きくすると丸くなる
  	curveSegments:  20, // 大きくすると丸くなる
  };
  const geometry1 = new THREE.ExtrudeGeometry( shape, extrudeSettings );
  geometry1.deleteAttribute( 'normal' ); // 余計な属性を除去して
  geometry1.deleteAttribute( 'uv' );     // 余計な属性を除去してから
  const geometry = THREE.BufferGeometryUtils.mergeVertices( geometry1 ); // 頂点をマージ＆インデックス
  geometry.computeVertexNormals();       // 法線ベクトルを計算する

なぜだかはじめと終わりの継ぎ目と思われる部分にちょっとだけガタが残る（左）。

&ref(disk4.gif);
&ref(disk3.gif);

 LANG:js
  const geometry = THREE.BufferGeometryUtils.mergeVertices( geometry1, 1 );

のようにトレランスを大きくしたら良くなったかも（右）。


* ガラス＆テクスチャ [#p5065ff4]

参考：~
https://tympanus.net/codrops/2021/10/27/creating-the-effect-of-transparent-glass-and-plastic-in-three-js/

上のスムーズシェーディングが有効になった円盤をガラス材質にしてみる。

透けていることが分かるように背景に長方形を置いてそこに画像を貼る。

material の設定部分以下を次のようにする。

 LANG:js
  // 透明感のある材質
  const material = new THREE.MeshPhysicalMaterial({
    roughness: 0.05,  
    transmission: 1,  
  })
  material.thickness = 40; // 屈折させるため厚みを持たせる
 
  const mesh = new THREE.Mesh( geometry, material );
  scene.add(mesh);
 
  // 背景画像を読み込む
  const loader = new THREE.TextureLoader();
  // Thanks, Lukas Blazek@goumbik https://unsplash.com/photos/EWDvHNNfUmQ
  loader.load('lukas-blazek-EWDvHNNfUmQ-unsplash.jpg' , function(texture) {
    const bgGeometry = new THREE.PlaneGeometry(1200, 800); // パネルを用意して
    const bgMaterial = new THREE.MeshBasicMaterial({ map: texture });
    const bgMesh = new THREE.Mesh(bgGeometry, bgMaterial); // 画像を貼る
    bgMesh.position.set(0, 0, -500);  // 場所を背後にする
    scene.add(bgMesh);
  });

&attachref(disk5.gif);

* 参考 [#secc2ddd]

メッシュの表示：~
http://www.mwsoft.jp/programming/webgl/geometry.html

キャラクター~
https://tympanus.net/codrops/2021/10/04/creating-3d-characters-in-three-js/

雲~
https://tympanus.net/codrops/2020/01/28/how-to-create-procedural-clouds-using-three-js-sprites/

BufferGeometry~
https://threejs.org/docs/index.html#api/en/core/BufferGeometry

透明について~
https://r105.threejsfundamentals.org/threejs/lessons/threejs-transparency.html ~
https://qiita.com/masato_makino/items/ce57452196d480aaa203 ~
https://stackoverflow.com/questions/15994944/transparent-objects-in-threejs ~
https://r105.threejsfundamentals.org/threejs/lessons/threejs-transparency.html
https://r105.threejsfundamentals.org/threejs/lessons/threejs-transparency.html ~
https://pisuke-code.com/three-js-mesh-x-ray-effect/

全般的なチュートリアル~
https://ics.media/tutorial-three/
Counter: 6434 (from 2010/06/03), today: 1, yesterday: 8