Three.jsとは？ – Three.jsの概要とその魅力について徹底解説

Three.jsは、JavaScriptを使用してブラウザ上で3Dグラフィックスを描画するためのオープンソースライブラリです。
Three.jsを使用することで、WebGLの複雑なAPIを抽象化し、より簡単に3Dコンテンツを作成できます。
このライブラリは、3Dモデルの表示、アニメーションの作成、インタラクティブなシーンの構築など、幅広い機能を提供します。

Three.jsの最大の魅力は、その使いやすさと拡張性です。
初心者でも直感的に扱えるシンプルなAPIを提供しつつ、プロフェッショナルな3Dアプリケーションの開発に必要な高度な機能も備えています。
また、豊富なドキュメントとコミュニティサポートがあるため、学習コストも比較的低く済みます。

Three.jsの特徴

Three.jsには以下のような特徴があります。

簡単なAPI: 複雑なWebGLコードを記述せずに3Dグラフィックスを作成可能。
豊富なオブジェクト: メッシュ、ライト、カメラなどの多様な3Dオブジェクトをサポート。
高いパフォーマンス: 効率的なレンダリングエンジンにより、スムーズな3D表示を実現。
拡張性: プラグインや追加モジュールを利用して機能を拡張可能。
オープンソース: GitHub上で公開されており、誰でも貢献可能。

Three.jsの歴史と背景

Three.jsは、2010年にRicardo Cabello（Mr.doob）によって初めてリリースされました。
WebGLの登場により、ブラウザ上での3Dグラフィックス描画が可能になり、Three.jsはその簡便な利用方法から多くの支持を得ています。
継続的なアップデートとコミュニティの貢献により、Three.jsは今日でも進化し続けています。

Three.jsの用途と利用シーン

Three.jsは、ゲーム開発、教育用コンテンツ、データビジュアライゼーション、アートプロジェクトなど、さまざまな分野で利用されています。
特にWebGLの複雑さを軽減することで、クリエイターやエンジニアにとって強力なツールとなっています。
以下は、Three.jsを使用したいくつかのプロジェクトの例です。

インタラクティブな3Dウェブサイト
ブラウザベースの3Dゲーム
教育用のシミュレーションやデモ
科学データのビジュアライゼーション
アートインスタレーション

Three.jsのエコシステム

Three.jsのエコシステムは非常に豊富で、多くのサードパーティ製プラグインやツールが存在します。
これらを活用することで、さらに強力な3Dコンテンツを簡単に作成することができます。
例えば、Three.jsと一緒に使用されることが多いライブラリには、3Dモデルのロードを容易にする「GLTFLoader」や、物理エンジンを統合する「Cannon.js」などがあります。

Three.jsの将来性

Three.jsは、その活発な開発とコミュニティサポートにより、今後も成長が期待されるライブラリです。
Web技術の進化に伴い、よりリッチでインタラクティブな3Dコンテンツの需要が高まっており、Three.jsはその重要な役割を担っています。
今後のバージョンアップでは、パフォーマンスの向上や新機能の追加が予定されており、開発者にとってますます魅力的なツールとなるでしょう。

Three.jsのインストール方法 – プロジェクトへの導入手順を詳しく説明

Three.jsをプロジェクトに導入する方法は複数ありますが、ここでは最も一般的な方法をいくつか紹介します。

CDNを利用する方法

最も簡単な方法は、CDN（Content Delivery Network）を利用することです。
CDNを使用すると、Three.jsのライブラリを外部から読み込むことができます。
以下は、CDNを利用したサンプルコードです。

<!DOCTYPE html>
<html>
<head>
    <title>Three.js CDN Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
    <script>
        // Three.jsコードをここに記述
    </script>
</body>
</html>

NPMを使用する方法

Node.js環境で開発を行う場合、NPM（Node Package Manager）を使用してThree.jsをインストールすることができます。
以下は、その手順です。

npm install three

インストール後、以下のようにimport文を使用してThree.jsをプロジェクトに組み込むことができます。

import * as THREE from 'three';

ダウンロードして使用する方法

公式サイトからThree.jsのライブラリをダウンロードしてプロジェクトに組み込む方法もあります。
この方法は、インターネットに接続せずに開発を行いたい場合に便利です。
公式サイトからダウンロードし、プロジェクトの適切なディレクトリに配置します。

Three.jsのバージョン管理

Three.jsのバージョンは頻繁に更新されます。
新機能やバグ修正が含まれるため、定期的に最新バージョンにアップデートすることが推奨されます。
NPMを使用している場合、以下のコマンドで最新バージョンに更新できます。

npm update three

WebpackやParcelと連携する方法

モダンなJavaScript開発では、WebpackやParcelなどのバンドラーを使用することが一般的です。
これらを利用することで、Three.jsを含む複数のJavaScriptファイルを効率的に管理し、最適化されたバンドルを生成することができます。
以下は、Webpackを使用した設定例です。

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

Three.jsの基本的な使い方 – シーン、カメラ、レンダラーの設定方法を解説

Three.jsを使って3Dグラフィックスを描画するためには、シーン、カメラ、レンダラーの設定が基本となります。
これらの設定は、3D空間を構築し、表示するために必須の要素です。
以下に、Three.jsの基本的な使い方として、シーン、カメラ、レンダラーを設定する手順を紹介します。

シーンの設定

シーンは、3Dオブジェクトを配置するためのコンテナのような役割を果たします。
まず、シーンを作成します。

const scene = new THREE.Scene();

次に、シーンにオブジェクトを追加します。
ここでは、シンプルなキューブを追加します。

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

カメラの設定

カメラは、シーン内のオブジェクトをどのように表示するかを決定します。
Three.jsには複数のカメラタイプがありますが、一般的には透視投影カメラ（PerspectiveCamera）が使用されます。

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

このカメラは、視野角75度、アスペクト比ウィンドウの幅と高さ、近くのクリッピング面0.1、遠くのクリッピング面1000の設定になっています。

レンダラーの設定

レンダラーは、シーンとカメラを使用して実際に描画を行う役割を担います。
Three.jsでは、WebGLRendererが最も一般的に使用されます。

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

ここでは、レンダラーのサイズをウィンドウ全体に設定し、レンダラーのDOM要素をHTMLのボディに追加しています。

アニメーションループの作成

アニメーションを作成するためには、アニメーションループを設定します。
このループ内で、シーンの更新と再描画を行います。

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

この関数では、キューブを回転させながらシーンを再描画しています。

ウィンドウサイズの変更に対応

最後に、ウィンドウサイズが変更されたときにカメラとレンダラーのサイズを更新する設定を追加します。

window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

これで、ウィンドウサイズが変更されても正しく描画されるようになります。

以上が、Three.jsの基本的な使い方の概要です。
これらの設定を理解することで、Three.jsを使用した3Dコンテンツの作成がスムーズに行えるようになります。

Three.jsで3Dモデルを作成する – 基本から応用までのステップバイステップガイド

Three.jsを使用して3Dモデルを作成する方法をステップバイステップで解説します。
ここでは、基本的なジオメトリを作成する方法から、外部の3Dモデルをロードする方法までを紹介します。

基本的なジオメトリの作成

Three.jsでは、BoxGeometryやSphereGeometryなどのプリミティブなジオメトリを簡単に作成することができます。
以下は、基本的なキューブを作成する例です。

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

このコードでは、1x1x1のキューブを緑色のマテリアルで作成し、シーンに追加しています。

カスタムジオメトリの作成

Three.jsでは、カスタムジオメトリを作成することもできます。
以下は、カスタムジオメトリを作成する例です。

const customGeometry = new THREE.Geometry();
customGeometry.vertices.push(new THREE.Vector3(-1, 1, 0));
customGeometry.vertices.push(new THREE.Vector3(1, 1, 0));
customGeometry.vertices.push(new THREE.Vector3(1, -1, 0));
customGeometry.faces.push(new THREE.Face3(0, 1, 2));
const customMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const customMesh = new THREE.Mesh(customGeometry, customMaterial);
scene.add(customMesh);

このコードでは、三角形のカスタムジオメトリを作成し、赤色のマテリアルでレンダリングしています。

外部の3Dモデルをロードする

外部の3DモデルをThree.jsで使用するには、GLTFLoaderなどのローダーを使用します。
以下は、GLTF形式のモデルをロードする例です。

const loader = new THREE.GLTFLoader();
loader.load('path/to/model.gltf', function (gltf) {
    scene.add(gltf.scene);
});

このコードでは、指定したパスにあるGLTFモデルをロードし、シーンに追加しています。

モデルのテクスチャを設定する

3Dモデルにテクスチャを設定することで、リアリスティックな見た目を実現できます。
以下は、テクスチャを設定する例です。

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg');
const texturedMaterial = new THREE.MeshBasicMaterial({ map: texture });
const texturedCube = new THREE.Mesh(geometry, texturedMaterial);
scene.add(texturedCube);

このコードでは、テクスチャをロードし、マテリアルに適用しています。

モデルのアニメーションを設定する

Three.jsでは、モデルにアニメーションを設定することもできます。
以下は、キーフレームアニメーションを設定する例です。

const mixer = new THREE.AnimationMixer(gltf.scene);
const action = mixer.clipAction(gltf.animations[0]);
action.play();

function animate() {
    requestAnimationFrame(animate);
    mixer.update(clock.getDelta());
    renderer.render(scene, camera);
}
animate();

このコードでは、アニメーションミキサーを使用してモデルにアニメーションを適用し、毎フレーム更新しています。

以上が、Three.jsを使用した3Dモデルの作成方法の基本から応用までのステップバイステップガイドです。

Three.jsでアニメーションを作成する – 効果的なアニメーションの実装方法を紹介

Three.jsを使用してアニメーションを作成する方法を紹介します。
ここでは、基本的なオブジェクトのアニメーションから、複雑なシーン全体のアニメーションまで、様々なテクニックを解説します。

基本的なオブジェクトのアニメーション

まず、基本的なオブジェクトのアニメーションを作成する方法を紹介します。
以下は、キューブを回転させるシンプルなアニメーションの例です。

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

このコードでは、毎フレームごとにキューブの回転角度を更新し、シーンを再描画しています。

キーフレ

ームアニメーションの作成

Three.jsでは、キーフレームアニメーションを使用して複雑なアニメーションを作成することも可能です。
以下は、キーフレームを使用したアニメーションの例です。

const keyframes = [
    { time: 0, value: 0 },
    { time: 1, value: Math.PI },
    { time: 2, value: Math.PI * 2 }
];

const track = new THREE.NumberKeyframeTrack('.rotation[y]', keyframes);
const clip = new THREE.AnimationClip('rotateY', 2, [track]);
const mixer = new THREE.AnimationMixer(cube);
const action = mixer.clipAction(clip);
action.play();

このコードでは、キーフレームトラックを作成し、それを使用してキューブのY軸回転アニメーションを定義しています。

シーン全体のアニメーション

シーン全体をアニメーションさせる方法もあります。
例えば、カメラの位置をアニメーションさせて、シーン内を移動するような効果を作成できます。

const cameraKeyframes = [
    { time: 0, position: new THREE.Vector3(0, 0, 5) },
    { time: 1, position: new THREE.Vector3(0, 0, -5) }
];

const cameraTrack = new THREE.VectorKeyframeTrack('.position', cameraKeyframes);
const cameraClip = new THREE.AnimationClip('moveCamera', 1, [cameraTrack]);
const cameraMixer = new THREE.AnimationMixer(camera);
const cameraAction = cameraMixer.clipAction(cameraClip);
cameraAction.play();

このコードでは、カメラの位置をアニメーションさせています。

タイムラインの管理

複数のアニメーションを同期させるためには、タイムラインを管理することが重要です。
以下は、複数のアニメーションをタイムラインに追加して管理する例です。

const timeline = new THREE.AnimationMixer(scene);
timeline.clipAction(clip1).play();
timeline.clipAction(clip2).play();

function animate() {
    requestAnimationFrame(animate);
    const delta = clock.getDelta();
    timeline.update(delta);
    renderer.render(scene, camera);
}
animate();

このコードでは、複数のアニメーションクリップをタイムラインに追加し、毎フレーム更新しています。

アニメーションのループと再生制御

Three.jsでは、アニメーションのループや再生を制御することも可能です。
以下は、アニメーションをループさせる設定例です。

action.setLoop(THREE.LoopRepeat, Infinity);
action.play();

このコードでは、アニメーションを無限にループさせています。

以上が、Three.jsを使用してアニメーションを作成する方法の解説です。
これらのテクニックを活用することで、より魅力的な3Dコンテンツを作成できます。

Three.jsでライトとマテリアルを設定する – 照明と質感の基本と応用テクニック

Three.jsでライトとマテリアルを設定する方法を紹介します。
ここでは、基本的なライトの種類とその設定方法、マテリアルの種類と設定方法について詳しく解説します。

基本的なライトの設定

Three.jsでは、様々な種類のライトを使用することができます。
以下は、基本的なポイントライトの設定例です。

const pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);

このコードでは、白色のポイントライトをシーンに追加し、位置を設定しています。

アンビエントライトの設定

アンビエントライトは、シーン全体に均一な照明を提供します。
以下は、アンビエントライトの設定例です。

const ambientLight = new THREE.AmbientLight(0x404040); // 白色の弱い光
scene.add(ambientLight);

このコードでは、シーン全体に弱い白色の光を追加しています。

ディレクショナルライトの設定

ディレクショナルライトは、特定の方向に向かって光を照射します。
以下は、その設定例です。

const directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);

このコードでは、特定の方向に向かって光を照射するディレクショナルライトを設定しています。

マテリアルの基本設定

Three.jsでは、様々な種類のマテリアルを使用することができます。
以下は、基本的なマテリアルの設定例です。

const basicMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const phongMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00, shininess: 100 });
const lambertMaterial = new THREE.MeshLambertMaterial({ color: 0x00ff00 });

このコードでは、基本的なマテリアル、フォンマテリアル、ランバートマテリアルを設定しています。

テクスチャの設定

マテリアルにテクスチャを設定することで、よりリアルな質感を実現できます。
以下は、テクスチャを設定する例です。

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg');
const texturedMaterial = new THREE.MeshBasicMaterial({ map: texture });
const texturedCube = new THREE.Mesh(geometry, texturedMaterial);
scene.add(texturedCube);

このコードでは、テクスチャをロードし、マテリアルに適用しています。

以上が、Three.jsでライトとマテリアルを設定する方法の解説です。
これらの設定を活用することで、シーンの見た目や雰囲気を大きく変えることができます。

Three.jsでカメラの設定を行う – 視点の設定と操作方法を詳しく解説

Three.jsでカメラの設定を行う方法を解説します。
カメラは、シーン内のオブジェクトをどのように表示するかを決定する重要な要素です。
ここでは、基本的なカメラの設定方法から、カメラの操作方法までを紹介します。

基本的なカメラの設定

Three.jsでは、透視投影カメラ（PerspectiveCamera）と直交投影カメラ（OrthographicCamera）の2種類のカメラを使用できます。
以下は、透視投影カメラの設定例です。

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
scene.add(camera);

このコードでは、視野角75度、アスペクト比ウィンドウの幅と高さ、近くのクリッピング面0.1、遠くのクリッピング面1000の透視投影カメラを設定しています。

カメラのポジションとターゲット設定

カメラの位置や向きを設定することで、視点を調整できます。
以下は、カメラのポジションとターゲットを設定する例です。

camera.position.set(0, 1, 5);
camera.lookAt(new THREE.Vector3(0, 0, 0));

このコードでは、カメラの位置を設定し、原点（0, 0, 0）を注視するように設定しています。

カメラの操作

Three.jsには、カメラを操作するためのコントロールライブラリも用意されています。
例えば、OrbitControlsを使用すると、カメラをマウスで操作することができます。

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.update();

このコードでは、OrbitControlsを使用してカメラの操作を有効にしています。

カメラのアニメーション

カメラの位置や向

きをアニメーションさせることで、ダイナミックな視点移動を実現できます。
以下は、カメラの位置をアニメーションさせる例です。

const tween = new TWEEN.Tween(camera.position)
    .to({ x: 10, y: 10, z: 10 }, 2000)
    .easing(TWEEN.Easing.Quadratic.Out)
    .onUpdate(() => {
        camera.lookAt(scene.position);
    })
    .start();

このコードでは、TWEEN.jsを使用してカメラの位置をアニメーションさせています。

ウィンドウサイズの変更に対応

ウィンドウサイズが変更されたときにカメラとレンダラーのサイズを更新する設定を追加します。

window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

このコードでは、ウィンドウサイズが変更されてもカメラのアスペクト比が正しく更新されるようにしています。

以上が、Three.jsでカメラの設定を行う方法の解説です。
これらの設定を理解することで、シーンの視点を自由に調整できるようになります。

Three.jsでシーンを設定する – 効果的なシーンの作成と管理方法を紹介

Three.jsでシーンを設定する方法を解説します。
シーンは、3Dオブジェクトやライト、カメラなどを配置するためのコンテナです。
ここでは、基本的なシーンの作成方法から、複数のシーンを管理する方法までを紹介します。

基本的なシーンの作成

Three.jsでは、シーンオブジェクトを作成して3Dコンテンツを管理します。
以下は、基本的なシーンの作成例です。

const scene = new THREE.Scene();

このコードでは、空のシーンを作成しています。
次に、シーンにオブジェクトを追加します。

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

このコードでは、キューブオブジェクトをシーンに追加しています。

シーンの背景設定

シーンの背景を設定することで、より魅力的なビジュアルを実現できます。
以下は、シーンの背景色を設定する例です。

scene.background = new THREE.Color(0x000000); // 黒色

このコードでは、シーンの背景色を黒に設定しています。

フォグの設定

フォグを設定することで、奥行き感や雰囲気を強調できます。
以下は、シーンにフォグを追加する例です。

scene.fog = new THREE.Fog(0x000000, 0.1, 50);

このコードでは、黒色のフォグを設定しています。

シーンのアップデート

シーンのオブジェクトを動的に更新する場合、アニメーションループ内で変更を加えます。
以下は、シーン内のオブジェクトを回転させる例です。

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

このコードでは、毎フレームごとにキューブの回転角度を更新し、シーンを再描画しています。

複数のシーンを管理する方法

複数のシーンを管理することで、異なるコンテンツを同時に表示したり、切り替えたりすることができます。
以下は、複数のシーンを管理する例です。

const scene1 = new THREE.Scene();
const scene2 = new THREE.Scene();

// それぞれのシーンにオブジェクトを追加
const cube1 = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0xff0000 }));
const cube2 = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0x0000ff }));
scene1.add(cube1);
scene2.add(cube2);

// レンダリングループでシーンを切り替え
function render() {
    requestAnimationFrame(render);
    renderer.render(scene1, camera);
    setTimeout(() => {
        renderer.render(scene2, camera);
    }, 1000);
}
render();

このコードでは、1秒ごとにシーン1とシーン2を切り替えて表示しています。

以上が、Three.jsでシーンを設定する方法の解説です。
これらの設定を理解することで、シーンの作成と管理が容易になります。

Three.jsでレンダラーを設定する – 効率的なレンダリング設定とその最適化方法

Three.jsでレンダラーを設定する方法を解説します。
レンダラーは、シーンとカメラを使用して描画を行う重要な要素です。
ここでは、基本的なレンダラーの設定方法から、レンダリングの最適化方法までを紹介します。

基本的なレンダラーの設定

Three.jsでは、シーンをレンダリングするためにWebGLRendererを使用します。
レンダラーは、シーンとカメラを使用して実際に描画を行います。
以下に、基本的なレンダラーの設定方法を示します。

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

このコードでは、レンダラーのサイズをウィンドウ全体に設定し、レンダラーのDOM要素をHTMLのボディに追加しています。
これにより、Three.jsが描画するためのキャンバスがブラウザに表示されます。

レンダラーのパラメータ設定

レンダラーのパラメータを設定することで、描画品質やパフォーマンスを調整することができます。
以下は、アンチエイリアスを有効にする設定例です。

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

このコードでは、アンチエイリアスを有効にしたレンダラーを作成しています。
アンチエイリアスは、エッジのギザギザを滑らかにするための技術で、描画品質を向上させます。

レンダラーの背景色設定

レンダラーの背景色を設定することで、シーンの見た目をカスタマイズすることができます。
以下は、背景色を黒に設定する例です。

renderer.setClearColor(0x000000); // 背景色を黒に設定

このコードでは、レンダラーの背景色を黒に設定しています。
背景色は、シーンがレンダリングされる前に描画される色です。

レンダリングの最適化

大規模なシーンや高負荷なレンダリングを行う場合、パフォーマンスを最適化することが重要です。
レンダリングの最適化には、いくつかの方法があります。

静的なシーンでは、変更がない場合にレンダリングをスキップする
シーン内のオブジェクト数を最小限に抑える
適切なテクスチャの解像度を使用する
シェーダーの最適化を行う

以下は、レンダリングを必要な場合にのみ実行する例です。

let needsRender = true;

function animate() {
    if (needsRender) {
        renderer.render(scene, camera);
        needsRender = false;
    }
    requestAnimationFrame(animate);
}

function updateScene() {
    needsRender = true;
}
animate();

このコードでは、シーンが変更されたときにのみレンダリングを実行するようにしています。

ウィンドウサイズの変更に対応

ウィンドウサイズが変更されたときにカメラとレンダラーのサイズを更新する設定を追加します。
これにより、ウィンドウサイズが変更されても正しく描画されるようになります。

window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

このコードでは、ウィンドウサイズが変更されるたびにカメラのアスペクト比とレンダラーのサイズを更新しています。

以上が、Three.jsでレンダラーを設定する方法の解説です。
これらの設定を理解することで、効率的なレンダリングが可能になり、描画品質とパフォーマンスを向上させることができます。

Three.jsとは？ – Three.jsの概要とその魅力について徹底解説