Try it for yourself. Click ‘Begin Animation’ in the frame below. The Heavy Load (Stone) will roll onto the Raft. 100% Vibe Coded. See how it was made below.
This is running in your browser and was 100% vibe coded in three.js. I have no experience with three.js and used no coding.
Overview
Today I want to show you how I used vibe coding to make 3D explainers for how I reckon the heavy stones of the pyramids may have been lifted. You’ll see what works like magic and what crashes and burns. You’ll get a feeling what you can get with free tools and the extra you get for using paid.
Then I have an appendix on the sciency checking I did before I commenced the vibe coding.
Animations that get to Aha! sooner
Planning out the Explainer Videos… Plan First, Implement Second
I took the sciency stuff from the Appendix below and whacked it into Google Gemini to come up with a plan for creating the 3D explainers
create a physics explainer in 3d where a wooden raft has a heavy load in the middle. the raft is initially empty but the load is rolled onto it via logs. then the raft is surrounded by buttressed wooden walls and to form a pool. then water fills the pool and the raft floats with the water. when the water reaches the top of the pool wall, the raft is towed to the edge of the pool. then scaffolding is built under the raft. the water is released and the pool is drained. the raft and load is then rolled off the skaffolded platform that remains
how to turn this into a web assembly 3d animation?
write a prompt that creates a simple 3d animation in three.js to this format. i will run this in a separate chat with an ai that can generate 3d webapps
Click the arrow to show what Google Gemini created for onwards processing
Create a simple 3D animation using Three.js that can be embedded in a single HTML file.
Objective:
Visualize the initial step of a physics explainer: rolling a heavy load onto a wooden raft using logs as simple rollers.
Scene Description:
- Ground Plane: A flat, static ground plane (e.g., green or light grey color).
- Wooden Raft:
- Shape: A simple rectangular cuboid (BoxGeometry).
- Appearance: Brown color, like wood.
- Position: Resting flat on the ground plane.
- Logs (for rolling):
- Quantity: Three cylindrical logs (CylinderGeometry).
- Appearance: A contrasting wood color or grey.
- Position: Lying parallel to each other on the ground plane, creating a short “track” or ramp leading from the ground up to one of the shorter edges of the raft. They should be slightly inclined if possible, or simply positioned so the crate can roll over them onto the raft.
- Heavy Load (Crate):
- Shape: A rectangular cuboid (BoxGeometry), smaller than the raft but visibly heavy.
- Appearance: Dark grey or metallic color.
- Initial Position: At the end of the logs, on the ground plane, ready to be rolled onto the raft.
- Lighting:
- Include basic ambient light to illuminate the whole scene.
- Include a directional light to create some shading and depth (shadows are a bonus if easily implemented, but not strictly required).
- Camera:
- Type: PerspectiveCamera.
- Position: A static viewpoint that clearly shows the crate, the logs, and the raft, allowing the animation to be easily observed (e.g., an angled isometric-like view or a three-quarter view).
Animation Details (to occur over approximately 5-8 seconds):
- Crate Movement:
- The crate should smoothly translate from its initial position on the ground.
- It should move “up” and “along” the logs.
- It should then move onto the top surface of the raft, coming to rest near the center of the raft.
- Log Rotation:
- As the crate moves over the logs, each log should rotate around its own central longitudinal axis.
- The direction and speed of rotation should visually correspond to the crate rolling over them.
- Looping/Replay: The animation should ideally play once upon loading the page. A simple replay button (HTML outside the canvas) would be a bonus but is not essential for the core request.
Code Requirements:
- Use the Three.js library (ensure it’s linked, e.g., via CDN, or included).
- The primary output should be a single, self-contained HTML file with embedded JavaScript and Three.js code that can be run directly in a modern web browser. If separate JS/CSS files are more natural for the AI, that’s acceptable too, as long as it’s a complete package.
- Use Three.js primitive geometries for all objects (BoxGeometry, CylinderGeometry, PlaneGeometry). Do not require external 3D model files.
- Use basic Three.js materials (e.g., MeshStandardMaterial, MeshLambertMaterial, or MeshBasicMaterial).
- The JavaScript code should be well-structured and include comments explaining the setup of the scene, objects, and especially the animation logic (e.g., how the crate’s position and logs’ rotation are updated over time).
- Ensure the animation loop (
requestAnimationFrame) is correctly implemented.
Deliverable:
A functional HTML file (or set of files) that renders the described 3D scene and animation using Three.js.
Implementing the Plan
Implementing with Claude Sonnet 4 Free
I tried Claude Sonnet 4 Free. I was underwhelmed, but for free, what can I expect? I made some hand change and got the feeling Claude was sick of me freeloading and this would not be fair to evaluate Claude on this basis. So I moved to use my paid subscription to ChatGPT.
See the initial attempt #1… the logs spin like tops. Also the spinning is against the direction of imparted force. I tried manually to fix this…
After a few attempts, I got Claude free to this point. The logs spin longitudinally (ai helped me with that word) Yet again, the spin on the logs is against the imparted force, so totally unrealistic and jarring. The other AI also had this problem, it was not unique to Claude.
Implementing with ChatGPT o3
Phase 1 – Simply Rolling the Load onto the Raft
After I exhausted Claude free above, I move on to where I was actually paying money for the results. I’ve seen that results improve with longer thinking time and paying customers get longer thinking time.
Below is the Phase 1 explainer that I came up with from ChatGPT o3. This evolved with poh prompts just like Claude above. In no way was this a one-shot. The logs roll naturally with the direction of the heavy load! The logs are striped so the viewer can perceive the rotation. Now that Phase I is explained, I can move on to Phase 2 which forms the pool and lifts the stone
Phase 2 – Forming the Pool and Lifting the Load
I continued with ChatGPT o3. It required a lot of poh manual tweaks. It developed major errors and some of these errors were edge-of-the-seat errors where the screen was entirely blank with no console logging. I had no ability to debug, so was totally reliant on the tool to magically fix itself. After a while I chose the last working version. This is not the explainer I would have designed myself, but equally the AI wrote it with just me prompting. It took about 20 minutes of back and forth.
- Missing Labels
- I just could not get the o3 genai to add the labels back. Every attempt lead to serious errors
- Red Cylinders should be humanoid
- I asked for humanoid, the tool said it was giving them arms and legs, but all we ended up with was a sphere on a cylinder
Conclusions
So I have taken a hunch about how Ancient Egyptians may have moved the massive stones for the pyramids and use AI tools to check some assumptions, calculate some rough estimates and design a 3D animation of the process that works in the viewers browser.
I used AI for different tasks, and some of the AI made input for other AI to improve on.
Google Gemini (Free) – did what seemed like an okay job taking the description of a problem… a raft lifts a heavy load by forming a temporary pool around the raft which is then filled by water… and turning that into instructions which got other AI to build the explainer. I didn’t use this further because I do not have a paid subscription. Google, if you’d like me to review your paid subscription, please contact me.
Claude Sonnet 4 (Free) – This superb free version did a good effort making a rudimentary 3D explainer. Claude has a lovely preview function that shows the live html results of what it it coding. I switched to a different AI which I have a paid subscription. This is no comment on Claude, you only get so much for free. Claude, if you’d like me to review your paid subscription, please contact me.
ChatGPT o3 Pro (Paid) – Because I have a paid subscription to this AI Platform, I used it for the bulk of the task. It is also really top end with amazing results.
- Researched the Wood Available to the Ancient Egyptians
- Also listed the bouyancy of the Wood
- Wrote a program to calculate the size of a raft large enough to lift the heaviest known Egyptian stone piece, a whopping 400 tonnes.
- Wrote both Phase 1 and 2 of the explainer.
- Phase 1 was a proof of concept to evaluate if prompts could be used to create a working three.js explainer that working in browser. It could.
- Phase 2 was the explainer of the core hunch, forming a pool and filling it with water and seeing the load rise with the water. This worked with a lot of cajoling and many hairy moments where it could have been a dead end. Eventually the dead ends became a death spiral and the best result had to be retrieved and presented as the final result.
Results
| Platform | Free/Paid | Task | Mark | Notes |
| Google Gemini Pro 2.5 | Free | Prompt Planning | B+ | Clear work. Missed some important contraints that should have been in the instructions. (e.g. logs should roll with load) |
| Claude Sonnet 4 | Free | Three.js 3D explainer | C | Could do better. Logs spun on wrong axis in wrong direction. Contrasting colours hard to specify. Not bad for free though |
| ChatGPT o3 | Paid | Research | A– | Good work as always. Cross validation would give higher mark |
| ChatGPT o3 | Paid | Scientific Theory Validation | A– | Worked fine. Some instructions to the user on how to double check the findings would give a higher mark |
| ChatGPT o3 | Paid | Three.js 3D explainer | B– | Got there eventually. Some worrying moments with black screens and inscrutable errors, but these were resolved. Previous results had to be resurrected after further work led to dead ends and death cycles. |
Appendix – The Background Research
So how were the Pyramids built? The true origins are lost in time, but perhaps we can try to explain them. This is my first attempt, and I am using Generative AI to help so I can test how useful or not these tools really are. Perhaps the most modern tech can unearth clues about some of the oldest tech?
My hunch is that the Egyptians floated the stone blocks up on rafts! Not on the river, but rather by putting the stone block on a raft at the base of the pyramid then forming makeshift pools around the stone blocks. Then the pools were filled with water. The raft floats with the water level. The raft is then towed to the edge and rolled into position. Like a rafty elevator. Scaffolding can stabilise and secure the process where necessary.
So how do I check that any of this was possible? There were a few stages. I had to find out what wood the Egyptians had access to, then write a computer program to calculate the size of the raft. Obviously a 1000m raft would have been impossible. Once the computer program spat out a number within the realms of practicality, I used GenAI to make some 3D explainers. This was in two parts itself. Getting one AI to write text instructions for the 3D explainer, then other GenAI to take those instructions and make live 3D explainers that run in your browser!
Checking the Basics with GenAI
Stuff I knew already – The POH value add
I knew wood has bouyancy and floats. Some woods are better than others for floating and others for bearing loads. I know very heavy objects like pyramid stone are transported by boats without sinking the boat. A raft is the simplest ‘boat’ so if I can roughly prove that a raft would work, then it seems plausible that with better knowledge of shipwrighting the design could be improved and shrunken. If I prove for a raft, then I prove for other boats.
Scaffolding can be erected to many different shapes. Scaffolding can support very heavy loads such as pyramid stones. Scaffolding can be erected underneath objects to prevent them falling. The Egyptians would have known and used scaffolding. So where you see portions that could roll back, forward or need a level surface, imagine if scaffolding could make that problem go away.
Stuff I Need to Use AI to Check for Me
Checking the Wood available to Ancient Egyptians
I used ChatGPT o3 with Research to answer
what wood did the ancient egyptians have access to?
Then focusing exclusively on woods native to Egypt and also look up their density for bouyancy:
| Native species | Oven-dry density (kg m⁻³) | Relative buoyancy* | Typical river-craft roles | Key data |
|---|---|---|---|---|
| Sycamore-fig (Ficus sycomorus) | ≈ 420 ± 50 | Very high | Small ferry hulls, funeral & offering barges, paddles | Model hull carved from one block of sycamore: British Museum EA 9524 |
| Acacia (Vachellia/Acacia nilotica, V. seyal) | 540 – 700 (range reflects heartwood vs. sapwood) | High | Everyday cargo boats, “baris” freighters, masts | Herodotus describes planking and mast of acacia; planks 1 m long |
| Tamarisk (Tamarix aphylla) | ≈ 660 ± 70 (researchgate.net) | Moderate | Predynastic & Early Dynastic plank boats (Abydos fleet) | Hull planks of Abydos boat No. 10 were local tamarisk |
| Doum/date palms (Hyphaene thebaica, Phoenix dactylifera) | 300 – 450 in central stem; highly variable | Very high but weak | Punting poles, beams, float aids, deck lattices | Not rigid enough for hull planking; used as spars and lashings |
I estimated the Ancient Egyptians would have used the most bouyant woods, Sycamore and Acacia. The AI lookup noted historical references to these woods in ancient texts and samples.
What is the Heaviest Block in the Pyramids?
in the ancient egypt pyramids and sphinx et al. what are the largest heaviest stones? are they all at the bottom, or are the largest stones also present vertically higher up?
I asked o3 Research and one whopper was 400 tonnes from a limestone block in Khafre’s Valley Temple.
Could a Raft work even on paper?
Next I wanted to check what size of raft was required to lift 400 tonnes of stone. If the theoretical raft was gigantic, then the raft could not have worked. So I asked o3 to write me a program to calculate the answer. It’s worth saying that Generative AI as pure LLMs cannot do calculations without external support. They can give you answers that look correct but are totally wrong. Right so how do we do calculations?
How to get accurate calculations from Generative AI? Use this strategy
The way around the limitation on LLMs getting accurate calculations is to get the Generative AI first to write a program then run that program to calculate the results. This program has the physics and mathematics embedded within the program. Then the good LLMs can run this program which it wrote and use the output to calculate an answer. This solves the innaccuracy problem to a large extent. You still need to check the program and answers, the system is still fallible: just less so.
Back to the raft calculations, assuming a 60% Sycamore raft and 40% Acacia Hull for a blend of strength and maximum bouyancy, the program said a raft would need to be 29meters on each side. This seems possible.
Program output: 1 m-thick deck → ~ 752 m² → ≈ 27.4 m × 27.4 m.
This is about the same size as a large swimming pool, but square. Do-able if you’re Pharoah. So I can describe the principle, can I now make some