ThreeJS: Icosahedron

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ThreeJS: Icosahedron</title>
    <style>
        body { margin: 0; overflow: hidden; background-color: black; }
        .info {
            position: fixed;
            bottom: 16px;
            right: 20px;
            color: rgba(220, 220, 240, 0.5);
            font-size: 14px;
            letter-spacing: 1px;
            pointer-events: none;
            z-index: 10;
            backdrop-filter: blur(4px);
            padding: 6px 16px;
            border-radius: 40px;
            background: rgba(20, 20, 30, 0.3);
            border: 0.5px solid rgba(255,255,255,0.1);
        }
    </style>
    <!-- Import map using esm.sh -->
    <script type="importmap">
        {
            "imports": {
                "three": "https://esm.sh/three@0.128.0",
                "three/addons/": "https://esm.sh/three@0.128.0/examples/jsm/"
            }
        }
    </script>
</head>
<body>
    <div class="info">🌀 Icosahedron • wireframe + nodes</div>

    <script type="module">
        import * as THREE from 'three';

        // --- Setup scene, camera, renderer ---
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x000000);

        const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);

        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        renderer.toneMapping = THREE.ACESFilmicToneMapping;
        renderer.toneMappingExposure = 0.8;
        document.body.appendChild(renderer.domElement);

        // --- Lighting ---
        const ambientLight = new THREE.AmbientLight(0x404060);
        scene.add(ambientLight);

        const dirLight1 = new THREE.DirectionalLight(0xe2e8f0, 1);
        dirLight1.position.set(5, 5, 5);
        scene.add(dirLight1);

        const dirLight2 = new THREE.DirectionalLight(0x94a3b8, 0.6);
        dirLight2.position.set(-5, -3, 2);
        scene.add(dirLight2);

        const spotLight = new THREE.SpotLight(0xcbd5e1, 2);
        spotLight.position.set(0, 8, 4);
        spotLight.angle = 0.5;
        spotLight.penumbra = 1;
        scene.add(spotLight);

        const pointLight = new THREE.PointLight(0xffffff, 1.5);
        pointLight.position.set(2, 3, 4);
        scene.add(pointLight);

        // --- Base geometry (icosahedron with detail 2) ---
        const baseGeo = new THREE.IcosahedronGeometry(1.2, 2);

        // --- Main reflective shape (material created first, envMap will be set later) ---
        const material = new THREE.MeshPhysicalMaterial({
            color: 0x000000,          // black base – lets reflections dominate
            roughness: 0.1,            // even smoother
            metalness: 1.0,
            clearcoat: 1,
            clearcoatRoughness: 0.1,
            emissive: 0x000000,
            envMapIntensity: 3.0,      // stronger reflections
            side: THREE.DoubleSide
        });

        const shape = new THREE.Mesh(baseGeo, material);

        // --- Wireframe edges (lines) ---
        const edges = new THREE.EdgesGeometry(baseGeo);
        const lineMat = new THREE.LineBasicMaterial({
            color: 0x88ccff,
            depthTest: false      // always appear on top
        });
        const wireframe = new THREE.LineSegments(edges, lineMat);

        // --- Vertex nodes (points) ---
        const positions = baseGeo.attributes.position.array;
        const pointsGeo = new THREE.BufferGeometry();
        pointsGeo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));

        const pointsMat = new THREE.PointsMaterial({
            color: 0xffaa33,
            size: 0.1,
            sizeAttenuation: true,
            depthTest: true
        });
        const points = new THREE.Points(pointsGeo, pointsMat);

        // --- Group everything together ---
        const group = new THREE.Group();
        group.add(shape);
        group.add(wireframe);
        group.add(points);
        group.scale.set(1.8, 1.8, 1.8);
        scene.add(group);

        // --- Load environment map (Swedish Royal Castle – sharp and detailed) ---
        const loader = new THREE.CubeTextureLoader();

        // Optional: add loading manager to see progress
        loader.manager.onLoad = () => {
            console.log('Castle textures loaded successfully – reflections should appear.');
        };
        loader.manager.onError = (url) => {
            console.error('Error loading texture:', url);
        };

        const envTexture = loader.load([
            'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/px.jpg',
            'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/nx.jpg',
            'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/py.jpg',
            'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/ny.jpg',
            'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/pz.jpg',
            'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/nz.jpg'
        ]);

        // Directly assign the env map to the material (most reliable)
        material.envMap = envTexture;

        // Also set as scene environment for any other future materials
        scene.environment = envTexture;

        // --- Animation loop with orbiting camera ---
        function animate() {
            requestAnimationFrame(animate);

            const time = performance.now() / 1000;

            // Rotate the whole group gently
            group.rotation.x = time * 0.1;
            group.rotation.y = time * 0.2;
            group.rotation.z = time * 0.05;

            // Pulsing light
            pointLight.intensity = 1.8 + Math.sin(time * 3) * 0.4;

            // Orbit camera
            const radius = 6.5;
            const speed = 0.3;
            const angle = time * speed;
            const height = Math.sin(time * 0.5) * 1.5;

            camera.position.x = radius * Math.sin(angle);
            camera.position.z = radius * Math.cos(angle);
            camera.position.y = height;

            camera.lookAt(0, 0, 0);

            renderer.render(scene, camera);
        }

        animate();

        // --- Handle window resize ---
        window.addEventListener('resize', onWindowResize, false);
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
    </script>
</body>
</html>