Three.jsとは？
Three.jeの機能
Three.jsには多彩な機能があり、以下のような機能があります。
さまざまなライト（光源）
影の描画
さまざまなカメラ
フォグ（霧）
スプライト/ビルボード
グループ化
ワールド座標とスクリーン座標
モデルデータの読み込み
Three.jsを使ってさらにできること
オブジェクトとの交差を調べる
パーティクルを大量に表示
ジオメトリ（形状）の動かし方
Three.jsを使って3Dの描画は、シーン（空間）にメッシュ（表示物）を置き、カメラを通してレンダラーを使ってHTMLに描画します。
これにより、簡単にウェブページ上で3Dコンテンツを表示できます。
ワードプレスへの使用
ワードプレスに使用する方法は複数あるようです。
- Three.jsのライブラリをダウンロードする方法。three.min.jsファイルを使うことが一般的。
- CSS & JavaScript Toolboxプラグインを使用して、Three.jsをワードプレスで使う方法
- CDN(Content Delivery Network)から読み込む方法
CDNで提供されているURLを使うのが導入に一番手軽
何度も強調したいのが、私が素人であり、１日前に「Three.js」に出会ったことです。複雑で何よりも美しく仕上げるよりも、一番手軽であることはとても大事です。
私が考えたコマンドのポイント
HTMLカスタムだけで完結している美しいコマンド例を分析していて、気がつきました。
案外、わかりやすい構造になっているということ。
Three.jsを使って、CDNで提供されているURLを使い、導入して、ワードプレスのカスタムHTMLに使える、何か面白いコードをください。
Chat GPT4の出してきたコード
Three.jsを使った面白いコードの一例として、回転する立方体を表示するコードをご紹介します。このコードは、ワードプレスのカスタムHTMLウィジェットに追加できます。
まず、以下のコードをワードプレスのカスタムHTMLウィジェットに追加してください：コピーボタンでコピーできます！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#canvas-container {
width: 100%;
height: 400px;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<div id="canvas-container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// サイズ設定
const width = document.getElementById('canvas-container').clientWidth;
const height = document.getElementById('canvas-container').clientHeight;
// レンダラーの作成
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(width, height);
document.getElementById('canvas-container').appendChild(renderer.domElement);
// シーンの作成
const scene = new THREE.Scene();
// カメラの作成
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
camera.position.set(0, 0, 5);
// 立方体の作成
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);
// アニメーション
function animate() {
requestAnimationFrame(animate);
// 立方体の回転
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
このコードは、Three.jsをCDNから読み込んで、回転する立方体を表示するものです。ワードプレスのカスタムHTMLウィジェットに追加することで、立方体が表示されるようになります。
回転速度や立方体の色などを変更したい場合は、JavaScriptのコード部分を編集してください。例えば、立方体の色を赤に変更するには、const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });のcolorの値を0xff0000に変更します。
その他参考学習資料はこちら