Web 開発では、3D グラフィックスがますます注目を集めており、WebGL に基づく JavaScript 3D レンダリング ライブラリである Three.js は、複雑な 3D シーンを簡単かつ迅速に作成する方法を提供します。Three.js の学習を始めたばかりで、すぐに始めたい場合は、この記事で JavaScript で簡単な 3D シーンを構築する方法を説明します。
1. シーンを作成する
まず、Three.js シーンを作成する必要があります。空の `<div>` 要素を HTML ファイルに追加し、JavaScript を使用して基本的なシーン オブジェクトを作成します。
var scene = new THREE.Scene();2. カメラを追加する
次に、シーンを正しい角度から表示できるようにカメラを追加する必要があります。Three.js は、透視カメラ (PerspectiveCamera) や直交カメラ (OrthographicCamera) など、複数の種類のカメラをサポートしています。ここではパースカメラを使用して遠近感のある3D効果を作り出します。
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);このうち、最初のパラメータはカメラの視野角範囲を指定し、2 番目のパラメータはカメラのアスペクト比を指定し、3 番目と 4 番目のパラメータはそれぞれカメラの近距離セクションと遠距離セクションを指定します。これらのパラメータは必要に応じて調整できます。
3.レンダラーを追加する
シーンを Web ページに表示するには、レンダラーを追加する必要があります。Three.js は、WebGLRenderer、CanvasRenderer、CSS3DRenderer などの複数のタイプのレンダラーをサポートしています。ここでは、WebGLRenderer を使用してハードウェア アクセラレータの WebGL レンダラーを作成し、それを DOM 要素にアタッチします。
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);4. オブジェクトの追加
シーン、カメラ、レンダラーを作成したので、3D 効果をレンダリングするためにいくつかのオブジェクトとマテリアルを追加する必要があります。ここでは単純な立方体を作成し、基本マテリアル (MeshBasicマテリアル) を使用して色を付けます。
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);5. シーンをレンダリングする
最後に、「render()」関数の「requestAnimationFrame()」メソッドを使用してシーンをループし、カメラの位置と回転を更新します。これにより、シーンへの動的な変更が可能になります。
function render() {
requestAnimationFrame(render);
// 使立方体绕着X轴和Y轴旋转
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 更新相机的位置
camera.position.z = 5;
renderer.render(scene, camera);
}
render();これで、簡単な 3D シーンを作成し、JavaScript を使用してカメラとオブジェクトの位置と回転を制御することができました。これは Three.js の氷山の一角にすぎません。他にも探索すべき機能が数多くあります。
この記事では、初心者を助けることを目的として、基本的な入門チュートリアルを提供します。Three.js について詳しく知りたい場合は、公式ドキュメントとサンプル コードを参照するか、関連書籍やブログを読むことができます。