【Three.js】Three.js入門 - シーン構築・モデル読み込み・ポストプロセスまで

<script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.182.0/examples/jsm/"
    }
  }
</script>

npx serve .

import * as THREE from "three";

// Rendererを作成してDOMに追加
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// SceneとCameraを作成
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000,
);
camera.position.z = 5;

// BoxGeometry + MeshBasicMaterial でCubeを作成してシーンに追加
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
  color: 0x00ff00,
  wireframe: true,
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// フレームごとにCubeを回転させる
function update(deltaTime) {
  cube.rotation.x += 1 * deltaTime;
  cube.rotation.y += 1 * deltaTime;
}

// アニメーションループを開始
const clock = new THREE.Clock();
renderer.setAnimationLoop(() => {
  const deltaTime = clock.getDelta();
  update(deltaTime);
  renderer.render(scene, camera);
});

import * as THREE from "three";
import WebGL from "three/addons/capabilities/WebGL.js";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { MainScene } from "./main-scene.js";

class MainApp {
  constructor(container) {
    if (!container) return;

    // WebGL2対応チェック
    if (!WebGL.isWebGL2Available()) {
      this.container.appendChild(WebGL.getWebGLErrorMessage());
      return;
    }

    this.clock = new THREE.Clock();
    this.main_scene = new MainScene(this.width, this.height);
    this.renderer = new THREE.WebGLRenderer();
    this.renderer.setSize(this.width, this.height);
    this.renderer.setAnimationLoop(() => {
      const deltaTime = this.clock.getDelta();
      this.onUpdate(deltaTime);
    });
    this.container.appendChild(this.renderer.domElement);

    // マウスでカメラを操作できるOrbitControlsを追加
    this.orbit_controls = new OrbitControls(
      this.main_scene.camera,
      this.renderer.domElement,
    );

    // ウィンドウリサイズに対応
    window.addEventListener("resize", () =>
      this.onWindowResize(this.width, this.height),
    );
  }

  get width() { return this.container.clientWidth; }
  get height() { return this.container.clientHeight; }

  onUpdate(deltaTime) {
    this.main_scene.onUpdate(deltaTime);
    this.orbit_controls.update(deltaTime);
    this.renderer.render(this.main_scene.scene, this.main_scene.camera);
  }

  onWindowResize(width, height) {
    this.renderer.setSize(width, height);
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.main_scene.onWindowResize(width, height);
  }
}

window.addEventListener("load", () => {
  const container = document.getElementById("container");
  new MainApp(container);
});

onWindowResize(width, height) {
  this.camera.aspect = width / height;
  this.camera.updateProjectionMatrix(); // 投影行列を再計算
}

window.addEventListener("load", () => {
  const container = document.getElementById("container");
  new MainApp(container);
});

// 環境光を追加
const aoLight = new THREE.AmbientLight(0xffffff, 0.5);
this.scene.add(aoLight);

// 平行光源を追加
const dirLight = new THREE.DirectionalLight(0xffffff, 0.5);
dirLight.position.set(10, 10, 5);
this.scene.add(dirLight);

const heartShape = new THREE.Shape();
const x = -2.5, y = -5;
heartShape.moveTo(x + 2.5, y + 2.5);
heartShape.bezierCurveTo(x + 2.5, y + 2.5, x + 2, y, x, y);
heartShape.bezierCurveTo(x - 3, y, x - 3, y + 3.5, x - 3, y + 3.5);
// ...（ベジェ曲線でハート形状を定義）

const heartExtrudeSettings = {
  steps: 2, depth: 2, bevelEnabled: true,
  bevelThickness: 1, bevelSize: 1, bevelSegments: 2,
};
const heartGeometry = new THREE.ExtrudeGeometry(heartShape, heartExtrudeSettings);
heartGeometry.scale(0.075, 0.075, 0.075);

import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";

async loadModelAsync() {
  const loader = new GLTFLoader();
  const model = await loader.loadAsync("public/models/SM_Star.glb");

  // MeshToonMaterialに差し替え
  const material = new THREE.MeshToonMaterial({ color: "yellow" });
  model.scene.traverse((child) => {
    if (child.isMesh) {
      child.material = material;
    }
  });
  this.root.add(model.scene);
}

import { FBXLoader } from "three/addons/loaders/FBXLoader.js";

async loadModelAsync() {
  const loader = new FBXLoader(manager);
  const model = await loader.loadAsync("public/models/SM_Elekibear.fbx");

  // テクスチャを読み込んでMaterialに設定
  const baseColorTex = await new THREE.TextureLoader().loadAsync(
    "public/textures/T_Elekibear.png",
  );
  baseColorTex.colorSpace = THREE.SRGBColorSpace; // ← 重要！

  const material = new THREE.MeshToonMaterial({
    color: new THREE.Color(0xffffff),
    map: baseColorTex,
  });
  model.traverse((child) => {
    if (child.isMesh) child.material = material;
  });

  // AnimationMixerでアニメーションを再生
  this.animMixer = new THREE.AnimationMixer(model);
  const clip = model.animations[0];
  const action = this.animMixer.clipAction(clip);
  action.setLoop(THREE.LoopPingPong);
  action.play();

  this.root.add(model);
}

onUpdate(deltaTime) {
  if (this.animMixer) {
    this.animMixer.update(deltaTime); // Mixerをフレームごとに更新
  }
}

const manager = new THREE.LoadingManager();
manager.setURLModifier((url) => {
  // 画像ファイルのURLを強制的に差し替える
  if (/\.(png|jpe?g|tga|bmp|gif)$/i.test(url))
    return this.BASE_COLOR_TEX_PATH;
  return url;
});
const loader = new FBXLoader(manager);

import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { GlitchPass } from "three/addons/postprocessing/GlitchPass.js";
import { OutputPass } from "three/addons/postprocessing/OutputPass.js";

this.composer = new EffectComposer(this.renderer);
this.composer.addPass(new RenderPass(scene, camera));    // 通常のシーン描画
this.composer.addPass(new CustomFilmGrainPass(...));     // フィルムグレイン（カスタム）
this.composer.addPass(new GlitchPass());                 // グリッチ（組み込み）
this.composer.addPass(new OutputPass());                 // 最終出力（必須）

// renderer.render()の代わりにcomposer.render()を呼ぶ
this.composer.render();

import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";

export class CustomFilmGrainPass extends ShaderPass {
  static VERT_SHADER = `
varying vec2 vUv;

void main() {
  vUv = uv;
  gl_Position = vec4(position, 1.0);
}
`;

  static FRAG_SHADER = `
uniform sampler2D tDiffuse;
uniform float uTime;
uniform float uStrength;
uniform float uSpeed;

varying vec2 vUv;

float random(vec2 st) {
  return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453);
}

void main() {

  vec4 col = texture2D(tDiffuse, vUv);

  float noise = random(vUv + uTime * uSpeed * 10.0) - 0.5;
  float flicker = 0.9 + 0.1 * sin(uTime * uSpeed * 8.0);
  col.rgb += noise * uStrength * flicker;

  gl_FragColor = col;
}
`;

  constructor({ strength = 0.25, speed = 0.1, time = 0.0 } = {}) {
    super({
      uniforms: {
        tDiffuse: { value: null },
        uTime: { value: time },
        uStrength: { value: strength },
        uSpeed: { value: speed },
      },
      vertexShader: CustomFilmGrainPass.VERT_SHADER,
      fragmentShader: CustomFilmGrainPass.FRAG_SHADER,
    });
  }

  onUpdate(deltaTime) {
    this.material.uniforms.uTime.value += deltaTime;
  }
}