第3回クリエイティブ・コーディング：Three.jsとシェーダーの魔法

import * as THREE from 'three';

// -----------------------------------------------------------
// 1. 舞台装置（Renderer）の準備
// -----------------------------------------------------------
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio); // 高精細ディスプレイ対応
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// -----------------------------------------------------------
// 2. 舞台（Scene）とカメラ（Camera）
// -----------------------------------------------------------
const scene = new THREE.Scene();

// 今回は「板」を画面いっぱいに映すだけなので、
// 座標 (-1, 1) の範囲を映す特殊なカメラを使います
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);

// -----------------------------------------------------------
// 3. 役者（Mesh）＝ 形（Geometry）＋ 魔法の肌（Material）
// -----------------------------------------------------------
// 画面全体を覆う 2x2 の板
const geometry = new THREE.PlaneGeometry(2, 2);

const material = new THREE.ShaderMaterial({
  // 頂点シェーダー：板を画面の隅々まで広げる設定
  vertexShader: `
    void main() {
      gl_Position = vec4(position, 1.0);
    }
  `,

  // 🔥【ここが Shadertoy のコードを貼り付ける場所！】🔥
  fragmentShader: `
    void main() {
      // 翻訳したコードをここに！ 
      // 例：オレンジ色で塗りつぶす
      gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0);
    }
  `
});

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// -----------------------------------------------------------
// 4. 【重要】リサイズ対策：画面の大きさが変わったら追いかける
// -----------------------------------------------------------
window.addEventListener('resize', () => {
  // ブラウザのサイズを取得
  const width = window.innerWidth;
  const height = window.innerHeight;

  // レンダラー（描画装置）のサイズを更新
  renderer.setSize(width, height);

  // カメラの比率などは今回 Orthographic なので固定でOKですが、
  // 通常の3D（PerspectiveCamera）ならここでもっと複雑な更新をします
});

// -----------------------------------------------------------
// 5. 上映開始（アニメーションループ）
// -----------------------------------------------------------
function animate() {
  // 1秒間に60回、自分自身を呼び出し続ける
  requestAnimationFrame(animate);

  // 描画！
  renderer.render(scene, camera);
}

animate();

import { Canvas } from '@react-three/fiber'

function ShaderPlane() {
  return (
    <mesh>
      {/* 1. 役者の「形」を決める（2x2の板） */}
      <planeGeometry args={[2, 2]} />

      {/* 2. 役者の「肌（シェーダー）」を決める */}
      <shaderMaterial
        // 頂点シェーダー：板を画面いっぱいに広げる
        vertexShader={`
          void main() {
            gl_Position = vec4(position, 1.0);
          }
        `}
        // 🔥【ここが Shadertoy のコードを貼り付ける場所！】🔥
        fragmentShader={`
          void main() {
            // ここに翻訳したコードを流し込む
            gl_FragColor = vec4(0.0, 0.8, 1.0, 1.0); // 水色の魔法
          }
        `}
      />
    </mesh>
  )
}

export default function App() {
  return (
    // Canvasタグが「Scene」「Camera」「Renderer」「Animation Loop」を
    // すべて自動で準備し、リサイズ対応までやってくれます！
    <Canvas style={{ width: '100vw', height: '100vh' }}>
      <ShaderPlane />
    </Canvas>
  )
}