tree.jsでjpgアニメーション

Yamato Nagata 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Smooth 3D Animation with Three.js</title>
    <style>
        body { margin: 0; }
    </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();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 画像テクスチャの読み込み
        const textureLoader = new THREE.TextureLoader();
        const texture = textureLoader.load('https://cdn.pixabay.com/photo/2023/05/11/05/40/blackbird-7985552_960_720.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 animate() {
            requestAnimationFrame(animate);
            plane.rotation.x += 0.01;
            plane.rotation.y += 0.01;
            renderer.render(scene, camera);
        }

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

このサンプルコードでは、平面ジオメトリを作成し、指定した画像テクスチャを適用しています。animate()関数内で平面の回転を更新しているため、滑らかな3Dアニメーションが実現されます。plane.rotation.xおよびplane.rotation.yの値を適宜変更することでアニメーションの速度や方向を調整できます。

上記のコードを実行すると、Tree.jsを使用してネット上のフリー画像が滑らかな3Dアニメーションで表示されるはずです。

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