Three.jsは、WebGLカプセル化に基づく3Dグラフィックライブラリで、インタラクティブな3Dシーンをすばやく構(gòu)築するのに適しています。 1.基本的なシーンを作成するには、3つのjsを?qū)毪?、シーン、カメラ、レンダラーを初期化する必要があります。 2.キューブなどの幾何學(xué)的オブジェクトを追加し、カメラの位置を設(shè)定します。 3.軌道コントロールを使用して、インタラクティブな操作を?qū)g現(xiàn)します。 4. requestAnimationFrameを使用して、アニメーション効果を?qū)g現(xiàn)します。 5. GLTFLoaderなどのローダーを使用して外部モデルをロードし、適応と最適化に注意を払う。 6.展開する場合、クロスドメイン、レスポンシブデザイン、モバイル適応の問題を処理する必要があります。これらのコアステップを習(xí)得すると、高度な機(jī)能がさらに検討されます。

WebGLおよびThree.jsは、最新のフロントエンド開発に3Dグラフィックスディスプレイを?qū)g裝するための一般的なツールです。 Three.JSはWebGLのカプセル化に基づいており、WebGLを直接使用する複雑さを減らし、インタラクティブな3Dシナリオを迅速に構(gòu)築するのに適しています。 3Dモデル、アニメーション、または視覚化をWebページに含めることを計畫している場合、Three.jsは有用な選択です。

基本的なシナリオを作成する：「Visible」から始めます

Three.jsで開発する最初のステップは、コンテンツを見ることができる基本的なシナリオを構(gòu)築することです。 Three.JSライブラリ（CDNまたはNPMを介してインストールできます）を?qū)毪?、シーン（シーン）、カメラ（カメラ）、およびレンダラー（レンダラー）を作成する必要があります。

 constシーン= new 3.scene（）;
const camera = new 3.perspectivecamera（75、window.innerwidth / window.innerheight、0.1、1000）;
const renderer = new 3.webglrenderer（）;
renderer.setsize（window.innerwidth、window.innerheight）;
document.body.appendChild（renderer.domelement）;

このコードは空白のシーンを作成し、レンダラーをページに挿入します。次に、幾何學(xué)、材料、光源、その他の要素を追加して、畫像を豊かにすることができます。たとえば、単純なキューブを追加します。

 const geometry = new 3.boxgeometry（）;
const material = new 3.meshbasicmaterial（{color：0x00ff00}）;
const cube = new 3.mesh（幾何學(xué)、材料）;
shene.add（cube）;
Camera.Position.Z = 5;

最後に、ループ內(nèi)のrenderer.render(scene, camera)に電話して、畫像を継続的にレンダリングすることを忘れないでください。

相互作用とアニメーションを追加：畫面を動かします

靜的3Dシーンは直感的ですが、魅力がありません。ユーザーの入力（マウスドラッグ、スクロールホイールズームなど）や自動回転を聞くことで、インタラクティブ性を向上させることができます。

一般的な慣行は、OrbitControlsプラグインを使用することです。これにより、オブジェクトの周りで簡単に回転、ズーム、パンをパンできます。

• OrbitControlsの導(dǎo)入：

   'three/addons/controls/orbitcontrols.js'から{orbitcontrols}をインポートします。

• カメラとレンダラーのDOM要素を初期化してバインドします。

   const controls = new orbitcontrols（camera、renderer.domelement）;

アニメーションに関しては、 requestAnimationFrame使用してループを使用して、キューブを継続的に回転させるなど、オブジェクト狀態(tài)を更新できます。

関數(shù)animate（）{
  RequestAnimationFrame（Animate）;
  cube.rotation.x = 0.01;
  cube.rotation.y = 0.01;
  renderer.render（シーン、カメラ）;
}
Animate（）;

このようにして、連続的に回転する緑のキューブを見ることができます。

モデルの読み込みと最適化パフォーマンス：実際のプロジェクトに近い

実際のプロジェクトでは、多くの場合、複雑なジオメトリを手動で作成するのではなく、GLTF、OBJ、FBX、その他の形式などの外部モデルファイルをロードします。 Three.jsは、これらの形式をサポートする複數(shù)のローダーを提供します。

 'three/addons/loaders/gltfloader.js'から{gltfloader}をインポートします。

const loader = new gltfloader（）;
loader.load（ 'path/to/model.gltf'、（gltf）=> {
  scene.add（gltf.scene）;
}）;

モデルを読み込むときに、次のポイントを注意する必要があります。

• モデルサイズの適応：インポート後、位置とスケーリングを調(diào)整する必要がある場合があります。
• テクスチャパスの問題：モデルが依存するマップリソースが正しくロードされていることを確認(rèn)してください。
• パフォーマンスの最適化：大規(guī)模なモデルはページのutter音を引き起こす可能性があり、モデルを圧縮するか、Draco圧縮形式を使用することをお勧めします。

さらに、ユーザーエクスペリエンスを向上させるために、読み込みプログレスバーまたはプレースホルダーアニメーションを追加して、ユーザーがロードであることを知らせることもできます。

クロスプラットフォームとの展開互換性：詳細(xì)を無視しないでください

開発を完了した後、オンライン環(huán)境に展開するときにいくつかの一般的な問題に注意する必要があります。

• クロスドメインの制限：ローカルモデルファイルをロードすると、CORSエラーが発生する可能性があり、サーバーに展開するのが最善です。
• レスポンシブデザイン：ウィンドウサイズが変更されたら、カメラスケールとレンダラーサイズを更新します。

   window.addeventlistener（ 'resize'、（）=> {
    camera.aspect = window.innerwidth / window.innerheight;
    camera.updateProjectionMatrix（）;
    renderer.setsize（window.innerwidth、window.innerheight）;
  }）;

• モバイル適応：タッチコントロールはマウスよりも複雑です。 OrbitControlsはすでに基本的なジェスチャーをサポートしていますが、さまざまなデバイスでパフォーマンスをテストする必要があります。

基本的にそれだけです。これらのコアポイントを習(xí)得した後、後処理、物理エンジンの統(tǒng)合、粒子システムなどのより高度な機(jī)能を試すことができます。プロセス全體は複雑ではありませんが、いくつかの詳細(xì)は無視できます。構(gòu)造とリソース管理を事前に計畫することで、半分の努力で結(jié)果の2倍を達(dá)成できます。

以上がWebGLおよび3.jsを使用したFrontEnd開発の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。