【Three.js】簡単なオブジェクト+パーティクルを表示

niffy
2022-08-26
niffy
2022-08-26

はじめに

こんにちは!
今回はTree.jsを使用して簡単なオブジェクトとパーティクルを実装してみました。
学習用のお試しなので悪しからず!

実装

今回はこちらのサイトの実装を参考にさせていただきました。
https://www.mitsue.co.jp/knowledge/blog/frontend/201912/20_0000.html
まず、下記からthree.jsをダウンロードします。
https://threejs.org/

ダウンロードしたら、その中にあるthree.jsというファイルを探し、プロジェクトフォルダに配置しましょう。
同階層に、下記のhtmlファイルを作成します。

index.html

```
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8" />
 <!-- three.jsを読み込む -->
 <script src="three.js"></script>
 <!-- index.jsを読み込む -->
 <script src="index.js"></script>
</head>
<body>
 <section style="z-index: 20; position: absolute">
  <canvas id="myCanvas"></canvas>
 </section>
</body>
</html>
```
こちらのcanvasタグにスクリーンが描画されます。
そうしましたら、jsファイルを実装していきましょう。
今回は単純な表示なので、initメソッド内に全て記述していきます。

index.js

```
window.addEventListener('DOMContentLoaded', init);

function init() {

 const width = 1500;
 const height = 1200;

 // レンダラーを作成
 const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#myCanvas'),
  alpha: true,
 });

 renderer.setPixelRatio(window.devicePixelRatio);
 renderer.setSize(width, height);
 renderer.set

 // シーンを作成
 const scene = new THREE.Scene();

 // カメラを作成
 const camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
 camera.position.set(0, 0, +1000);

 const hatMaterial = new THREE.MeshLambertMaterial({ color: 0x333333 })

 const hat = new THREE.Mesh(
  //円柱のジオメトリー(上面半径,下面半径,高さ,円周分割数)
  new THREE.CylinderGeometry(25, 25, 40, 30),
  hatMaterial
 );
 hat.position.set(0, 50, 0); //(x,y,z)

 const hat_line = new THREE.Mesh(
  new THREE.CylinderGeometry(26, 25, 20, 30),
  new THREE.MeshLambertMaterial({ color: 0xe60033 })
 );
 hat_line.position.set(0, 35, 0);

 const hat_collar = new THREE.Mesh(
  new THREE.CylinderGeometry(40, 40, 5, 30),
  hatMaterial
 );
 hat_collar.position.set(0, 32, 0);

 const whole_hat = new THREE.Group();

 whole_hat.add(hat, hat_line, hat_collar);

 scene.add(whole_hat);

 // 平行光源
 const light = new THREE.DirectionalLight(0xFFFFFF);
 light.intensity = 20; // 光の強さを倍に
 light.position.set(1, 1, 1);
 // シーンに追加
 scene.add(light);

 const ambient = new THREE.AmbientLight(0xf8f8ff, 0.9);
 scene.add(ambient);

 const geom = new THREE.Geometry(50000, 50000, 50000);

 //マテリアル(サイズ・頂点色彩を使うか・色)
 const material = new THREE.PointsMaterial({
  size: 4, //サイズ
  transparent: true,// 透過true
  opacity: 0.6, //透過性の数値
  vertexColors: true, //頂点色彩を使うか
  sizeAttenuation: true,//カメラの奥行きの減退
  color: 0x3EDBF0 //色
 });

 //5000個のランダムな頂点作成
 const range = 500;
 for (var i = 0; i < 5000; i++) {
  //THREE.Vector3(x,y,z)
  const particle = new THREE.Vector3(
  Math.random() * range - range / 2,
  Math.random() * range - range / 2,
  Math.random() * range - range / 2);

  //頂点をジオメトリに追加
  geom.vertices.push(particle);

  //頂点の色を追加
  const color = new THREE.Color(0xeffffc);
  geom.colors.push(color);
 }

 let cloud = new THREE.Points(geom, material);
 cloud.name = "particles";
 scene.add(cloud);

 let zoom = 1000;

 // 初回実行
 tick();

 function tick() {
  requestAnimationFrame(tick);

  // 箱を回転させる
  whole_hat.rotation.y += 0.01;
  whole_hat.rotation.x += 0.01;
  whole_hat.rotation.z += 0.01;

  cloud.rotation.y += 0.005;
  cloud.rotation.x += 0.005;
  cloud.rotation.z += 0.005;

  zoom -= 1;
  camera.position.set(0, 0, +zoom);

  if(zoom <= 300) {
   zoom = 1000;
  }

  // レンダリング
  renderer.render(scene, camera);
 }
}
```
こちらで実装は完了です。
それでは、表示してみましょう!
下記のようになりましたでしょうか??


思ったより簡単に3Dオブジェクトが実装できたかと思います。