<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Riemann Surface</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // JavaScript code goes here
    </script>
</body>
</html>

// Set up the scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create the geometry for the Riemann surface
const geometry = new THREE.BufferGeometry();
const vertices = [];
const colors = [];
const indices = [];

const steps = 100;
const range = 2 * Math.PI;

for (let i = 0; i <= steps; i++) {
    for (let j = 0; j <= steps; j++) {
        const theta = (i / steps) * range;
        const phi = (j / steps) * range;
        const z = Math.cos(theta) * Math.sin(phi);
        const x = Math.sin(theta) * Math.sin(phi);
        const y = Math.cos(phi);
        vertices.push(x, y, z);

        // Add colors
        const color = new THREE.Color(`hsl(${(i / steps) * 360}, 100%, 50%)`);
        colors.push(color.r, color.g, color.b);
    }
}

for (let i = 0; i < steps; i++) {
    for (let j = 0; j < steps; j++) {
        const a = i * (steps + 1) + j;
        const b = i * (steps + 1) + (j + 1);
        const c = (i + 1) * (steps + 1) + (j + 1);
        const d = (i + 1) * (steps + 1) + j;
        indices.push(a, b, d);
        indices.push(b, c, d);
    }
}

geometry.setIndex(indices);
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
geometry.computeVertexNormals();

// Create the material and mesh
const material = new THREE.MeshBasicMaterial({ vertexColors: true, side: THREE.DoubleSide });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// Add lighting
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1).normalize();
scene.add(light);

// Position the camera
camera.position.z = 5;

// Render the scene
function animate() {
    requestAnimationFrame(animate);
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.