😸

Three.jsで宇宙を描く（Zenn-cliから初めて投稿してみる）

に公開
Zenn CLI
WebGL
Three.js
Jules
idea

作ったもの

はじめに

  • これは投稿テストでもある

こんにちはHKです。長くこの世界から離れていたので、なにも分からなくなっています。
ES6でletとかconstとか出てきたときは意味が分からず、Copilotに尋ねて勉強しました。

  • Zennは敷居が高そうだな・・・

「技術に貢献できるような内容を」「個人的メモとは違う」とか書いてある。
初心者なので、そんな内容になっていないけど、大丈夫やろうか？

  • GitHubと連携できるのか・・・

GitHubは勉強中なんだけど、こんなものが役に立つのか。昔やったけど、やり方を忘れた。

  1. リポジトリをリモートに作る
  2. Julesをそれに関連付ける
  3. コードを生成する
  4. git clone でローカルにクローン
  5. git checkout switch でブランチに移動
  6. pushやpullをする

みたいな感じでできた。
VS CodeでWSLの拡張機能をインストールして使うと、コードを編集するとき便利
localhost:8000でライブサーバーまで立ちあがる。
隔世の感がある。。。

Google julesに頼んで、ビッグバンのシミュレーションを書いてもらった

🔗 GitHubリポジトリはこちら

これを作った時

        {
            "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
                "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
                "simplex-noise": "https://cdn.skypack.dev/simplex-noise"
            }
        }

のような、importmapの仕組みが分からなかった。
なんでこんなことするのだろう？
これをやらないと、ブラウザが読み込んでくれない。

scriptのtypeにimportmapと指定する

<script type="importmap">

こうやって使うのか

<script type="module">

これを書かないと、importすら解釈できない。

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { createNoise3D } from 'simplex-noise';

これで、Three.jsのライブラリがインポートされるわけだね。
Three.js、OrbitControls、Simplex-noizeのライブラリを使用します

まず、部品を配置する

Three.jsで、必要なものを配置していくわけだね。

シーン 舞台みたいなものかな

const scene = new THREE.Scene();

constは、変数の中身が変更されてはいけない時に使う

カメラ,視点アングルを作る

// カメラ
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 50;

各引数の意味を理解しよう

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
fov — カメラの視錐台の垂直視野角。
aspect — カメラの視錐台の縦横比。
near — カメラの視錐台の近面。
far — カメラの視錐台の遠面。
Together these define the camera's viewing frustum.

レンダラーって何？

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

本体Bodyに初期化したレンダラーをアペンドするらしい。
要するに、描画するキャンバスを追加するってことだね

星を作成

const particleCount = 10000;
const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3); // x, y, z
const colors = new Float32Array(particleCount * 3); // r, g, b (final color)
const baseColors = new Float32Array(particleCount * 3); // r, g, b (initial random color)
const fadeVelocities = new Float32Array(particleCount * 3); // x, y, z for fading

BufferGeometryというものを使って、星を生成する。

BufferGeometry

A representation of mesh, line, or point geometry.
 Includes vertex positions, face indices, normals, 
colors, UVs, and custom attributes within buffers, 
reducing the cost of passing all this data to the GPU.

To read and edit data in BufferGeometry attributes, 
see BufferAttribute documentation.

要するに「点」の形をつくり、位置、色、ベースカラー、フェードの各要素に対応させる。３方向（x,y,z）に必要になるから、星の数に３を掛けてある、と。

シンプレックスノイズの生成（これが肝だね）

// --- Filament Structure using Simplex Noise ---
const noise3D = createNoise3D(Math.random);
const noiseFrequency = 2.0;
const noiseThreshold = 0.3;
const generationVolume = 2.0; // The size of the volume to generate points in

シンプレックス・ノイズというものを使い、銀河フィラメントを生成する部分。
これらの値の意味は、ちょっと複雑そうだね。

Discussion