PHP と Three.js を使用して 3D 視覚化アプリケーションを作成する

インターネット テクノロジの継続的な発展に伴い、Web アプリケーションのニーズは従来の 2D ページ表示やデータ インタラクションに限定されなくなり、3D ゲームなどのデータやシーンを表示するために 3D 視覚化テクノロジを使用する必要のあるアプリケーションがますます増えています。 、3Dモデリング、物理シミュレーションなど。

この記事では、PHP と Three.js を使用して 3D ビジュアライゼーション アプリケーションを作成する方法を紹介します。 Three.js の基本的な概念と Web アプリケーションへの導入方法を説明し、次に Three.js の使用方法を 3D シーンの例を使用して説明するという 3 つの側面から詳しく説明します。 3D モデルとシーンを作成し、それらをレンダリングして操作する方法について説明し、最後に、PHP を使用してこの 3D アプリケーション (データ処理、対話型操作など) を制御および管理する方法を紹介します。

1. Three.js の概要と概要

Three.js は、3D グラフィックスとシーンを作成およびレンダリングするための、WebGL および Canvas に基づく JavaScript ライブラリです。これは、Web アプリケーション開発者が基礎となるレンダリング テクノロジに関する深い知識がなくても、Web ページで 3D シーンを簡単に作成して表示できるようにする、強力で使いやすい API のセットを提供します。

Three.js を Web アプリケーションに導入するには、ソース コード ファイルを直接ダウンロードして導入するか、npm などのパッケージ管理ツールを使用してインストールして管理します。この記事では後者のアプローチを採用し、npm パッケージを導入することで Three.js を導入します。

これは、Web アプリケーションに Three.js を導入する方法を示す簡単な例です:

// 在 HTML 文件中引入 Three.js
<script src="https://cdn.jsdelivr.net/npm/three@0.127.0/build/three.min.js"></script>

// 或者在 JavaScript 文件中使用 npm 包管理工具来引入 Three.js
import * as THREE from "three";

2. Three.js を使用して 3D シーンとモデルを作成する

Three.js では、3D シーンを作成および表示するには、特定のプロセスと手順に従う必要があります。このセクションでは、簡単な例を通じてこのプロセスを示し、関連するいくつかの基本的な概念とテクニックを紹介します。

最初に、シーン オブジェクトを作成し、対応するレンダラーとカメラを設定する必要があります:

// 创建场景对象
const scene = new THREE.Scene();

// 创建渲染器
const renderer = new THREE.WebGLRenderer();

// 创建摄像机
const camera = new THREE.PerspectiveCamera(
  75, // 视角角度
  window.innerWidth / window.innerHeight, // 纵横比
  0.1, // 近裁剪面
  1000 // 远裁剪面
);

次に、さまざまなジオメトリとマテリアルを作成し、シーンに追加します。

// 创建一个球体
const geometry = new THREE.SphereGeometry(1, 32, 32);

// 创建一个材质
const material = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  wireframe: true,
});

// 创建一个网格对象，并且将球体和材质添加进去
const sphere = new THREE.Mesh(geometry, material);

// 将网格对象添加到场景中
scene.add(sphere);

最後に、カメラとレンダラーを設定し、適切なタイミングでシーンをレンダリングする必要があります。

// 设置摄像机位置和朝向
camera.position.z = 5;

// 设置渲染器大小和清除色
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000);

// 在每一帧更新场景
const animate = () => {
  requestAnimationFrame(animate);

  sphere.rotation.x += 0.01;
  sphere.rotation.y += 0.01;

  renderer.render(scene, camera);
};

// 渲染场景
animate();

上記の例を通じて、Three.js を使用して次のことを行う方法を理解できます。シンプルな 3D シーンを作成し、その中に球体オブジェクトを表示し、フレームごとに回転させます。

3. PHP を使用して 3D アプリケーションを制御および管理する

Three.js を使用して 3D シーンを作成およびレンダリングすることに加えて、PHP を使用してこれを制御および管理することもできます。 3Dアプリ。 Web サーバー上で実行されるスクリプト言語として、PHP はデータ処理、対話型操作などを容易にします。フロントエンド JavaScript や Three.js と組み合わせて、よりリッチで複雑な 3D アプリケーションを実装できます。

PHP では、Ajax 非同期リクエスト、WebSocket リアルタイム通信、RESTful API インターフェイスなど、さまざまなテクノロジとツールを使用してフロントエンド ページと対話できます。以下は、PHP と JavaScript を使用して、データ処理や対話型操作を含む単純な 3D アプリケーションを実装する方法を示す簡単な例です。

// 在 PHP 脚本中处理数据，并且将其以 JSON 格式返回给前端
$data = array(
  "name" => "sphere",
  "position" => array("x" => 0, "y" => 0, "z" => 0),
  "rotation" => array("x" => 0, "y" => 0, "z" => 0),
);

header("Content-Type: application/json");
echo json_encode($data);

// 在 JavaScript 代码中使用 Ajax 请求 PHP 脚本，并且解析返回的数据
const xhr = new XMLHttpRequest();

xhr.addEventListener("load", () => {
  const data = JSON.parse(xhr.responseText);
  console.log(data);
});

xhr.open("GET", "./data.php");
xhr.send();

上記の例を通じて、PHP と JavaScript を使用して次のことを行う方法を理解できます。 3D アプリケーションのデータ対話、制御、管理を実装します。

要約すると、この記事では、Three.js の導入、Three.js を使用した 3D シーンとモデルの作成、PHP を使用した3D アプリケーションを制御および管理します。これらのテクノロジーとツールは、開発者が高品質でリッチ、高度にインタラクティブな 3D アプリケーションをより簡単に作成するのに役立ち、Web アプリケーションのさらなる開発に新たな可能性をもたらします。

以上がPHP と Three.js を使用して 3D 視覚化アプリケーションを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。