Three.js / WebGL: fixed-camera 3D landscape scene with a physically based sun that moves with time

[login to view URL] / WebGL: fixed-camera 3D landscape scene with a physically based sun that moves with time I'm building a fixed-camera 3D scene in Three.js. The camera never moves. A domed building sits on a rocky rise with a path to it, a flat-topped mountain behind, mist in the valleys and autumn trees below, exactly as in the single reference image attached. The only thing that changes is the sun: it moves continuously across the sky as the user drags a finger, casting real shadows, and settles at six moments of the day (dawn, sunrise, noon, afternoon, sunset, night). This is not arch-viz: no orbit controls, no still renders as the deliverable. It has to run smoothly in Chrome on a mid-range phone. What I provide The building as a .glb (geometry and colour texture; materials may need a PBR pass, see below) One reference image. It is the target for composition, environment, colour and mood. The scene, viewed from the fixed camera at sunset, should match it as closely as possible. Sun angles and times for each of the six stops as JSON What you build Environment: the rocky outcrop, path, the flat-topped mountain and ranges behind with distance haze, valley mist, and the trees in the foreground, recreating the reference composition in portrait 9:16 with the building centred. Assets in glTF, sourced or built by you. Sun and sky: a physically based sky with a visible sun disc and glow, driven by one function setTime(hours). Sky colour, sun colour, shadows, fog, mist brightness and exposure all follow the sun's altitude. Stars and window glow appear at night. No keyframed images, no crossfades: everything derives from the sun position so dragging at any speed is smooth. Post-processing that reproduces the reference style at sunset: bloom, colour grade, fog, vignette, film-like tone mapping. The other five stops are then judged on physical plausibility and beauty: same scene, same style, different sun. Building materials: roughness, normal and emissive (windows, balconies, entrance) so it responds to the sun and glows at night. If this isn't your skill, say so; I can source it separately. Constraints 60 fps in mobile Chrome on a mid-range phone (e.g. a 2023 Snapdragon 7-series), under 200 MB memory Under 500k triangles total, textures 2K max, under 40 MB of assets Renders correctly when the viewport is resized to a small floating window and back Render loop can be paused and resumed Deliverables [login to view URL] source with clean structure, plus all glTF assets and textures A JSON of the six stops (sun angle, sky and post settings) so I can tweak without code A screen recording from a real phone: full drag from dawn to night, slow and fast, plus a resize Six screenshots, one per stop; the sunset one placed next to the reference image Milestones Building + sky + sun moving with shadows on a flat ground, recorded on a phone Environment built and composed to match the reference Post-processing and the sunset match, then the other five stops To apply Send one link to a live WebGL scene you built (not images), and one sentence on how you'd make the sky follow the sun. Applications without a live link won't be read.

Project ID: 40685682