Traditional Turkish Hammam

The user wants me to create a realistic hammam (Turkish bath) in HTML. I'll create a detailed, interactive 3D-like hammam experience with HTML, CSS, and JavaScript. I'll include: 1. A marble interior with domed ceiling 2. Steam/mist effects 3. A central heated marble platform (göbek taşı) 4. Water basins (kurnas) with water flowing 5. Warm ambient lighting 6. Marble textures and patterns 7. Steam particles 8. Maybe some columns/arches 9. Realistic colors - warm whites, marbles, golds, soft lighting 10. Perhaps some interactive elements like clicking to add more steam Let me create a comprehensive single-file HTML with CSS and JS that creates an immersive hammam experience. I'll use canvas for steam particles and CSS 3D transforms for the architecture. Let me build this step by step: - A domed ceiling with a central oculus/star pattern - Marble walls with arched niches - Central hexagonal or circular heated platform - Water basins around - Steam particles using canvas - Warm, ambient golden lighting - Maybe some columns - Turkish patterns/geometry I'll use Three.js for a more realistic 3D experience, or I can use pure CSS/Canvas for a simpler but still impressive version. Let me use a combination - CSS for the structure and Canvas overlay for steam/particles and water effects. Actually, let me create something really impressive with WebGL/Three.js loaded from CDN for true 3D realism, or I can create a very detailed 2.5D scene with CSS and canvas. Let me go with a pure HTML/CSS/Canvas approach that's highly detailed and realistic-looking without external dependencies (or minimal ones). Actually, using Three.js from CDN would give the most realistic result. Let me use Three.js for a proper 3D hammam. I'll create: - A domed room with marble texture - Central platform - Steam particles - Warm lighting - Water basins - Arched doorways Let me write a complete Three.js implementation with: - Procedural marble textures - A dome geometry - Steam particle system - Dynamic lighting - Camera controls or auto-rotation - Water reflections This will be quite extensive but should look amazing. Let me craft the full HTML file. Actually, let me create a really beautiful and realistic hammam using Three.js. I'll include: 1. Octagonal room base with marble walls 2. Domed ceiling with glass star patterns (like traditional hammams) 3. Central heated marble platform (round/octagonal) 4. Corner kurnas (marble basins) 5. Steam particle system 6. Warm golden point lights 7. Marble-like materials with procedural textures 8. Arched niches in walls 9. Soft ambient occlusion feel 10. Mouse interaction for rotating the view Let me write this out fully. I'll create procedural canvas textures for marble. Actually, to keep it manageable but impressive, let me focus on: - A circular/octagonal room - Domed ceiling with star cutouts - Central platform - Steam - Beautiful lighting - Marble textures via canvas Let me write the complete code now. I'll use OrbitControls for rotation and create a really atmospheric scene. I need to be careful about the Three.js CDN URL. Let me use a recent CDN version. For the marble texture, I'll create it procedurally on a canvas - this will give a nice veined marble look. For steam, I'll use a particle system with semi-transparent spheres or sprites that rise up. Let me structure this: ```html ... ``` Let me make it really good. I'll include: - The dome with oculus holes (using a custom geometry or boolean-like approach, or simpler - just a dome with smaller dome cutouts or a patterned dome) - Actually for the dome stars, I can create a dome and place small glowing windows - For the room, I'll use a cylinder or octagonal shape - Central platform - a flattened cylinder - Kurnas - bowl shapes - Steam - sprite particles - Marble floor - Warm lights Let me also add some sound-like ambiance through the visuals - the warm glow, the steam, etc. I'll create custom marble textures using canvas with vein patterns. Let me code this up properly. I want to create: 1. Floor - large circle with marble texture 2. Walls - octagonal or circular 3. Dome - hemisphere with cutouts 4. Central platform - raised circle 5. Small basins around 6. Steam particles rising 7. Multiple warm point lights 8. Star-pattern light coming from dome holes For simplicity and beauty, I'll make: - A circular room (using a cylinder with open top, or just walls as a tube) - Floor plane with marble - Dome on top (using a sphere cut in half) - The dome will have smaller spheres subtracted (or I'll just use a wireframe/pattern) - Actually, for the dome I can create a half-sphere and place glowing dots to simulate star holes - Steam rising from multiple points Let me simplify the dome star holes - I'll create small cylinder cutouts or just place emissive small spheres on the dome to represent the traditional star-shaped glass holes. Actually, for the best visual effect with reasonable complexity: - Use a hemisphere for the dome - Create several small glowing circles on it (using small flat cylinders or sprites with emissive material) - The main room walls - Marble everywhere - Steam particles Let me write this now. I'll make the marble texture via canvas. For the marble, I need: - White/cream base - Gray veins running through - Some subtle variation I can create this with a canvas and some randomized bezier-like curves. Let me finalize the design and write the complete code. I want this to be really impressive. Key dimensions (in arbitrary units): - Room radius: 8 - Room height: 6 - Dome radius: 8 (hemisphere on top) - Central platform radius: 3, height: 0.5 - Basin radius: ~0.8 each, placed around - Steam particles in various locations Lighting: - Warm ambient light (very dim) - Several point lights with warm colors (like candles/oil lamps) - Some light coming from "above" through dome holes - The steam should catch the light Materials: - Marble: MeshStandardMaterial with roughness ~0.3, map from canvas - Gold/brass accents: MeshStandardMaterial with metalness ~0.8, roughness ~0.2, color gold - Water: slightly transparent blue-ish - Steam: white semi-transparent particles Let me write the full code now. I'll include OrbitControls from CDN. Actually, I just realized - for OrbitControls in newer Three.js versions, the import path is different. Let me use a CDN that provides the full Three.js with OrbitControls easily, or use importmap. For simplicity, I'll use ES module imports from unpkg or jsdelivr with importmap: ```html ``` This is clean and works well. Let me use Three.js v0.160. Now let me plan the marble texture generation. I'll create a canvas-based procedural marble texture: ```javascript function createMarbleTexture(width, height, baseColor, veinColor) { const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; const ctx = canvas.getContext('2d'); // Base color ctx.fillStyle = baseColor; ctx.fillRect(0, 0, width, height); // Add noise/clouds for depth // Draw veins for (let i = 0; i < 20; i++) { ctx.beginPath(); ctx.moveTo(Math.random() * width, 0); // Bezier curves across ctx.bezierCurveTo( Math.random() * width, height * 0.25, Math.random() * width, height * 0.75, Math.random() * width, height ); ctx.strokeStyle = veinColor; ctx.lineWidth = Math.random() * 4 + 1; ctx.globalAlpha = 0.1 + Math.random() * 0.4; ctx.stroke(); } // More veins... } ``` This will give us a nice marble look. Now, for the steam particles, I'll create a particle system using BufferGeometry with positions that update each frame - particles rise up and fade, then reset. For water in the basins, I can use a reflective/refractive looking disc with blue-ish color. Let me also add some columns or pilasters around the walls for architectural detail. OK I think I've planned enough. Let me write the complete code now. I want to make sure: 1. The scene is beautiful and realistic 2. There's interactivity (orbit controls) 3. Steam rises continuously 4. Lighting is warm and atmospheric 5. The marble textures look good 6. The dome has beautiful star-like light holes One more thing - for the dome's star holes, I'll position small cylinder geometries that go through the dome (or more simply, place small glowing flat circles on the inner surface of the dome). In traditional hammams, these are glass-covered holes that let in natural light. I'll make them emissive. Actually, for a better effect, I'll create the dome as a hemisphere and then create small holes by using a custom approach - or simpler: place small point lights or emissive discs on the dome's inner surface to simulate light coming through. Let me also add water sounds... no, just visual. But I could add some water drip animation. Alright, time to write the code. I'll create everything in one HTML file. One consideration: the dome in a traditional hammam has many small star-shaped or circular holes. I'll distribute small glowing circles across the dome surface. For the dome geometry, I'll use SphereGeometry with parameters to make it a hemisphere (phi from 0 to PI/2). Actually, for the dome, I want it to sit on top of the circular walls. The walls will be a cylinder (or better, I'll create an octagonal shape using a custom geometry, or simply use a cylinder with enough segments to look smooth). Let me create: - Floor: Large circle (using CircleGeometry or flattened cylinder) - Walls: CylinderGeometry (open ended) - actually a tube - Or walls as individual panels - Dome: Half sphere on top - Central platform: Flattened cylinder - Basins: 4-6 bowl shapes (using lathe geometry or scaled spheres) - Steam: Particles For the basins (kurnas), I can use a lathe geometry to create a bowl shape, or simply use a torus or modify a sphere. A simple approach: use a sphere scaled down on Y and cut in half, with a small cylinder for the base. Actually, a nice basin shape can be made with LatheGeometry: ```javascript const points = []; // Create a bowl profile points.push(new THREE.Vector2(0, 0)); points.push(new THREE.Vector2(0.6, 0.1)); points.push(new THREE.Vector2(0.7, 0.3)); points.push(new THREE.Vector2(0.5, 0.5)); points.push(new THREE.Vector2(0.3, 0.6)); const basinGeom = new THREE.LatheGeometry(points, 32); ``` This will create a nice bowl shape. OK, I'm going to write the complete code now. It's going to be long but comprehensive. Actually, let me also consider performance. Many particles and geometries can be heavy. I'll keep particle count reasonable (~200-300) and use efficient geometries. For the steam, I'll use a Points object with a custom shader or just use sprites. For simplicity, I'll use a Points object with small circular sprites (using a canvas-generated texture for soft circles). Let me also create the warm glow effect. I can use a large semi-transparent sphere or just rely on the point lights and fog. Fog! Adding exponential fog with a warm color will greatly enhance the atmosphere. In a hammam, there's always a misty atmosphere. ```javascript scene.fog = new THREE.FogExp2(0xffeedd, 0.015); ``` This will create a warm, misty atmosphere that obscures distant objects, perfect for a hammam. Alright, here's the plan for the complete scene: **Architecture:** - Circular floor (large disc, marble-textured) - Circular wall (cylinder, marble-textured) - Dome ceiling (hemisphere on top of walls, with small emissive holes) - Central raised platform (göbek taşı) - large flat disc - 6 small basins (kurnas) around the central platform - 8 columns/pilasters around the walls (optional, for detail) - Arched niches (optional) **Lighting:** - Very dim warm ambient light - 4-6 warm point lights simulating candles/oil lamps - Emissive spots on the dome (light coming through) - The steam catches the light beautifully **Effects:** - Steam particles rising from multiple points - Warm fog - Water surfaces in basins (reflective blue discs) - Maybe dripping water (small falling particles near basins) **Interaction:** - Orbit controls (rotate, zoom, pan limited) - Auto-rotate slowly if no interaction Let me write this now, keeping the code clean and well-commented. For the marble texture, I'll create two versions: 1. A lighter marble for walls and dome 2. A slightly warmer marble for the floor and central platform The basins will have a darker, more polished marble look. Now, for the central platform (göbek taşı), it's traditionally a large heated marble slab - often octagonal or round. I'll make it a nice raised platform. Let me also consider the room shape. Traditional hammams often have an octagonal or square room with cut corners. For simplicity and beauty, I'll use a circular room (which many hammams approximate). Actually, looking at references, many hammams have a square room with a domed ceiling. The central platform is in the middle. There are arched niches (eyvans) on each side, and smaller rooms off the sides. But for the main hot room (sıcaklık), it's often a domed square or octagonal space. I'll go with an octagonal feel by placing 8 pilasters around the circular wall, giving it that traditional look. For the walls, I'll use a cylinder and add box geometries as pilasters at 8 points around the circle. OK enough planning. Code time. Actually, I want to reconsider the approach. Using pure HTML/CSS with some canvas might actually be simpler and still look beautiful without the 3D overhead. But the user asked for "realistic" and a 3D scene with proper lighting and steam will be much more immersive. Let me go with Three.js. The code will be substantial but self-contained in one HTML file. Here's a rough structure of the code: ``` HTML: - Canvas container - Loading text (hidden after load) - Info text JS (using Three.js): 1. Setup scene, camera, renderer 2. Create marble textures via canvas 3. Build room (floor, walls, dome) 4. Build central platform 5. Build basins 6. Create steam particle system 7. Setup lighting 8. Add fog 9. Setup orbit controls 10. Animation loop ``` Let me also add some water in the basins - a translucent blue disc. For the steam, I need particles that: - Start at various positions (near the floor, near basins, on the central platform) - Rise upward slowly - Fade out as they rise - Are affected by slight random movement - Loop back to starting positions I'll manage this with a custom particle system where each particle has: - position (x, y, z) - velocity (mostly upward with slight random) - life (0 to 1, where 1 is full size/opacity and 0 is gone) - max life When a particle's life reaches 0, it resets to its starting position. For the Points material, I'll use a circular gradient sprite with transparency. Let me also make the central platform slightly emissive (warm) to simulate the heated marble. Maybe a subtle glow. Now, one important thing: the dome needs to have visible holes or stars. In traditional hammams, the dome has small glass-covered holes (often in star shapes) that let in beams of light. I can simulate this by: 1. Creating small holes in the dome geometry (complex) 2. Placing small, bright emissive circles on the inside of the dome 3. Using spotlights pointing down from the dome I'll go with option 2: placing many small emissive discs on the dome's inner surface. They'll glow warmly and create the characteristic dotted light pattern on the dome. For distribution, I can use a Fibonacci sphere or just random positions on the upper hemisphere. Traditional hammam domes often have the stars arranged in concentric circles or a grid pattern. I'll do a few concentric rings of stars at different heights on the dome. Now, for the actual "holes," I can also create thin cylinder geometries that are colored brightly on the inside, giving the impression of light shafts. But for simplicity, emissive circles will work well. One more detail: some hammams have a central larger opening at the top of the dome (like an oculus). I'll include a larger bright circle at the apex. Alright, I'm writing the code now. I need to be very detailed in the implementation. Let me structure the JavaScript clearly: ```javascript // Marble texture generator function createMarbleTexture(color1, color2, width, height) { ... } // Scene setup const scene, camera, renderer, controls // Build functions function createFloor() { ... } function createWalls() { ... } function createDome() { ... } function createCentralPlatform() { ... } function createBasin(x, z) { ... } function createPilaster(angle) { ... } function createSteamSystem() { ... } // Lighting function setupLighting() { ... } // Animation function animate() { ... } ``` Let me write the full implementation now. I want to make the marble texture really good with the canvas. For marble veins, I can use a technique where I draw multiple semi-transparent wavy lines across the canvas. Some thick, some thin, with varying opacity. This creates a convincing marble effect. I'll also add some subtle noise-like texture. For the floor, I might want a different marble pattern - maybe with larger, more dramatic veins. Now for the dome star pattern - traditional Turkish hammam domes often have stars arranged in beautiful geometric patterns. I'll create concentric rings with stars at specific intervals. Actually, let me think about the overall color palette: - Marble: warm cream/white with subtle gray veining - Floor: slightly warmer, more beige marble - Lighting: very warm, almost golden (like candlelight) - color temperature around 2000-2700K - Steam: white/very light gray - Water: subtle turquoise blue - Gold/brass accents on basins (the taps) For the point lights, I'll use colors like #ffcc88 or similar warm tones. OK, I need to actually write this out now. The response will be very long. Let me craft it carefully. One thing about the Three.js version - I need to make sure the CDN URLs are correct. Let me use: - three@0.160.0 from unpkg The import map: ```html ``` And then import OrbitControls from 'three/addons/controls/OrbitControls.js'. Now, for the particle sprites, I'll create a canvas with a radial gradient (white center fading to transparent). This gives soft, fluffy particles perfect for steam. For the steam system, I'll have particles originating from: - Around the central platform (where wet marble creates steam) - Near the basins (where hot water creates steam) - A few ambient particles throughout Each particle will have slightly different behavior - some fast-rising, some slow, some drifting sideways more. Now for the basins (kurnas), in a traditional hammam these are marble basins built into the wall or on a low platform, with taps (often brass) above them. I'll create: - A bowl-shaped basin - A small column/pedestal supporting it - Maybe a simple tap shape For each basin, I'll place it around the central platform. Let me also add some marble benches or low platforms around the walls where people sit. Alright, I think I need to focus on making this look great without overcomplicating it. Here are the key elements: 1. ✅ Circular room with marble walls 2. ✅ Domed ceiling with glowing star holes 3. ✅ Central heated platform 4. ✅ Marble basins (kurnas) 5. ✅ Steam particles 6. ✅ Warm atmospheric lighting 7. ✅ Floor with marble texture 8. ✅ Fog for atmosphere 9. ✅ Orbit controls for interaction Optional but nice: - Pilasters/columns on walls - Water in basins - Brass/gold accents - Dripping water particles Let me include the pilasters and water. They add a lot to the realism. For the water, I'll place a slightly transparent blue disc inside each basin. OK NOW I'm truly writing the code. No more planning changes. Actually, one more thing. The user said "Сделай хамам на html реалесьичный и пришли код" which means "Make a hammam in HTML realistic and send the code." So they want realistic. I think Three.js is the right approach. But I should also consider if the user wants something that looks good as a static image or interactive. Since they said "html" and it's going to be rendered in an iframe (implied by the system note), I should make it work well without external dependencies that might fail. Using a CDN for Three.js should be fine. Let me also consider adding a subtle auto-rotation so even without user interaction, the scene looks dynamic and interesting. Now, for the actual rendering, I need to make the marble look good. The procedural canvas texture is key. Let me refine the marble generation: ```javascript function createMarbleTexture(width, height, options = {}) { const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; const ctx = canvas.getContext('2d'); const baseColor = options.baseColor || '#f5f0e8'; const veinColor = options.veinColor || '#d5cfc5'; const veinCount = options.veinCount || 30; // Fill base ctx.fillStyle = baseColor; ctx.fillRect(0, 0, width, height); // Add subtle cloudy texture for (let i = 0; i < 500; i++) { const x = Math.random() * width; const y = Math.random() * height; const r = Math.random() * 30 + 5; const grad = ctx.createRadialGradient(x, y, 0, x, y, r); grad.addColorStop(0, 'rgba(200,195,185,0.05)'); grad.addColorStop(1, 'rgba(200,195,185,0)'); ctx.fillStyle = grad; ctx.fillRect(x - r, y - r, r * 2, r * 2); } // Draw veins for (let i = 0; i < veinCount; i++) { ctx.beginPath(); const startX = Math.random() * width; const startY = Math.random() * height; ctx.moveTo(startX, startY); // Create wavy veins const segments = 5 + Math.floor(Math.random() * 10); let cx = startX; let cy = startY; for (let j = 0; j < segments; j++) { const nx = cx + (Math.random() - 0.5) * width * 0.6; const ny = cy + (Math.random() - 0.5) * height * 0.6; const cpx = cx + (Math.random() - 0.5) * width * 0.3; const cpy = cy + (Math.random() - 0.5) * height * 0.3; ctx.quadraticCurveTo(cpx, cpy, nx, ny); cx = nx; cy = ny; } ctx.strokeStyle = veinColor; ctx.lineWidth = Math.random() * 3 + 0.5; ctx.globalAlpha = 0.05 + Math.random() * 0.25; ctx.stroke(); } return new THREE.CanvasTexture(canvas); } ``` This should create a decent marble effect. Alright, I'm going to produce the complete HTML now. I'll make it as polished as possible within a single file. The code will be long. I need to also handle the window resize properly. For the camera, I'll start at a nice angle looking slightly down at the central platform from about eye-height. Initial camera position: something like (8, 3, 12) looking at (0, 1, 0) - gives a nice perspective. The dome apex will be at about y=6 (walls 6m high + dome radius 8m... wait, the dome sits on top of the walls. If walls are 6m high and room radius is 8m, the dome would be a hemisphere of radius ~8m sitting on top, so its apex would be at y=6+8=14m. That's quite tall. Let me adjust. Let me set: - Room radius: 6 units - Wall height: 5 units - Dome: hemisphere radius 6, sitting on top of walls (apex at y=5+6=11) - Central platform: radius 2.5, height 0.4, at y=0.2 - Basins: at radius ~4 from center, on the floor Actually, for better proportions, let me make: - Room radius: 7 - Wall height: 5 - Dome radius: 7 (apex at y=12) - Floor at y=0 The camera can start at position (10, 3, 10) looking at (0, 1.5, 0). This gives a nice spacious feel. Now let me consider the wall thickness. For the cylinder walls, I'll use a tube-like approach or just a cylinder with the camera inside. Since the camera is inside the room, I need the normals to point inward. For a cylinder, the normals point outward by default. I can either: 1. Use a cylinder with `side: THREE.BackSide` to render the inside 2. Create a custom tube 3. Use `side: THREE.DoubleSide` For the dome, same thing - I need to see the inside. Using `side: THREE.BackSide` on the dome hemisphere and the walls would work, but then the floor needs to be visible from above. Actually, let me use `side: THREE.DoubleSide` for the walls and dome so they're visible from both inside and outside (though the camera will mostly be inside). For the floor, I only need the top surface visible, so default is fine. Wait, for the cylinder walls, if the camera is inside at radius < 7, and the cylinder has radius 7, using default front-face rendering (which shows the outside), the walls would be invisible from inside. So I need to use `side: THREE.BackSide` for the walls to see them from inside. Or use DoubleSide. DoubleSide is simpler and works for all cases. For the dome (a hemisphere), if the camera is inside, I need BackSide or DoubleSide as well. Let me use DoubleSide for walls and dome, and regular for the floor (which is a flat disc at y=0, visible from above). Actually for the dome, I'll use a sphere geometry with phi from 0 to PI/2 (the upper hemisphere). The normals point outward. From inside the room (below the dome), I need to see the inner surface. So DoubleSide or BackSide. DoubleSide is fine. Now, for the floor, I'll use a large CircleGeometry or a very flat cylinder. The floor should be visible from above (inside the room). Default front-face rendering works since we're looking down at it. OK. Let me start writing the HTML now. For real this time. I also want to add some sound-like qualities through animation. The steam particles moving, maybe some subtle flickering of lights (like candles). For flickering lights, I can slightly vary the intensity of point lights in the animation loop using sin/cos with different frequencies. Alright, here we go. The full code: Actually I realize the response is going to be extremely long. Let me make sure it's well-organized and the code is clean. I'll use clear variable names and comments. One more thing - for the basins, I want to include water inside them. The water can be a simple blue-tinted, slightly transparent disc or flattened sphere inside the basin bowl. With the right material settings (transmission, roughness), it can look quite convincing. In newer Three.js versions, I can use MeshPhysicalMaterial with transmission for realistic water. But that requires more setup. For simplicity, I'll use a blue-tinted MeshStandardMaterial with some transparency and low roughness to simulate water. For the brass/gold taps, I'll use a golden MeshStandardMaterial with high metalness. Now here's something important about the basins: in a traditional hammam, the kurnas are usually set against the walls or on a marble bench around the perimeter. They have taps (often ornate brass) mounted on the wall above them. For my circular room, I'll place 6 basins evenly spaced around the central platform, each with a small tap. For the basin placement, I'll put them at radius ~4.5-5 from center, at 60° intervals (6 basins). Each basin will consist of: - A bowl shape (using LatheGeometry) - A small pedestal base - Water surface inside - A tap above (simple cylinder + spout shape) This is getting quite detailed. Let me simplify the basins a bit - just the bowl with water and a simple tap. For the lathe geometry of the basin bowl, I need to define the profile. A typical marble basin looks like a wide, shallow bowl: ``` Points for lathe (rotated around Y axis): - Bottom center: (0, 0) - Curve out and up: (0.3, 0.05), (0.6, 0.2), (0.7, 0.4) - Rim: (0.65, 0.55) - Outer rim edge: (0.7, 0.6) ``` This creates a nice bowl shape when lathed. For the tap, I'll place a simple L-shaped or curved pipe coming from a small wall-mounted plate. Since the basins are freestanding in my design (not against a wall), I'll have them with a small back-plate or just a standalone tap fixture. Actually, in some hammams, the basins are freestanding marble bowls with the tap rising from the center or from a small pillar behind them. I'll put a small marble pillar behind each basin with a brass spout. This is getting very detailed. Let me simplify: each basin is a bowl on a pedestal, with a small brass spout rising from the back edge. OK I need to actually write the code now. I've been planning for way too long. The code will speak for itself. Let me produce it. I'll aim for a balance between detail and code length. The result should be beautiful and immersive. Also, for the steam, I want to use a custom shader for the particles that makes them look volumetric. But for simplicity, I'll use sprite particles with a soft radial gradient texture (created on canvas). When many of these overlap, they create a nice volumetric steam effect. The particle texture: a white circle with soft edges, fading to fully transparent. I'll create this on a small canvas (64x64 pixels). For the steam particle system, I'll create multiple emitter points: - Several around the central platform - One above each basin - A general mist throughout the room Each emitter will have particles with slightly different properties (size, speed, lifetime). For the animation, particles rise with some horizontal drift, their opacity increases then decreases, and they scale up as they rise (steam expands). I'll manage particles in a BufferGeometry and update positions/sizes each frame. But for simplicity with sprites, I can use individual Sprite objects or a Points system. Points with BufferGeometry is more efficient. However, with Points, all particles share the same size. To have varying sizes, I can use the `sizeAttenuation` property and potentially use a custom ShaderMaterial... but that's complex. For simplicity, I'll create a few (maybe 50-80) individual Sprite objects for the main steam effects, and manage them in an array. Sprites allow individual scaling and positioning. 80 sprites is not too heavy for modern browsers. Wait, actually with Three.js Points and a custom BufferGeometry, I can use the `morphAttributes` or just update the position buffer each frame. But for size variation, I'd need a custom ShaderMaterial with per-vertex sizes. That's doable with `BufferGeometry` and setting the `size` attribute... actually `PointsMaterial` has a fixed `size` property. For per-particle sizes, I need `ShaderMaterial`. Alternatively, I can use multiple Points objects with different sizes to simulate the variation. Or just use individual Sprites since the count isn't too high. For 100 sprites, performance should be fine. Let me use an array of Sprites and manage them manually. Each sprite will have: - Base position - Current position - Velocity - Life timer - Max life - Base scale In the animation loop, I update each sprite's position, scale, and opacity based on its life cycle. For the sprite material opacity, I'll use a MeshBasicMaterial with transparent:true and a gradient texture. The material's opacity can be adjusted, or I can adjust the sprite's scale and the texture handles the soft edge. Actually, for Sprites, the material's `opacity` property controls the overall opacity. I can fade sprites in and out by changing this. But wait, changing material opacity on individual sprites means each sprite needs its own material instance (or they all share and can't have individual opacity). So I'll need separate materials or a different approach. Alternative: Use the sprite's scale to simulate fade (small = invisible). Combined with the soft texture, scaling down makes the particle seem to fade. Or, I can use a custom approach with Points and a ShaderMaterial that supports per-particle size and opacity. This is more efficient and cleaner. Let me do that. Actually, for the best effect with reasonable complexity, I'll create a few groups of Points: - Fast-rising steam near the central platform - Slow-drifting mist throughout - Steam near basins Each group uses a Points object with BufferGeometry. I update the position buffer each frame and also manage a parallel array for particle states. For size variation between particles in the same Points object, I'll need ShaderMaterial. But I can also just make multiple smaller Points objects with different fixed sizes. OK, to keep things simpler, let me use a class-based approach: - Create a `SteamEmitter` class that manages its own Points object - Each emitter has particles that rise, drift, and reset - I'll have 5-8 emitters scattered around the room - Each Points object has its own material with a specific size For updating positions, I'll maintain the position buffer and rewrite it each frame. For the "life" of particles (fade in/out), since all particles in a Points object share the same material opacity, I can't easily have individual particle opacity. But the soft texture already handles edge fading. And I can move particles that are "dead" far away or below the floor. Actually, the simplest effective approach: maintain a pool of particle data. Each particle has position, velocity, life, maxLife. In the animation loop, update positions. Dead particles get reset to their emitter position. The Points geometry's position attribute gets updated from the pool. All particles share the same visual appearance (size, texture), but the varying positions create a nice steam effect. The soft-edged sprite texture ensures they blend together well. This is the approach I'll use. One large Points object for all steam, with ~200 particles. For the position updates: I maintain a Float32Array of positions (200 * 3 = 600 elements). Each frame, I update based on velocity and life. Dead particles reset. I also maintain velocity and life arrays in JavaScript for easy updates. OK, NOW I'm truly writing the complete code. No more changes to the approach. Actually, for the Points material, I realized that `PointsMaterial` with `transparent: true` and `depthWrite: false` works well. The texture is a soft circle. All particles have the same rendered size, but varying distances from camera create natural size variation due to perspective. Alright, here's the structure of the final code: ``` 1. HTML structure 2. Canvas for marble texture generation 3. Three.js setup with import map 4. Scene creation a. Marble textures (via canvas) b. Floor c. Walls (cylinder, DoubleSide) d. Dome (hemisphere with star holes) e. Central platform f. Basins (6x) g. Pilasters (8x around walls) h. Water surfaces in basins i. Steam particle system j. Lighting (ambient + point lights) k. Fog 5. Orbit controls 6. Animation loop 7. Window resize handler ``` Let me also add some small decorative elements - maybe a few brass lanterns or candle holders that emit the point lights. For the point light sources, I'll place them: - 4 around the central platform (simulating candles/lanterns) - 2 near the walls - Some glow from the dome stars (emissive materials) The dome stars will be small sphere or disc geometries with emissive material. I'll place ~40-60 of them on the dome's inner surface. For placing stars on the dome, I'll use spherical coordinates. The dome is a hemisphere of radius ~7. Points on the hemisphere can be generated with: - theta (azimuth): 0 to 2*PI - phi (polar): 0 to PI/2 (from top to horizon) I'll create concentric rings at different phi values, with stars evenly spaced in theta. For example: - Ring 1 (top): phi = 0.2, 6 stars - Ring 2: phi = 0.5, 10 stars - Ring 3: phi = 0.8, 14 stars - Ring 4: phi = 1.1, 18 stars - Ring 5: phi = 1.4, 22 stars This creates a beautiful pattern. The stars will be small flat discs oriented toward the center of the dome (or just small spheres that glow). For the star geometry, small spheres with emissive material work well. Or I can use small CircleGeometry instances oriented toward the room center. Spheres are simpler. Each star can be a tiny sphere (radius 0.08-0.15) with a warm emissive material. When these are scattered across the dome, they'll look like the traditional star-shaped glass holes. To make them look like actual holes with light coming through, I could use a bright white/yellow emissive material: ```javascript const starMaterial = new THREE.MeshStandardMaterial({ emissive: new THREE.Color('#fff8e0'), emissiveIntensity: 2, roughness: 0.1 }); ``` This will make them glow brightly against the darker dome interior. For extra realism, I can also add small point lights at some of the star positions to cast actual light into the room. But too many point lights is expensive. I'll add maybe 5-8 point lights at key star positions. OK NOW THE CODE. For real. I'll produce it in full. Let me also think about the color of the marble for walls vs floor. In traditional hammams: - Walls: light cream marble - Floor: slightly darker or more patterned marble - Central platform: often a warmer, sometimes slightly pinkish marble (like Marmara marble) - Dome: similar to walls I'll use: - Walls & Dome: cream marble (#f2ede4 base with gray veins) - Floor: warmer beige marble (#eaded0 base with darker veins) - Central platform: warm marble (#f0e6d8 base with subtle veins) - Basins: similar to walls For the brass elements, I'll use a gold/brass color (#c8944a or similar). Alright. Writing the full HTML now. This is going to be approximately 400-600 lines of code. Let me be thorough. One thing - for the wall pilasters, I'll create 8 rectangular columns placed against the circular wall. Each pilaster will be a box geometry positioned at the wall radius, rotated to face the center. Pilaster dimensions: width ~0.6, depth ~0.4, height ~5 (same as wall) Positioned at radius ~6.5 (slightly inside the wall at radius 7) This gives a nice architectural rhythm to the circular room. Between pilasters, there could be arched niches. But for simplicity, the pilasters alone add nice detail. OK I also want to add some seating - low marble benches around the perimeter. But that might be getting too complex. Let me keep it to the essential elements for now. Let me also consider - should the room be completely enclosed? The camera will be inside. The user can orbit around. For the best experience, I'll make the room fully enclosed (floor, walls, dome) and the camera starts inside at a nice viewpoint. The orbit controls will allow the user to look around. For the initial camera position, I'll place it at about (5, 2.5, 8) looking at the central platform. This gives a nice perspective showing the dome, walls, floor, and central platform. Now, for the fog, I need to be careful not to obscure too much. A subtle warm fog adds atmosphere: ```javascript scene.fog = new THREE.FogExp2('#f5e6d3', 0.008); ``` This creates a warm, subtle haze. For the background (outside any gaps), I'll set the scene background to a dark warm color, or better, since we're inside an enclosed room, the background won't be visible much. But if there are gaps (like the dome stars), a dark sky-like background would be nice. I'll set it to a deep navy/dark blue to simulate night sky visible through the dome holes. Actually, in traditional hammams, the dome holes let in daylight. But for atmosphere, a darker background with the glowing stars looks more dramatic. I'll set the background to a dark color. Scene background: ```javascript scene.background = new THREE.Color('#1a1a2e'); ``` Or better, since the room is mostly enclosed, the background won't matter much. But for the dome holes, having a dark background makes the glowing stars pop. Actually, for the dome stars to look like holes, I could make them actual holes... but that's complex with CSG. Instead, having bright emissive spots on the dome interior works great. I need to make sure the dome itself has a substantial material so it doesn't let light through. Using MeshStandardMaterial with DoubleSide on the dome will make it opaque from both sides. OK HERE IS THE CODE. I'm going to produce it now. Seriously. Let me think about one more thing: the water in the basins. I want it to look somewhat realistic. I'll use a disc geometry with a blue-tinted, low-roughness material: ```javascript const waterMaterial = new THREE.MeshStandardMaterial({ color: '#88ccdd', roughness: 0.1, metalness: 0.3, transparent: true, opacity: 0.75, }); ``` And place it just inside the basin bowl. This gives a nice water surface effect. For the basin bowl, I'll use a marble-like material but with a slightly more polished look (lower roughness). Now, I also want the central platform to have a subtle warmth. In a real hammam, the göbek taşı is heated from below. I can add a subtle emissive property to the platform material to simulate warmth: ```javascript const platformMaterial = new THREE.MeshStandardMaterial({ map: platformMarbleTexture, roughness: 0.35, metalness: 0.05, emissive: '#331100', emissiveIntensity: 0.15, }); ``` This gives it a very subtle warm glow. Alright, truly writing now. The code will be structured, well-commented, and as complete as possible. I need to also handle the case where the CDN might be slow. But that's beyond my control. The import map approach is reliable for modern browsers. One more thing: the renderer settings. I'll use: - Antialiasing: yes - Shadows: basic shadow mapping could be nice but adds complexity. I'll skip real shadow mapping for performance and use ambient occlusion-like tricks (darker materials in crevices, etc.) - Actually, I can enable simple shadow mapping for the main point lights to create dramatic shadows - But for steam particles, shadows would look weird. I'll skip shadows and rely on the fog and lighting for depth. For the renderer: ```javascript const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.shadowMap.enabled = false; // Keep it simple renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.2; ``` ACES tone mapping will give a nice cinematic look. OK, for real now. Let me assemble the complete HTML document. I realize I should also think about the steam shader more carefully. For a nice volumetric steam effect, multiple overlapping soft sprites work well. The texture should be a soft Gaussian-like blob. Canvas for steam particle texture: ```javascript function createSteamTexture() { const canvas = document.createElement('canvas'); canvas.width = 64; canvas.height = 64; const ctx = canvas.getContext('2d'); const gradient = ctx.createRadialGradient(32, 32, 0, 32, 32, 32); gradient.addColorStop(0, 'rgba(255,255,255,1)'); gradient.addColorStop(0.1, 'rgba(255,255,255,0.9)'); gradient.addColorStop(0.3, 'rgba(255,255,255,0.6)'); gradient.addColorStop(0.6, 'rgba(255,255,255,0.15)'); gradient.addColorStop(1, 'rgba(255,255,255,0)'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, 64, 64); return new THREE.CanvasTexture(canvas); } ``` This creates a soft, fluffy particle texture. Now for the steam particle system, I'll create a class that manages the particles: ```javascript class SteamSystem { constructor(scene, emitterPositions, particleCount) { this.particles = []; this.positions = new Float32Array(particleCount * 3); // Initialize particles for (let i = 0; i < particleCount; i++) { const emitter = emitterPositions[Math.floor(Math.random() * emitterPositions.length)]; this.particles.push({ position: new THREE.Vector3( emitter.x + (Math.random() - 0.5) * 2, emitter.y + Math.random() * 0.5, emitter.z + (Math.random() - 0.5) * 2 ), velocity: new THREE.Vector3( (Math.random() - 0.5) * 0.3, 0.3 + Math.random() * 1.2, (Math.random() - 0.5) * 0.3 ), life: Math.random(), maxLife: 2 + Math.random() * 4, emitterPos: emitter.clone(), }); } // Create geometry const geometry = new THREE.BufferGeometry(); geometry.setAttribute('position', new THREE.BufferAttribute(this.positions, 3)); const material = new THREE.PointsMaterial({ map: createSteamTexture(), color: '#ffffff', size: 0.8, transparent: true, opacity: 0.4, depthWrite: false, blending: THREE.NormalBlending, }); this.points = new THREE.Points(geometry, material); scene.add(this.points); } update(deltaTime) { for (let i = 0; i < this.particles.length; i++) { const p = this.particles[i]; p.life += deltaTime; if (p.life >= p.maxLife) { // Reset p.life = 0; p.position.copy(p.emitterPos); p.position.x += (Math.random() - 0.5) * 2; p.position.z += (Math.random() - 0.5) * 2; p.position.y += Math.random() * 0.3; p.velocity.y = 0.3 + Math.random() * 1.2; } p.position.x += p.velocity.x * deltaTime; p.position.y += p.velocity.y * deltaTime; p.position.z += p.velocity.z * deltaTime; // Slight random drift p.velocity.x += (Math.random() - 0.5) * 0.1 * deltaTime; p.velocity.z += (Math.random() - 0.5) * 0.1 * deltaTime; // Write to buffer this.positions[i * 3] = p.position.x; this.positions[i * 3 + 1] = p.position.y; this.positions[i * 3 + 2] = p.position.z; } this.points.geometry.attributes.position.needsUpdate = true; } } ``` This system handles particle lifecycle and updates efficiently. For emitter positions, I'll place them: - 4 around the central platform - At each of the 6 basins - A couple in the general room area Total ~12 emitters, with ~150-200 particles total. Now I need to compile this all into a single HTML file. Let me organize it clearly. Also for the marble texture canvas generation, I need to make sure the canvas textures are created before building the scene. I'll create them at the start. Alright, I've spent way too long on this mental planning. Let me actually output the complete HTML code now. It will be long but complete. I'm going to produce it in one shot. One thing: for the basin water, I'll use a circle geometry placed at the water level inside the basin bowl. The water material will be slightly blue and semi-transparent. For the taps, I'll create a simple brass spout using a few cylinders and a torus or bent cylinder. To keep it simple, I'll use a vertical cylinder (the pipe) with a small horizontal cylinder at the top (the spout), colored gold/brass. For the dome construction: I'll use a SphereGeometry with phiStart=0, phiLength=2*PI, thetaStart=0, thetaLength=PI/2. This creates the upper hemisphere. I'll set the position so it sits on top of the walls. Wait, in Three.js, SphereGeometry parameters are: - radius - widthSegments - heightSegments - phiStart (default 0) - phiLength (default 2*PI) - this is the horizontal angle - thetaStart (default 0) - vertical angle from top - thetaLength (default PI) - vertical angle extent For a hemisphere (top half), I need thetaStart=0 and thetaLength=PI/2. This gives the dome from the top (north pole) down to the equator. The walls are a cylinder from y=0 to y=5 (height 5). The dome sits on top, starting at y=5 and going up to y=5+7=12 (with radius 7). Actually, the equator of the hemisphere is at the base of the dome. So the dome's bottom edge is at the top of the walls (y=5). The dome curves upward from there. I'll position the dome geometry at y=5 (so its base is at y=5, apex at y=12). For the hemisphere geometry centered at origin, the base is at y=0 and apex at y=radius. To place it with base at y=5, I set position.y = 5. SphereGeometry(radius, segW, segH, 0, 2*PI, 0, PI/2) creates a dome with base at y=0 when centered at origin. So positioning it at y=5 puts the base at y=5. Perfect. Now, for the star holes on the dome, I'll place small glowing spheres on the inner surface. Since the dome radius is 7, the inner surface is at radius ~6.95 (slightly inside). I'll place stars at radius 6.9 from the dome center (which is at y=5 for the base, but the hemisphere center is at y=5 actually... wait. The hemisphere geometry is centered at its own origin. The dome's spherical center is at the center of the full sphere, which for a hemisphere is at the center of the base circle. So if the base is at y=5 and radius is 7, the spherical center is at y=5 (base level). The inner surface at a given phi (from vertical) is at: - x = R * sin(phi) * cos(theta) - y = R * cos(phi) (from the sphere center, so absolute y = 5 + R*cos(phi)) - z = R * sin(phi) * sin(theta) where phi=0 is straight up (apex), phi=PI/2 is the base edge. For placing stars on the inner surface, I'll use phi from ~0.15 to ~1.4 (almost to the base) and theta from 0 to 2*PI. The absolute position of a star: - y = 5 + 7 * cos(phi) - horizontal distance from center = 7 * sin(phi) - x = 7 * sin(phi) * cos(theta) - z = 7 * sin(phi) * sin(theta) I'll place them slightly inside (radius 6.85) so they sit on the inner surface. OK this is getting very detailed. The code will handle these calculations. Let me now produce the complete HTML. I'll aim for about 500 lines of well-commented JavaScript within the HTML. Actually, I need to be mindful of the response length. The user wants to see the code. Let me make it comprehensive but not overly verbose in comments. Alright, here goes. The final complete HTML file: I'll structure it as: 1. DOCTYPE, head with styles 2. Body with canvas container 3. Script with import map 4. Main JS module For the canvas container, I'll use a fullscreen div. Styles: body margin 0, overflow hidden, dark background. Let me also add a subtle UI hint - maybe a small text that says "Drag to rotate • Scroll to zoom" that fades out after a few seconds. This improves UX. OK NOW THE COMPLETE CODE. I will include everything. For the central platform, I want to add a subtle steam effect rising from it (since it's heated). I'll place extra emitters there. Also, for the floor, I'll create a slightly recessed area or just a flat disc. In traditional hammams, the floor often has channels for water drainage. I'll keep the floor flat for simplicity but add some subtle geometric pattern or just the marble texture. I also want to add some water channels or a slight depression around the central platform. But that's complex. I'll skip it. For the basins, I need to create 6 of them. Each at 60° intervals around the central platform. I'll place them at radius 4.5 from center. Each basin: - Bowl (lathe geometry) - Pedestal (short cylinder) - Water surface (circle) - Tap (brass pipes) For the lathe geometry of the bowl, I'll define points that create a nice profile. Now, one issue: creating multiple instances of the same complex geometries. I'll create the geometries once and reuse them with different materials if needed. But since all basins share the same shape and material, I can create one basin group and clone it, or create a function that builds a basin and call it 6 times with different positions. A function `createBasin()` that returns a Group is the cleanest approach. I'll call it for each position. Similarly, `createPilaster()` for the wall pilasters. For the pilasters, I'll place 8 of them at 45° intervals around the wall. Each is a box geometry (0.5 wide, 0.3 deep, 5 tall) positioned at the wall inner radius, rotated to face the center. Actually, I realize the walls are circular. The pilasters would be placed against the inner wall surface. To properly align them, each pilaster needs to be positioned at the wall radius minus half its depth, and rotated so its face is tangent to the circle... actually, pilasters on a curved wall would typically have their face following the curve. For simplicity, I'll make them rectangular and rotate each to face the center (so they're radial). A box at radius 6.7 (slightly inside the wall at 7), rotated around Y to face center, with its long face toward the center. Wait, pilasters are columns that stick out from the wall. So they should be oriented with their width along the wall (tangential) and depth pointing inward (radial). For a box at angle theta around the circle: - Position: x = R * cos(theta), z = R * sin(theta), where R = wallRadius - pilasterDepth/2 = 6.85 - Rotation: Y = theta (so the box's local Z points outward, local X is tangential) The box dimensions: width (tangential) = 0.6, depth (radial) = 0.3, height = 5. This will create 8 evenly-spaced pilasters around the circular wall. OK, enough. I need to write the code. Let me compile it all now. I'll be thorough but also recognize I can't spend forever planning. One last thing: for the dome star pattern, I want it to look traditionally beautiful. I'll create stars in concentric rings. The stars will be small spheres with emissive material. I'll also add a central larger oculus at the apex (a larger glowing circle or group of stars). For the star material, I want them to look like they're glowing warmly - perhaps a bright warm white: ```javascript const starMaterial = new THREE.MeshBasicMaterial({ color: '#fffbe6' }); // or MeshStandardMaterial with high emissive ``` Using MeshBasicMaterial ensures they're always bright regardless of scene lighting, which simulates light coming from outside. Alright, here's the complete code. I'm going to write it out now as a single HTML document. Here is a complete HTML document that creates a realistic, 3D Turkish bath (hammam) experience using the Three.js library, complete with steam effects, marble textures, and ambient lighting. ```html Traditional Turkish Hammam

☁ TURKISH HAMMAM ☁

⟳ Drag to explore · Scroll to zoom

``` ### Explore the Hammam: Atmosphere, Architecture & Interaction Let's walk through what makes this digital hammam feel so immersive and responsive. #### The Sensory Experience The design focuses on a **warm, humid, and opulent atmosphere**. You'll notice: - **Steam & Flickering Light**: Volumetric steam particles rise from the central platform and basins, while point lights flicker softly to mimic candlelight. - **Rich Materials**: Procedurally generated marble textures with veins and subtle cloudiness cover the walls, floor, dome, and heated central stone (`göbek taşı`). - **Glowing Details**: The domed ceiling features a star-like constellation of glowing oculi, and the central platform has a subtle, pulsating warm edge. #### Customization & Viewing - **Camera Control**: You can **drag** with your mouse or finger to rotate the view around the room, and **scroll** to zoom in on details like the brass taps or water basins (`kurnas`). - **Responsive Design**: The 3D scene automatically adjusts to fit any browser window size, ensuring a consistent view on desktop or mobile. #### Architectural Layout The code constructs a classical hammam layout using 3D geometry: - **Central Space**: A large circular room with a **domed ceiling**, marble-clad walls, and pilasters. - **Key Features**: The **heated octagonal platform** in the center is surrounded by a ring. Six marble **water basins** with brass taps are arranged around it. - **Lighting Design**: Multiple warm **point lights** are positioned around the room to create depth and highlight the steam, working alongside a soft ambient light and a subtle fog effect.

Рисование