Zenn
💭

Three.jsでCamera、Scene、Rendererなどのお決まり設定の記述を省くためのメモ

2024/03/27に公開
Three.js
tech

概要

three.jsで開発する際にCamera,Scene,Rendererなどを毎回書くのが面倒なのでテンプレとしてメモ。

テンプレの概要は下記です。

・全画面にcanvasを指定
・デバッグ用にlil-guiを使用
・shaderも使うことを想定

パッケージのインストール

three,デバッグ用のlil-guiのパッケージを使用するので、下記でインストール。

yarn add three lil-gui

結論

index.js
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera';
import GUI from 'lil-gui'; 

// shaderを使用するのであれば下記をコメントアウト
// import vertexShader from "./shader/vertexShader";
// import fragmentShader from "./shader/fragmentShader";

// Debug
const dat = new GUI();

// Sizes
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

// Canvas
const canvas = document.querySelector(".webgl");

// Scene
const scene = new THREE.Scene();

// Textures
const textureLoader = new THREE.TextureLoader();

// Camera
const fov = 50; // 任意の数値
const fovRad = (fov / 2) * (Math.PI / 180);
let dist = (window.innerHeight / 2) / Math.tan(fovRad);
const camera = new THREE.PerspectiveCamera(
  fov,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = dist;
scene.add(camera);

// Controls
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;
controls.enableZoom = false; // ズームを無効化
controls.enablePan = false; // ドラッグ移動を無効化
controls.enableRotate = false; // 回転を無効化

// Renderer
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

// Mesh
const geometry = new THREE...  // 任意のジオメトリ
const material = new THREE...　// 任意のマテリアル
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// Animate
const animate = () => {
  // Update controls
  controls.update();

  // Render
  renderer.render(scene, camera);

  window.requestAnimationFrame(animate);
};
animate();


// Resize
window.addEventListener("resize", () => {
  // Update sizes
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;

  // Update camera
  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();

  // Update renderer
  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

解説

Sizes

// Sizes
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

threeで描画する大きさを画面いっぱいに指定します。

sizes.width,sizes.heightとcanvasのサイズを使います。

Camera

// Camera
const fov = 50; // 任意の数値
const fovRad = (fov / 2) * (Math.PI / 180);
let dist = (window.innerHeight / 2) / Math.tan(fovRad);
const camera = new THREE.PerspectiveCamera(
 fov,
 window.innerWidth / window.innerHeight,
 0.1,
 1000
);
camera.position.z = dist;
scene.add(camera);

threeで扱われる数値と、windowのpxを合わせるために上記のような記述をしています。

ジオメトリを作る際に指定する数値がpxとして出力されるので便利。

// width 600px, height 600pxのジオメトリを生成
const geometry = new THREE.PlaneGeometry(600, 600, 500, 500);

参考：https://kakechimaru.com/three_px/

Discussion