Turn a Temple Scene into a Cinematic Short
Build a golden-hour temple with Claude Code and Three.js. Use staged prompts and the reference project to adapt buildings, materials, and camera moves.
Works with Claude Code
Requirements
- Node.js 22+
- WebGL 2
- Chrome / Edge
- FFmpeg
Overview
What you get
- Three staged prompts for planning a site, building its parts in parallel, and directing camera moves.
- A 70-second temple film shared in the post, plus a link to Leon Lin’s Golden Temple source project.
- A tutorial for previewing the project, making local changes, and adapting the scene to your own brief.
Good fit
- Creating architectural flythroughs, garden films, or game-environment showcases.
- Keeping buildings and materials consistent across multiple shots by working in one 3D scene.
Not for
- Installing a ready-made Agent skill: this entry collects prompts and a reference project.
- Producing survey-grade models or construction drawings.
Tutorial
Understand the film and how it was made
What problem does it solve?
An architectural film needs more than attractive individual shots: buildings, materials, and lighting must stay consistent when the camera changes. These prompts ask Claude Code to build a 3D scene with Three.js, then direct a camera through it. Three.js is a JavaScript library for drawing 3D scenes in a browser. You can return to the project to change a building, a material, or a camera path.
How does it compare with other video-making entries on this site?
| Entry | Main purpose | What this prompt focuses on |
|---|---|---|
| Follow a Bullet Through a Busy City | Describe a bullet-tracking shot to a text-to-video tool | Have AI write a 3D scene, then create shots by moving a camera through it |
| Let the Camera Follow Each Step | Explain a product workflow through camera movement and visual emphasis | Plan building positions, dimensions, and camera paths to show spatial relationships |
| video-shotcraft: Make a Promo That Explains Your Product | Make product promos from screenshots, copy, and branding | Generate architecture in code, then arrange multiple shots within the scene |
These prompts divide production into site planning, construction, and camera direction. They establish shared coordinates first, then shared materials and file ownership for each sub-agent, followed by shots that pull back from details to wide views. This approach suits films that need repeated changes to architecture, materials, and camera moves. The other entries above focus on tracking shots, workflow demonstrations, and product promos respectively.
Watch the sample and choose a starting point
The sample shows Golden Temple, a Japanese temple complex generated in code. Its buildings, plants, water, and materials are created procedurally, without imported models or texture files. Reference photographs guide the shapes; they are not pasted into the scene.
Leon Lin published the Golden Temple source project. Its README describes making it with Claude Code and Claude Opus 5.5. The post by leo_xiaolei shares the film and three staged prompts for building a similar scene; those prompts appear on this page. Start with the source project if you want an existing scene to modify. Use the prompts when planning a new one. This tutorial starts with the project.
While watching, notice how a close-up of a lantern, lotus, or wind bell introduces the surrounding architecture. The original film has ten seven-second shots. Each gives viewers time to see a detail before revealing the space around it.
Preview the project and make a local change
Open the temple scene
Prepare Node.js 22 or newer and a browser with WebGL 2. The screenshot and video tools also need Chrome or Edge, plus FFmpeg on your system PATH.
- Run these commands in a terminal to download the project, install its dependencies, and start the preview:
git clone https://github.com/Leonxlnx/golden-temple.git
cd golden-temple
npm install
npm run dev
- Open
http://localhost:5173/and watch the progress indicator in the upper-left corner. The first load builds the scene and compiles shaders, which can take several minutes on an integrated GPU. Once the scene appears, drag to orbit. Press1to play the first shot, space to pause, andfto return to the free camera. - Check that the bridge, pond, and main hall appear before making changes. Being able to move the view confirms that you have opened the 3D project; you have not exported a video yet.
Change one part first
Open Claude Code in this project directory. Ask it to read src/layout.js, src/world/, src/core/materials.js, and src/shots.js, which manage the site plan, scene parts, shared materials, and cameras respectively.
The following practice request was written for this tutorial. Use a small change to understand how those parts work together:
In the current Golden Temple project, change the arched bridge railings from vermilion lacquer to dark wood.
First find the material used by the railings and propose the smallest change.
Change only the railings, preserving the vermilion materials of the main hall and gate.
Keep the bridge position and dimensions, pond, lighting, and all camera shots.
After editing, list the changed files and provide a preview view that clearly shows the railings.
Open the updated preview and compare the railings with the main hall. A successful local change affects only the railings. If the whole temple changes color, a material shared by several parts was probably edited; give the railings their own material instead.
Keeping the coordinates and cameras fixed makes the material change easier to assess. Next, try moving a building: update the site plan in src/layout.js, then check paths, the pond edge, and camera framing. Avoid giving each part its own conflicting coordinates.
Describe your own architecture and scene in stages
The three prompts on this page establish placement, divide the building work, and direct the camera. For a new project, send them to Claude Code one at a time, approving the plan or preview before continuing. Do not send a new-scene brief into the existing project and overwrite your earlier exercise.
- Agree on the site plan. Specify relationships between buildings, key dimensions, the entrance, and paths. Check the layout before adding roof tiles or leaves.
- Build the parts. The prompt proposes six sub-agents. Have the main agent create the shared layout and materials first, and define which files each sub-agent owns before starting parallel work. Review screenshots as each part is completed. Photographs guide the forms; the scene remains generated in code.
- Direct the camera. State what detail opens each shot, where the camera travels, and what it reveals. Check one complete shot before extending the sequence.
Once you approve that shot, ask Claude Code to implement frame-by-frame export for the new project and provide a short test command, the output location, and a full-film export command. The commands in the next section are for the original Golden Temple project; use your new project’s own export commands.
To adapt the approach to a garden, exhibition hall, or product space, fill in the brackets below. This brief template was written for this tutorial; send it to Claude Code with your plan and reference images:
Scene: [garden, exhibition hall, or product showroom].
Audience and purpose: [who will watch and what they should remember].
Main areas: [entrance, main building, water or display areas, and their relative positions].
Featured object: [a detail that would make a strong opening close-up].
Visual direction: [architectural style, materials, time of day, and lighting].
References: [photographs supplied to guide form and atmosphere only].
Deliver a site plan and a simple scene I can open first. Add detail after approval.
Start with one seven-second shot: open on [detail], move toward [position], and reveal [subject].
Changing a building’s shape also means checking entrances, paths, shadows, and whether the camera passes through geometry. Turning the temple into an exhibition hall requires new close-up subjects and camera destinations too. Renaming the scene alone will not change what viewers see.
Refine the camera moves and export the film
Export one shot first
The following commands are for the original Golden Temple project. Keep npm run dev running, then open a second terminal in the project directory and export the first seven-second shot:
# The first 210 frames at 30 FPS make one seven-second shot; use a low resolution to check motion
node tools/render.mjs --w 960 --h 540 --fps 30 --spp 2 --from 0 --to 210 --out out/temple-draft.mp4
spp controls how many samples are averaged per frame. Lower values suit motion checks; higher values improve edges, shadows, and motion blur but take longer to render. Look for frame progress in the terminal. When the command finishes, open out/temple-draft.mp4 and check whether the close-up lasts long enough, the pullback is smooth, and the railings leave the subject visible.
If the camera passes through an eave or turns abruptly, give Claude Code the timestamp and a frame showing the problem. Ask it to change only that shot’s camera position, direction, or easing, preserving the scene and other shots.
Export the full film after checking the motion
To render the original ten-shot, seventy-second sequence, run this command in the same directory:
node tools/render.mjs --w 1920 --h 1080 --fps 60 --spp 8 --out out/temple.mp4
This is an offline, frame-by-frame render, rather than a real-time screen recording. The upstream project reports about four hours for the full film on a Radeon 780M integrated GPU, so checking a short segment first saves time. The shared video at the top of this page is 1280×720 at 30 FPS; that is separate from the project’s 1080p60 export settings.
The render command produces the picture only. If you keep the original seventy-second edit and want its example music, run:
npm run fetch-music
node tools/score.mjs --video out/temple.mp4 --out out/temple_final.mp4
The track is “Finding Movement” by Kevin MacLeod, licensed under CC BY 4.0. When publishing your film, include the music attribution listed in the project’s Credits with your release. The code’s MIT license does not cover this music. If you change the number of shots or the total duration, ask Claude Code to update the render frame range, shot timing, and music edit together: the original renderer defaults to seventy seconds, and the music script follows the original cuts.
For a portrait version, reframe the cameras so the close-up objects and main buildings remain visible, then export at portrait dimensions. Do not simply crop both sides of the landscape film.