2026年7月27日

WordPressのWebGLを使った3Dコンテンツを実装する

テーマ・デザイン

はじめに

WordPressでウェブサイトの視覚的な魅力とユーザーエクスペリエンスを向上させるためには、2次元を超えたインタラクティブな3Dコンテンツが有効です。WebGLはブラウザ上で高品質な3Dグラフィックスを描画するための標準インターフェースであり、JavaScript APIとして提供されています。

症状・背景

ゲームや仮想ツアーなどのインタラクティブなウェブサイトを作成したい
製品やモデルを3Dで表示してユーザーに詳細を見せる必要がある
ブランドの認知度向上のために視覚的に魅力的なコンテンツを提供したい
2次元画像よりも深い情報伝達が可能な3Dコンテンツを利用したい

手順・設定方法

ステップ1: WebGLを使用した3Dモデルのインポートと表示

# WordPressテーマディレクトリに移動します
cd wp-content/themes/your-theme-name/

# 3Dモデルファイル（.glb、.gltf等）をuploadsフォルダ内にアップロードします
wp media import /path/to/3d-model-file.gltf

# WordPressのクエストストリングを使用してメディアIDを取得します
MEDIA_ID=$(curl -s https://your-site.com/wp-json/wp/v2/media | jq '.[0].id')

# JavaScriptスクリプト内でWebGLライブラリと3Dモデルをロードします
<script src="https://threejs.org/build/three.js"></script>
<script src="/path/to/three/examples/js/loaders/GLTFLoader.js"></script>
<script>
var loader = new THREE.GLTFLoader();
loader.load( '/wp-content/uploads/2023/10/model.gltf', function ( gltf ) {
scene.add( gltf.scene );
} );
</script>

# CSSでビューのサイズを設定します
<style>
canvas {
width: 100%;
height: auto;
}
</style>

ステップ2: カスタムショートコードを作成して3Dコンテンツをウィジェット化

# WordPressにカスタムショートコード関数を追加します
function my_3d_model_shortcode() {
ob_start();
?>
<canvas id="myCanvas"></canvas>
<script src="https://threejs.org/build/three.js"></script>
<script src="/path/to/three/examples/js/loaders/GLTFLoader.js"></script>
<script>
var canvas = document.getElementById('myCanvas');
// WebGLの初期化と3Dモデルの表示処理をここに追記します
</script>
<?php
return ob_get_clean();
}
add_shortcode( 'my_3d_model', 'my_3d_model_shortcode' );

# ショートコードを使用してコンテンツページやウィジェットに埋め込みます
[my_3d_model]

ステップ3: WebGLとの連携を強化するためのカスタムプラグインの作成

# WordPressプラグインディレクトリに移動します
cd wp-content/plugins/

# 新規プラグインフォルダを作成し、初期ファイルを追加します
mkdir my-webgl-plugin
touch my-webgl-plugin/my-webgl-plugin.php

# プラグインのアクティベーションとデスアクティベーション関数を設定します
<?php
/*
Plugin Name: My WebGL Plugin
*/

function activate_my_webgl_plugin() {
// 初期化やデータベースの更新処理をここに追記します
}
register_activation_hook( __FILE__, 'activate_my_webgl_plugin' );

function deactivate_my_webgl_plugin() {
// データベースのクリーンアップなどの処理をここに追記します
}
register_deactivation_hook( __FILE__, 'deactivate_my_webgl_plugin' );
?>

# WebGLライブラリと3Dモデル読み込み関数を作成します
<?php
function load_threejs_and_gltf() {
wp_enqueue_script('three', 'https://threejs.org/build/three.js');
wp_enqueue_script('gltfloader', '/path/to/three/examples/js/loaders/GLTFLoader.js');
}
add_action( 'wp_enqueue_scripts', 'load_threejs_and_gltf' );
?>

# データベーステーブルの初期化をカスタムアクションに追加します
<?php
function init_webgl_database_table() {
global $wpdb;
$table_name = $wpdb->prefix . 'webgl_models';
$charset_collate = $wpdb->get_charset_collate();

$sql = "CREATE TABLE $table_name (
id mediumint(9) NOT NULL AUTO_INCREMENT,
model_path varchar(255) NOT NULL,
PRIMARY KEY  (id)
) $charset_collate;";

require_once ABSPATH . 'wp-admin/includes/upgrade.php';
dbDelta($sql);
}
add_action('init', 'init_webgl_database_table');
?>

ステップ4: WebGLコンテンツのパフォーマンス最適化とモバイル対応

# JavaScriptでGPUバッファリングを有効にし、レンダリングフレームレートを制御します
<script>
requestAnimationFrame(function animate() {
// 3Dモデルの更新処理をここに追記します
requestAnimationFrame(animate);
});
</script>

# モバイルデバイス向けに画面サイズや詳細度を調整します
<style>
@media (max-width:768px) {
canvas { max-height: calc(100vh - 50px); }
}
</style>

注意事項

<実践的な注意点1>: WebGLは一部の古いブラウザでは非対応であるため、バックアップ用の2D表示方法を用意すること
<実践的な注意点2>: 3Dモデルのサイズや複雑さがサイトのロード時間に影響を与えるので適切な最適化が必要
<セキュリティ上の注意>: リモートから取得した3Dモデルには潜在的な脆弱性がある可能性があるので、信頼できるソースからのみ利用すること
<パフォーマンス/運用上の注意>: WebGLコンテンツの保守と更新は手間がかかるため、適切なドキュメントと自動化ツールを整えること

まとめ

1. WebGL活用: インタラクティブな3Dグラフィックスを追加することでユーザー体験を向上させることができます。

2. 3Dモデルの取得: フリーまたは商用ライセンス付きの3Dモデルストアから高品質なモデルを入手できます。

3. カスタムショートコード: カスタマイズ可能なショートコードを使用してコンテンツを柔軟に配置することができます。

4. モバイル対応: ウェブサイトのレスポンシブデザインに対応した3D表示方法を開発することで、モバイルデバイスからのアクセスも充実させることができます。

5. パフォーマンス最適化: ロード時間やCPU負荷を最小限に抑えるために、コンテンツサイズと詳細度の調整が重要です。

Post Views: 21