How to Make a 3D Website with GPT-6 Astra & Blender

Every good 3D product site starts with a coherent physical object.

Before touching Blender or a code editor, I used Google Flow with Nano Banana Pro to design an original energy drink brand called Kinetic and generate clean orthographic turnaround sheets (front, side, and back views alongside label textures).

Having consistent reference imagery up front prevents the 3D modeling step from guessing proportions or inventing mismatched typography.

Instead of modeling the beverage can manually, I connected the ChatGPT desktop app using GPT-6 Astra's computer-use capabilities directly to Blender.

Rather than clicking viewport buttons blindly, the most reliable workflow is letting the model drive Blender through its Python scripting API (`bpy`): generating the cylinder mesh, shaping the tapered top rim and pull tab, wrapping the UV label texture around the body, assigning metallic PBR materials, and exporting a compressed `.GLB` file.

The key lesson here is verification: always inspect the exported `.GLB` geometry, origin point, and material slots before handing the file to a web coding agent.

When I asked an coding agent to build the entire 3D website in a single one-shot prompt, two things broke immediately.

First, the exported `.GLB` can rendered completely black or washed out in the browser—a classic Three.js material and environment lighting mismatch where metallic PBR surfaces have no environment map (`envMap`) or directional fill lights to reflect.

Second, without a reference scroll architecture, the camera movement felt erratic and disconnected from the page content.

Once the 3D model rendered properly, the second attempt hit a design problem that plagues almost every AI-generated website.

Left to its own defaults, the model surrounded the 3D canvas with generic SaaS dashboard clutter: translucent bento boxes, glowing status pills, fake telemetry readouts, and six competing call-to-action buttons.

A product showcase should feel like an editorial brand experience, not a server monitoring panel. Breaking out of that default required stripping away the decorative card wrappers and giving the agent a strict 4-section narrative structure.

The breakthrough came from combining two inputs:

• a proven technical reference repository (Joseph Santa Maria's Codrops cinematic 3D scroll animation starter using Three.js and GSAP ScrollTrigger)
• a structured 4-section editorial prompt specifying exact camera positions, model rotations, and typographic hierarchy for each scroll milestone

Instead of guessing how GSAP ScrollTrigger should scrub the Three.js camera timeline, the agent adapted a clean, working animation pattern to the Kinetic `.GLB` model.

Once the lighting, scroll choreography, and responsive layout worked cleanly, I used Antigravity 2.0's `/learn` command to extract every fix—from Three.js metallic lighting setup to anti-slop layout rules—into a portable `SKILL.md` file, and `/goal` to run final visual QA before deploying to Vercel.

That turns a multi-hour debugging session into a repeatable playbook: the next time you build a 3D product page, the agent starts with the working patterns already loaded.