Artistic 3D Hot Spring Visualization
Budget: $30 – $250 USD
## Project Overview
We need an experienced Three.js developer with strong 3D art skills to build a stylized, artistic 3D visualization of a geothermal hot spring/geyser, based on the reference image attached to this post. The reference shows a hot spring with a deep blue core fading through teal, green, yellow, orange, and red toward its outer rim, with steam rising off the surface and mineral-crusted ground around it.
We do **not** want a literal photographic replica — we want an artistic, stylized, real-time 3D interpretation that will run as a custom layer inside a Mapbox GL JS map, geographically anchored to a specific location.
## Scope of Work
- Concept and color study based on the attached reference image
- Model, texture, and light a stylized 3D hot spring/geyser scene in Three.js
- Animated steam/vapor effect (shader-based and/or particle-based)
- Implementation as a Mapbox GL JS custom layer (`CustomLayerInterface`), correctly aligned to real-world coordinates and scaled/rotated to track the map's camera at every zoom and pitch level
- Performance optimization for real-time in-browser rendering (smooth on mid-range laptops, usable on mobile)
- At least one reduced level-of-detail (LOD) version for lower zoom levels, if practical
## Deliverables
- Fully commented Three.js source code (JavaScript or TypeScript)
- All editable source assets: 3D models (.glb/.gltf **plus** original working files, e.g. .blend/.fbx/.c4d), textures, and any custom shaders (GLSL)
- A working demo build showing the effect integrated into a Mapbox GL JS map
- Short documentation explaining how to reposition/re-anchor the layer at a different coordinate
- All files delivered in one organized, clearly labeled folder
## Ownership & IP
- This is a work-for-hire engagement. On final payment, we own all resulting code, 3D models, textures, and shaders outright** — all rights, title, and interest transfer to us.
- Full, editable source files must be delivered — not only compiled, minified, or export-only output.
- The specific finished asset created for this project may not be resold, relisted, or reused publicly without our written permission. (You're welcome to reference the process or show work-in-progress shots in your own portfolio.)
## Required Skills & Experience
- Expert, hands-on Three.js experience (please state years)
- Direct experience integrating Three.js with Mapbox GL JS, or a clear explanation of how you'd sync a Three.js scene to Mapbox's camera/projection matrix
- Strong 3D art, lighting, and color-gradient skills
- Experience with particle systems or shader-based volumetric smoke/steam effects
- WebGL performance optimization experience
- Comfortable working from a reference image/creative brief rather than a rigid spec
Applications missing any of the following will not be considered:
1. Links to 2–3 portfolio pieces most relevant to this job — ideally combining Three.js with maps/geospatial data, or an artistic/atmospheric WebGL scene
2. A live working demo link, if you have one (CodeSandbox, GitHub Pages, personal site, etc.)
3. A short (2–4 sentence) explanation of your technical approach to anchoring a Three.js object inside a Mapbox GL custom layer
4. Your estimated timeline and price
5. Written confirmation you can deliver full editable source files and agree to the ownership terms above
6. Your availability (hours/week) and earliest start date
Category & Skill Tags
**Category:** 3D Modeling & Animation / Web Development
**Tags:** Three.js, WebGL, Mapbox GL JS, JavaScript, GLSL, Shaders, 3D Modeling, Particle Effects, Geospatial Visualization
## Additional Notes for Applicants
- Please review the attached reference image closely — proposals that reflect it will stand out.
- Open to a small paid test task or milestone-based payments for larger budgets.
- Generic/templated proposals that skip the "What to Include" section will be skipped.
We need an experienced Three.js developer with strong 3D art skills to build a stylized, artistic 3D visualization of a geothermal hot spring/geyser, based on the reference image attached to this post. The reference shows a hot spring with a deep blue core fading through teal, green, yellow, orange, and red toward its outer rim, with steam rising off the surface and mineral-crusted ground around it.
We do **not** want a literal photographic replica — we want an artistic, stylized, real-time 3D interpretation that will run as a custom layer inside a Mapbox GL JS map, geographically anchored to a specific location.
## Scope of Work
- Concept and color study based on the attached reference image
- Model, texture, and light a stylized 3D hot spring/geyser scene in Three.js
- Animated steam/vapor effect (shader-based and/or particle-based)
- Implementation as a Mapbox GL JS custom layer (`CustomLayerInterface`), correctly aligned to real-world coordinates and scaled/rotated to track the map's camera at every zoom and pitch level
- Performance optimization for real-time in-browser rendering (smooth on mid-range laptops, usable on mobile)
- At least one reduced level-of-detail (LOD) version for lower zoom levels, if practical
## Deliverables
- Fully commented Three.js source code (JavaScript or TypeScript)
- All editable source assets: 3D models (.glb/.gltf **plus** original working files, e.g. .blend/.fbx/.c4d), textures, and any custom shaders (GLSL)
- A working demo build showing the effect integrated into a Mapbox GL JS map
- Short documentation explaining how to reposition/re-anchor the layer at a different coordinate
- All files delivered in one organized, clearly labeled folder
## Ownership & IP
- This is a work-for-hire engagement. On final payment, we own all resulting code, 3D models, textures, and shaders outright** — all rights, title, and interest transfer to us.
- Full, editable source files must be delivered — not only compiled, minified, or export-only output.
- The specific finished asset created for this project may not be resold, relisted, or reused publicly without our written permission. (You're welcome to reference the process or show work-in-progress shots in your own portfolio.)
## Required Skills & Experience
- Expert, hands-on Three.js experience (please state years)
- Direct experience integrating Three.js with Mapbox GL JS, or a clear explanation of how you'd sync a Three.js scene to Mapbox's camera/projection matrix
- Strong 3D art, lighting, and color-gradient skills
- Experience with particle systems or shader-based volumetric smoke/steam effects
- WebGL performance optimization experience
- Comfortable working from a reference image/creative brief rather than a rigid spec
Applications missing any of the following will not be considered:
1. Links to 2–3 portfolio pieces most relevant to this job — ideally combining Three.js with maps/geospatial data, or an artistic/atmospheric WebGL scene
2. A live working demo link, if you have one (CodeSandbox, GitHub Pages, personal site, etc.)
3. A short (2–4 sentence) explanation of your technical approach to anchoring a Three.js object inside a Mapbox GL custom layer
4. Your estimated timeline and price
5. Written confirmation you can deliver full editable source files and agree to the ownership terms above
6. Your availability (hours/week) and earliest start date
Category & Skill Tags
**Category:** 3D Modeling & Animation / Web Development
**Tags:** Three.js, WebGL, Mapbox GL JS, JavaScript, GLSL, Shaders, 3D Modeling, Particle Effects, Geospatial Visualization
## Additional Notes for Applicants
- Please review the attached reference image closely — proposals that reflect it will stand out.
- Open to a small paid test task or milestone-based payments for larger budgets.
- Generic/templated proposals that skip the "What to Include" section will be skipped.
Related categories:
JavaScript
3D Rendering
Animation
3D Modelling
3D Animation
Lighting
Three.js
3D Art