tree.jsでjpgアニメ（レスポンシブ版）

2023年5月17日 00:19

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Responsive 3D Animation with Three.js</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://threejs.org/build/three.js"></script>
    <script>
        // Three.jsの初期設定
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 画像テクスチャの読み込み
        const textureLoader = new THREE.TextureLoader();
        const texture = textureLoader.load('https://example.com/path/to/your/image.jpg');

        // 平面ジオメトリの作成
        const geometry = new THREE.PlaneGeometry(2, 2);
        const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide });
        const plane = new THREE.Mesh(geometry, material);
        scene.add(plane);

        // カメラの設定
        camera.position.z = 5;

        // レスポンシブ対応の処理
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        window.addEventListener('resize', onWindowResize);

        // アニメーションループの設定
        function animate() {
            requestAnimationFrame(animate);
            plane.rotation.x += 0.01;
            plane.rotation.y += 0.01;
            renderer.render(scene, camera);
        }

        // 初回実行時のウィンドウリサイズ処理
        onWindowResize();

        // アニメーションの開始
        animate();
    </script>
</body>
</html>

上記のサンプルコードをレスポンシブにするには、ウィンドウのリサイズイベントに対してカメラやレンダラーのサイズを更新する必要があります。以下に修正したレスポンシブなサンプルコードを示します。

修正点は以下の通りです：

<style>タグ内にbodyとcanvasのスタイルを追加し、marginとoverflowを設定しています。これにより、Canvasがウィンドウ全体に広がるようになります。
rendererの初期化時にオプションとしてantialias: trueを追加しています。これにより、アンチエイリアス処理が有効になり、滑らかな描画が可能になります。
onWindowResize()関数を追加し、ウィンドウのリサイズイベントに対応してカメラとレンダラーのサイズを更新するようにしています。ウィンドウのサイズ変更に合わせて描画が正しくリサイズされます。
window.addEventListener('resize', onWindowResize);という行は、ウィンドウのリサイズイベントが発生した際にonWindowResize()関数を呼び出すためのイベントリスナーを登録しています。つまり、ウィンドウのサイズが変更されるたびに、onWindowResize()関数が実行されます。

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

camera.aspectは、カメラのアスペクト比（画面の横幅と縦幅の比率）を設定しています。window.innerWidthは現在のウィンドウの横幅、window.innerHeightは現在のウィンドウの縦幅を表します。
camera.updateProjectionMatrix()は、カメラのプロジェクション行列を更新します。この行列はカメラがシーンをどのように投影するかを定義します。
renderer.setSize(window.innerWidth, window.innerHeight)は、レンダラーのサイズをウィンドウのサイズに合わせて更新します。これにより、レンダラーが表示するキャンバスのサイズが変更されます。

したがって、ウィンドウのサイズが変更されると、カメラのアスペクト比とレンダラーのサイズが正しく更新され、画像の表示がレスポンシブに調整されます。これにより、修正されたコードはウィンドウのリサイズに対応し、画像が滑らかな3Dアニメーションでレスポンシブに表示されます。

この記事が気に入ったらサポートをしてみませんか？