Three Prompts: 3D First Test

Introduction

Three.js is a powerful JavaScript library that makes working with 3D graphics in the browser accessible and enjoyable. Combined with React, it enables developers to create immersive and interactive 3D experiences without requiring extensive graphics programming knowledge.

In this Three Prompts project, we built a responsive 3D shape viewer that allows users to interact with various 3D geometric shapes. The application features a clean, modern UI that works well on both desktop and mobile devices, with intuitive controls for manipulating the 3D objects.

The Three Prompts

Here are the exact prompts that were used to create this project:

 @projects/3d-first-test 

1. add 3js to the package.json and any other deps needed
2. build out a demo that renders a cube in 3d and allows the users to manipulate it in the browser
3. Make sure the design is responsive and works on mobile
4. Keep this really simple, make sure you accomplish the other tasks without breaking things or adding useless random changes

Now plan to make this more broken out into multiple components:

1. I want the ability to choose from multiple shape types
2. Shapes should have different colored sizes to easily view the splinning
3. Always show the instructions at the top, include this with the shape picker
4. Keep it simple, don't make any breaking changes
- Make sure to keep desktop working
- Make sure to keep mobile working
- Don't break any styles or other working features


Once done with the plan /execute

Now keep it simple and fix there things one at a time, Once finished with one move onto the next

1. The shere has no color
2. the torus has no color
3. The cone has color on the cone part but the bottom does not have any color
4. The cylinder has color on the rounded parts but both ends of it has no color

Project Implementation

Core Technologies

This project leverages several modern web technologies:

• React - For building the UI components and managing application state
• Three.js - The foundation for 3D rendering in the browser
• React Three Fiber - A React renderer for Three.js, making it easier to work with Three.js in React
• React Three Drei - A collection of useful helpers for React Three Fiber
• Vite - For fast development and optimized production builds

Component Architecture

The application follows a modular component structure:

1. App Component - The main container that manages the shape selection state
2. Controls Component - Provides the UI for shape selection and displays instructions
3. Scene Component - Sets up the 3D environment with lighting and camera
4. Shape Component - Renders different 3D shapes based on the selected type

This separation of concerns makes the code more maintainable and easier to extend with new features.

3D Shape Implementation

The project implements five different 3D shapes, each with unique visual characteristics:

• Cube - A six-sided shape with different colored faces
• Sphere - Using PhongMaterial with emissive and specular properties for visual interest
• Torus - A ring shape with metallic material properties
• Cone - With separate materials for the cone surface and base
• Cylinder - Using different colors for the curved surface and end caps

Each shape automatically rotates to provide a better view of its 3D nature, and users can click on a shape to enlarge it or hover to change its color.

User Interaction

The application provides several ways for users to interact with the 3D shapes:

• Orbit Controls - Click and drag to rotate the view around the shape
• Zoom - Scroll to zoom in and out
• Shape Selection - Choose different shapes from the dropdown menu
• Direct Interaction - Click on shapes to enlarge them

Responsive Design

A key requirement was ensuring the application works well on all devices. This was achieved through:

• Fluid layouts that adapt to different screen sizes
• Touch-friendly controls for mobile users
• Media queries to adjust text sizes and UI elements
• Optimized touch interactions with touch-action: none to prevent default browser behaviors

Evolution Through Prompts

The project evolved through three distinct phases:

Phase 1: Initial Setup and Basic 3D Rendering

The first prompt focused on setting up the project with Three.js and creating a basic 3D cube that users could manipulate. This established the foundation with the necessary dependencies and a responsive design that worked on both desktop and mobile.

Phase 2: Component Structure and Shape Options

The second prompt requested breaking the application into multiple components and adding the ability to select different shape types. This phase also introduced the persistent instructions panel and ensured the design remained responsive.

Phase 3: Visual Refinements

The final prompt addressed specific visual issues with the shapes, ensuring each shape had proper coloring on all surfaces. This included:

• Adding emissive and specular properties to the sphere
• Implementing metalness and clearcoat for the torus
• Using material arrays to color different parts of the cone and cylinder

Technical Challenges and Solutions

Challenge: Multi-colored Shapes

Creating visually distinct shapes with multiple colors required different approaches for each geometry type:

// For the cube - using material array for each face
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color={colors[0]} attach="material-0" />
<meshStandardMaterial color={colors[1]} attach="material-1" />
// ... and so on for each face

// For the sphere - using advanced material properties
<sphereGeometry args={[1, 32, 32]} />
<meshPhongMaterial
  color={colors[0]}
  emissive={colors[2]}
  emissiveIntensity={0.2}
  specular={colors[3]}
  shininess={30}
/>

Challenge: Responsive 3D Canvas

Ensuring the 3D canvas worked well across devices required careful CSS implementation:

.canvas-container {
  width: 100%;
  height: 100%;
  flex: 1;
  position: relative;
  touch-action: none; /* Prevents default touch behaviors */
}

/* Media queries for different screen sizes */
@media (max-width: 768px) {
  /* Adjustments for tablet/mobile */
}

Conclusion

This project demonstrates how modern web technologies can be combined to create engaging 3D experiences in the browser. With just three prompts, we were able to build a fully functional, responsive 3D shape viewer that works across devices.

The modular component architecture makes the code maintainable and extensible, while the use of React Three Fiber and Drei simplifies working with Three.js in a React context.

This approach to 3D web development opens up possibilities for interactive product visualizations, educational tools, games, and more - all running directly in the browser without plugins or special software.

Links

Try the project live at /projects/3d-first-test/.

View other Three Prompts projects at /three-prompts.