ThreeJS: Torus Knot 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>twisted metal – pure Three.js (CORS‑safe)</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 (CORS headers allow null origin) -->
    <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 • pure Three.js</div>

    <script type="module">
        import * as THREE from 'three';
        // Note: No Environment import – we'll create a simple cube environment manually

        // --- 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);
        camera.position.set(0, 0, 6);

        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);

        // --- Environment map (city-like) using a simple cube texture from threejs.org examples ---
        const envTexture = new THREE.CubeTextureLoader().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'
        ]);
        scene.environment = envTexture;
        // Optionally set background to the same texture for a more immersive feel
        // scene.background = envTexture;

        // --- Create the torus knot ---
        const geometry = new THREE.TorusKnotGeometry(1.2, 0.35, 256, 64, 2, 3);
        const material = new THREE.MeshPhysicalMaterial({
            color: 0xc0c0e0,
            roughness: 0.15,
            metalness: 1,
            clearcoat: 1,
            clearcoatRoughness: 0.1,
            emissive: 0x000000,
            envMapIntensity: 2.5,
            side: THREE.DoubleSide
        });
        const knot = new THREE.Mesh(geometry, material);
        knot.scale.set(2.6, 2.6, 2.6);
        scene.add(knot);

        // --- Animation loop ---
        function animate() {
            requestAnimationFrame(animate);

            const time = performance.now() / 1000; // seconds
            knot.rotation.x = time * 0.5;
            knot.rotation.y = time * 0.8;
            knot.rotation.z = time * 0.3;

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

            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>