ThreeJS: Torus Knot 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ThreeJS: Torus Knot (Wireframe)</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">🌀 Torus Knot • 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);

        // --- NO LIGHTS ADDED – illumination comes only from the environment map ---

        // --- Base geometry: Torus Knot ---
        const baseGeo = new THREE.TorusKnotGeometry(1.2, 0.35, 256, 64, 2, 3);

        // --- Main reflective shape ---
        const material = new THREE.MeshPhysicalMaterial({
            color: 0x000000,          // black base – lets reflections dominate
            roughness: 0.1,
            metalness: 1.0,
            clearcoat: 1,
            clearcoatRoughness: 0.1,
            emissive: 0x000000,
            envMapIntensity: 3.0,      // strong 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.08,
            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.3, 1.3, 1.3);  // half size
        scene.add(group);

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

        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
        material.envMap = envTexture;
        scene.environment = envTexture;

        // --- Animation loop (lights removed, so no pulsing intensity) ---
        function animate() {
            requestAnimationFrame(animate);

            const time = performance.now() / 1000;

            // Rotate the group
            group.rotation.x = time * 0.2;
            group.rotation.y = time * 0.4;
            group.rotation.z = time * 0.1;

            // Orbit camera
            const radius = 7.0;
            const speed = 0.25;
            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>