1-sikaku-mawaru.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
    <script>
        // ページの読み込みを待つ
        window.addEventListener('load', init);

        function init() {

            // サイズを指定
            const width = 1200;
            const height = 540;

            // レンダラーを作成
            const renderer = new THREE.WebGLRenderer({
                canvas: document.querySelector('#myCanvas')
            });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(width, height);

            // シーンを作成
            const scene = new THREE.Scene();

            // カメラを作成
            const camera = new THREE.PerspectiveCamera(45, width / height);
            camera.position.set(0, 0, +1000);

            // 箱を作成
            const geometry = new THREE.BoxGeometry(400, 400, 400);
            const material = new THREE.MeshNormalMaterial();
            const box = new THREE.Mesh(geometry, material);
            scene.add(box);

            tick();

            // 毎フレーム時に実行されるループイベントです
            function tick() {
                box.rotation.y += 0.003;
                renderer.render(scene, camera); // レンダリング

                requestAnimationFrame(tick);
            }
        }
    </script>
</head>

<body>
    <canvas id="myCanvas"></canvas>
</body>

</html>