目次を表示
進捗状況
0%
2023-10-12
Three.js 基礎の部分を理解していく
Three.js 基礎理解
参考資料
https://threejs.org/manual/#ja/fundamentals
概要
通常3Dコンテンツを表示するのであればそれなりに長いコード量と数学的な知識が必要。
ただ、Three.jsを利用することによって直感的に記述することができ、数学的な知識がなくても開発が可能。
Three.jsなしの場合
// WebGLのコンテキストを取得
const gl = canvas.getContext("webgl");
// 頂点シェーダーの定義
const vertexShaderSrc = `
...
`;
// フラグメントシェーダーの定義
const fragmentShaderSrc = `
...
`;
// 頂点シェーダーの作成とコンパイル
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSrc);
gl.compileShader(vertexShader);
// フラグメントシェーダーの作成とコンパイル
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSrc);
gl.compileShader(fragmentShader);
// シェーダープログラムの作成、シェーダーのリンク、プログラムの利用
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// キューブの頂点情報
const vertices = new Float32Array([
...
]);
// キューブの面（トライアングル）情報
const indices = new Uint16Array([
...
]);
// 続く...Three.jsありの場合
// シーンの作成
const scene = new THREE.Scene();
// カメラの作成
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.z = 5;
// レンダラーの作成
const renderer = new THREE.WebGLRenderer({
canvas: document.getElementById("canvas"),
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// キューブのジオメトリとマテリアルの作成
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
// キューブのメッシュの作成
const cube = new THREE.Mesh(geometry, material);
// キューブをシーンに追加
scene.add(cube);
// レンダリング関数
function animate() {
requestAnimationFrame(animate);
// キューブの回転
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// シーンのレンダリング
renderer.render(scene, camera);
}
// アニメーションの開始
animate();実際にこのコードで利用されている概念を説明していく。
Canvas
JavaScript を使用してピクセルレベルでグラフィックスを描画するためのもの。
下記のようにすればTypescriptで記述可能。
ただし、scriptタグ内でも関数の型付けなどはできる。
Index.html
<body>
<canvas id="canvas"></canvas>
</body>
<script type="module" src="./src/main.ts"></script>main.ts
import * as THREE from "three";
const canvas = document.querySelector("#canvas");
const renderer = canvas && new THREE.WebGLRenderer({ antialias: true, canvas });WebGLRenderer
WebGL（Web Graphics Library）を使用して 3D グラフィックスを Web ブラウザ上でレンダリングするためのツールやエンジンのこと。
JavaScript API であり、GPU にアクセスして高性能の 3D コンピュータグラフィックスをブラウザ上で描画することができる。
Camera
文字の通り3D物体を見る視界のことを指す。
設定自体はコードとして表現することが可能。
const fov = 75; // 視野角
const aspect = 2; // アスペクト比
const near = 0.1; // カメラの視点からの最短距離
const far = 5; // カメラの視点からの最長距離
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 2; // カメラの位置を設定 - 原点から2の位置に配置実際のイメージ
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ far plane (最長距離)
┃ ┏━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃
┃ ┃ ┃ ┃
┃ ┃ ┃ ┃
┃ ┃ ┃ ┃
┃ ┃ ┃ ┃
fov ━━━┿━━━┿━━━━━━━━━━━━━━━━━━━━━━━━━┿━━━┿━━━
┃ ┃ Viewing Area ┃ ┃
┃ ┃ (視野のエリア) ┃ ┃
fov ━━━┿━━━┿━━━━━━━━━━━━━━━━━━━━━━━━━┿━━━┿━━━
┃ ┃ ┃ ┃
┃ ┃ ┃ ┃
┃ ┃ ┃ ┃
┃ ┃ ┃ ┃
┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━┛ ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ near plane (最短距離)
<─────────────── aspect (アスペクト比) ───────────────>ポジションのイメージ
実際に公式サイトの図を参照することを推奨。
すごくわかりやすかった。
y
↑
│
│
│
───────────┼──────────→ x
│
│
│
│/
2 O ← カメラ位置 (camera.position.z = 2)
/
/
↓
zScene
Three.js を利用するときはすべての元になっており必要。
ジオメトリ
物体の形や構造を定義するためのデータ。
ここでいう実際に作成される物体の 3D の図形を指す。
マテリアル
物体の表面の視覚的な特性を定義するための情報や設定。
3D 図形の色、光沢、透明度、反射性、テクスチャなどの情報を指す。
const scene = new THREE.Scene(); // シーンを作成
const boxWidth = 1; // 立方体の幅
const boxHeight = 1; // 立方体の高さ
const boxDepth = 1; // 立方体の奥行き
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth); // 立方体の形状を作成
const material = new THREE.MeshBasicMaterial({ color: 0x00ffff }); // 立方体のマテリアルを作成メッシュ
ジオメトリとマテリアルを組み合わせるもの。
ここではすでに作成した図と情報を利用して表現することができる。
const cube = new THREE.Mesh(geometry, material); // 立方体のメッシュを作成
scene.add(cube); // 立方体をシーンに追加
renderer && renderer.render(scene, camera); // シーンとカメラを渡してレンダリングここまで記述できれば簡単な図形がレンダリングされる。