読み込み中...

JavaScriptで3Dモデルを動的に扱う10選

JavaScriptを使って動的に扱える3Dモデルの作成方法 JS
2023.05.10
この記事は約10分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

JavaScriptを使って3Dモデルを動的に操作する方法を学びたいと思っているあなたへ、この記事はまさにピッタリです。

この記事を読めば、JavaScriptを使って3Dモデルを動的に操作する方法が習得できるようになります。

初心者の方でも分かりやすい説明とサンプルコードを用意しているので、ぜひ挑戦してみてください。

●JavaScriptと3Dモデルの基本

○Three.jsとは

Three.jsは、JavaScriptで3Dグラフィックスを簡単に扱うことができるライブラリです。

WebGLを使って描画を行いますが、Three.jsを使うことで、煩雑なWebGLのコードを書かずに簡潔なコードで3Dシーンを構築できます。

○WebGLとは

WebGLは、ウェブブラウザ上で3Dグラフィックスを描画するための技術です。

JavaScriptと組み合わせて使用し、GPUを利用して高速な描画が可能です。

●動的な3Dモデルの作成方法

○サンプルコード1：シンプルな3Dモデルの生成

このコードではThree.jsを使ってシンプルな3Dモデルを生成する方法を紹介しています。

この例では、シーン、カメラ、レンダラーを設定し、立方体を追加して表示しています。

// Three.jsをインポート
import * as THREE from 'three';

// シーンを作成
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();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 立方体を作成
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 描画
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

○サンプルコード2：3Dモデルの色変更

このコードでは、マウスクリックを検知して3Dモデルの色を変更する方法を紹介しています。

この例では、立方体の色をランダムに変更する機能を実装しています。

// マウスクリックイベントを設定
document.addEventListener('click', () => {
  // ランダムな色を生成
  const randomColor = new THREE.Color(Math.random() * 0xffffff);

  // 立方体の色を変更
  cube.material.color.set(randomColor);
});

○サンプルコード3：3Dモデルのアニメーション

このコードでは、アニメーションを実装して3Dモデルを動かす方法を紹介しています。

この例では、立方体が回転しながら表示されるアニメーションを実装しています。

// アニメーション関数
function animate() {
  requestAnimationFrame(animate);

  // 立方体を回転させる
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

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

●3Dモデルの応用例

○サンプルコード4：インタラクティブな3Dモデル

このコードでは、マウスによる3Dモデルのインタラクションを実装する方法を紹介しています。

この例では、マウスで立方体をドラッグして位置を変更する機能を実装しています。

// ドラッグ&ドロップのためのコントロールを追加
import { DragControls } from 'three/examples/jsm/controls/DragControls';

const controls = new DragControls([cube], camera, renderer.domElement);

○サンプルコード5：3Dモデルとテクスチャの組み合わせ

このコードでは、テクスチャを読み込んで3Dモデルに適用する方法を紹介しています。

この例では、画像テクスチャを立方体に適用して表示しています。

// テクスチャを読み込む
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg');

// テクスチャを適用したマテリアルを作成
const material = new THREE.MeshBasicMaterial({ map: texture });

// 立方体にマテリアルを適用
cube.material = material;

○サンプルコード6：3Dモデルに光源を追加

このコードでは、3Dモデルに光源を追加し、リアルな照明効果を実現する方法を紹介しています。

この例では、点光源をシーンに追加し、立方体に照明効果を与えています。

// 点光源を作成
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(10, 10, 10);

// シーンに点光源を追加
scene.add(pointLight);

○サンプルコード7：カメラ操作と視点変更

このコードでは、カメラの操作方法を紹介し、視点を変更する方法を説明しています。

この例では、OrbitControlsを使用して、マウスでカメラの視点を自由に操作できるようにしています。

// OrbitControlsをインポート
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

// OrbitControlsをカメラに適用
const controls = new OrbitControls(camera, renderer.domElement);

○サンプルコード8：3Dモデルのシャドウを追加

このコードでは、3Dモデルにシャドウを追加してリアルな陰影表現を実現する方法を紹介しています。

この例では、立方体にシャドウを落とす設定を追加し、シーンに平面を配置してシャドウを投影しています。

// レンダラーのシャドウ設定
renderer.shadowMap.enabled = true;

// 立方体にシャドウ設定を追加
cube.castShadow = true;

// 平面を作成し、シャドウを受けるよう設定
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0xcccccc });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -Math.PI / 2;
scene.add(plane);

○サンプルコード9：3Dモデルのリアルタイム変更

このコードでは、リアルタイムで3Dモデルを変更する方法を紹介しています。

この例では、アニメーション関数内で立方体のサイズをリアルタイムに変更しています。

// アニメーション関数
function animate() {
  requestAnimationFrame(animate);

  // 立方体のサイズをリアルタイムに変更
  cube.scale.x = 1 + Math.sin(Date.now() * 0.001) * 0.5;

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

○サンプルコード10：3Dモデルのエクスポートとインポート

このコードでは、3Dモデルをエクスポートおよびインポートする方法を紹介しています。

この例では、GLTFExporterを使用して3DモデルをGLTFファイル形式でエクスポートし、GLTFLoaderを使用してファイルを読み込んでインポートしています。

// GLTFExporterとGLTFLoaderをインポート
import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

// GLTFExporterをインスタンス化
const exporter = new GLTFExporter();

// 3Dモデルをエクスポート
exporter.parse(scene, (gltf) => {
  const blob = new Blob([JSON.stringify(gltf)], { type: 'application/octet-stream' });
  const url = URL.createObjectURL(blob);
  // ここでエクスポートされたファイルをダウンロードする処理を追加
});

// GLTFLoaderをインスタンス化
const loader = new GLTFLoader();

// 3Dモデルをインポート
loader.load('path/to/your/gltf/file.gltf', (gltf) => {
  scene.add(gltf.scene);
});

●注意点と対処法

Three.jsで3Dモデルを扱う際には、次のような注意点があります。

  1. パフォーマンス：大規模な3Dモデルや多数のオブジェクトを表示する場合、パフォーマンスに影響が出ることがあります。
    対処法として、必要なオブジェクトだけを表示する、モデルのポリゴン数を減らすなどの工夫が必要です。
  2. テクスチャの読み込み：テクスチャが正しく読み込まれない場合、拡張子が対応しているか確認し、必要に応じて変換してください。
  3. 座標系の違い：3Dモデルのファイル形式によっては、座標系が異なる場合があります。
    変換処理を追加することで対応できます。

●カスタマイズ方法

Three.jsでは、独自の3Dモデルを作成することも可能です。GeometryやMaterialを組み合わせて、オリジナルの形状や表面効果を実現できます。

また、シェーダーを使用して、より高度な表現を行うこともできます。

まとめ

本記事では、Three.jsを利用してWebページに3Dモデルを表示する方法について解説しました。

Three.jsは、JavaScriptで3Dモデルを扱うための強力なライブラリであり、簡単に3Dコンテンツを作成できます。

具体的な内容として、Three.jsの基本概念やWebGLについて紹介し、3Dモデルの作成方法やアニメーション、光源の追加などの応用例を説明しました。

また、3Dモデルのエクスポートやインポート、注意点や対処法、カスタマイズ方法についても触れました。

Three.jsを活用することで、インタラクティブな3DコンテンツをWebページに組み込むことが可能となり、ユーザーにとって魅力的なコンテンツを提供できます。