Create 3D Three.js Android Home-Screen Scene

About the project

Fixed-camera 3D scene in Three.js: building, mountain environment, and a sun that moves with time (Android) I'm building a home-screen scene for an Android app. 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 on a 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 Android WebView, 60 fps 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 Three.js 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 Android 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.

Skills required