架空のキャプテンピカチュウを作ろう

2024年10月5日 07:00

今回は、最新の技術を使って「キャプテンピカチュウ」を実際に作り出してみた方法をシェアしたいと思います。試してみた結果、みんなが知っている本物のキャプテンピカチュウとは少し異なりますが、それがまた面白いところです。今回は架空の「キャプテンピカチュウ」を作成したので、そのプロセスを実際にどう進めたのかをご紹介します。

1. ImageFXでリアルなキャプテンピカチュウを作成

まず最初に試したのは、ImageFXというツールです。このツールでは、テキストを入力するだけで非常にリアルな画像を生成することができます。今回は「キャプテンピカチュウ」と入力してみました。その結果、イメージから生まれたオリジナルのキャラクターですが、それが実際に目の前に現れる感覚はとても新鮮で、印象的な体験でした。

2. Tripoで3Dモデルを自動生成

次に試したのは、Tripoというツールです。このツールの特長は、3Dモデルを自動生成するだけでなく、背景も自動で作成してくれる点です。しかも、その背景が非常に自然で、キャラクターと一体感を持って溶け込んでいるのが印象的でした。

今回は、キャプテンピカチュウを3Dモデル化してみました。Tripoは、正面の画像だけでなく、背景も含めたシーン全体を作り上げてくれます。その結果、まるでピカチュウが現実の風景の中に存在しているかのようなリアルな体験ができました。3Dモデリングの経験がない初心者でも簡単に使える点も非常に魅力的です。自分が思い描いたキャラクターを、その世界の中で自由に動かしてみる楽しさをぜひ体験してみてください。

3. Three.jsでWeb上に表示してみよう！

さて、次にご紹介するのはThree.jsです。このJavaScriptライブラリを使うことで、Web上に自分の3Dモデルを簡単に表示することができます。特に魅力的なのは、少しのコードを書くことで、すぐにWebページにキャラクターやオブジェクトを配置できる点です。

例えば、以下のコードを使うと、Web上に立方体を表示することが可能です。

#html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- モバイル端末での表示を最適化するためのビューポート設定 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Three.js</title>
    <!-- 外部のCSSファイルの読み込み -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- Three.jsの読み込み。CDN経由でライブラリを使用 -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"
      integrity="sha512-dLxUelApnYxpLt6K2iomGngnHO83iUvZytA3YjDUCjT0HDOHKXnVYdf3hU4JjM8uEhxf9nD1/ey98U3t2vZ0qQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    
    <!-- GLTF形式の3Dモデルを読み込むためのライブラリの読み込み -->
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
    
    <!-- カメラ操作用のOrbitControlsの読み込み -->
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
    
    <!-- メインスクリプトの読み込み -->
    <script src="main.js"></script>
  </body>
</html>

#javascript
let scene, camera, renderer, model, controls;

function init() {
  // シーンを作成
  scene = new THREE.Scene();
  
  // カメラの作成 (視野角65, アスペクト比, 近距離/遠距離の範囲を設定)
  camera = new THREE.PerspectiveCamera(
    65,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );

  // レンダラーの作成 (アンチエイリアスを有効にする)
  renderer = new THREE.WebGLRenderer({ antialias: true });
  // レンダラーのサイズをウィンドウ全体に設定
  renderer.setSize(window.innerWidth, window.innerHeight);
  // DOMにレンダラーを追加 (canvas要素として)
  document.body.appendChild(renderer.domElement);

  // 環境光の追加 (白色光、強度1)
  const ambientLight = new THREE.AmbientLight(0xffffff, 1);
  scene.add(ambientLight);

  // GLTFLoaderで3Dモデルの読み込み
  const loader = new THREE.GLTFLoader();
  loader.load(
    "Pikachu.glb", // GLTF形式の3Dモデルファイルを指定
    function (gltf) {
      model = gltf.scene; // 読み込んだモデルを取得
      scene.add(model); // モデルをシーンに追加

      // モデルの位置とサイズを設定
      model.position.set(0, 0, 0);
      model.scale.set(1, 1, 1);
    },
    undefined,
    function (error) {
      console.error(error); // 読み込みに失敗した場合のエラーハンドリング
    }
  );

  // カメラの位置を設定 (Z方向に離す)
  camera.position.z = 5;

  // カメラコントロール用のOrbitControlsを追加
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true; // 慣性効果を有効化
  controls.dampingFactor = 0.25; // 慣性の強度を設定

  // 初期コントロール状態を更新
  controls.update();
}

function animate() {
  // フレームごとに再描画を行う (アニメーションループ)
  requestAnimationFrame(animate);

  // モデルの自動回転を削除したバージョン
  // if (model) {
  //   model.rotation.x += 0.01; // X軸方向の回転 (削除済み)
  //   model.rotation.y += 0.01; // Y軸方向の回転 (削除済み)
  // }

  // コントロールを更新し、カメラ操作を反映
  controls.update();

  // シーンとカメラの状態をレンダリングする
  renderer.render(scene, camera);
}

function onWindowResize() {
  // ウィンドウサイズ変更時にカメラとレンダラーのサイズを再調整
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

// ウィンドウリサイズイベントに対してリスナーを設定
window.addEventListener("resize", onWindowResize, false);

init(); // 初期化関数を実行してシーンをセットアップ
animate(); // アニメーションループを開始

#css
body {
    margin: 0; /* ページ全体に余白を設定しない */
  }
  
canvas {
    width: 100%;
    height: 100%; /* キャンバスがウィンドウ全体に表示されるよう設定 */
  }

このコードを使えば、簡単に3DオブジェクトをWeb上で動かすことができます。自分のキャラクターやモデルをブラウザで自由に動かせるというのは、想像するだけでも楽しさが広がります。例えば、キャプテンピカチュウがブラウザの中で回転したり、動き回ったりする姿を思い浮かべてみてください。

架空のキャプテンピカチュウを作り上げる

今回ご紹介した3つのツール、ImageFX、Tripo、そしてThree.jsを組み合わせれば、自分だけのオリジナル「キャプテンピカチュウ」を簡単に作り上げることができます。テキスト入力で架空のキャラクターを生成し、3DモデルとしてWeb上で動かすことができるので、技術的にも手軽で楽しさが尽きません。

特に、Tripoが自動で生成する背景がキャラクターと自然に調和する点は注目に値します。これにより、自分の世界観をよりリアルに表現することができるのです。