ICOSAHEDRON - RETROSCOPIC CRT SHADER SOURCE CODE

<!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);
        }
        #stage {
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100vh;
            filter: grayscale(1) sepia(1) hue-rotate(80deg) saturate(5) brightness(1.15) contrast(1.2);
            z-index: 2;
        }
        /* Retroscopic Overlay */
        #scope {
            position: fixed;
            inset: 0;
            z-index: 4;
            pointer-events: none;
            display: block;
        }
        #scope>div {
            position: absolute;
            inset: 0;
        }
        #scope .glow {
            background: radial-gradient(circle at 50% 46%, rgba(30, 255, 130, .08), rgba(0, 0, 0, 0) 62%);
            animation: nvflick 3.6s steps(24) infinite;
        }
        #scope .scan {
            background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 25, 8, .45) 2px 3px);
            animation: nvscan 7s linear infinite;
        }
        #scope .vig {
            box-shadow: inset 0 0 200px 50px rgba(0, 0, 0, .8);
        }
        #scope .mask {
            background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, .5) 72%, rgba(0, 0, 0, .94) 100%);
        }
        @keyframes nvscan {
            from { background-position: 0 0; }
            to { background-position: 0 240px; }
        }
        @keyframes nvflick {
            0%, 100% { opacity: .55; }
            40% { opacity: .9; }
            62% { opacity: .4; }
            80% { opacity: .75; }
        }
    </style>
    <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 id="scope">
        <div class="glow"></div>
        <div class="scan"></div>
        <div class="vig"></div>
        <div class="mask"></div>
    </div>
    <div id="stage"></div>
    <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;

        // Append canvas into the stage div so the CSS filter applies
        const stage = document.getElementById('stage');
        stage.style.position = 'fixed';
        stage.style.inset = '0';
        stage.appendChild(renderer.domElement);
        renderer.domElement.style.width = '100%';
        renderer.domElement.style.height = '100%';

        // --- 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 ---
        const material = new THREE.MeshPhysicalMaterial({
            color: 0x000000,
            roughness: 0.1,
            metalness: 1.0,
            clearcoat: 1,
            clearcoatRoughness: 0.1,
            emissive: 0x000000,
            envMapIntensity: 3.0,
            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
        });
        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(3.6, 3.6, 3.6);
        scene.add(group);

        // --- Load environment map ---
        const loader = new THREE.CubeTextureLoader();
        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'
        ]);

        material.envMap = envTexture;
        scene.environment = envTexture;

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

            const time = performance.now() / 1000;

            group.rotation.x = time * 0.1;
            group.rotation.y = time * 0.2;
            group.rotation.z = time * 0.05;

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

            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', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>