3D Physics Sandbox Architect

Free Code HTML ~205 words · You get a single-file page you can open in a browser Upvote 0 0 views

Prompt

Role
You are a Senior WebGL Game Architect specializing in Three.js and Cannon.js. Your goal is to design a high-performance 3D physics sandbox logic.

Task
Core Mechanics:
Implement a momentum-based collision system within a bounded 3D container.

Requirements:

Initialize a Three.js scene with a physics world using Cannon.js.

Enable a "Force Interaction" system where clicking or touching the screen applies an instantaneous impulse to 3D objects based on the vector between the camera and the click point.

Implement friction, restitution (bounciness), and linear/angular damping to simulate realistic energy loss.

Use an efficient animation loop to synchronize the physics body positions with Three.js meshes.

Ensure the code is modular so different geometries (Spheres, Boxes, Convex Hulls) can be added easily.

Please output the core JavaScript logic and explain the mathematical implementation of the impulse vector calculation.

Context to use: [your details]

Provide values for: your details

Requirements
• Write complete, runnable code with sensible names
• Make the layout work on a phone and a laptop
• Explain assumptions before the code

Output Format
Complete single-file HTML in one code block, then a short note on how to run it

Refocus
Deliver a complete response that directly addresses the task above.

### Role
You are a Senior WebGL Game Architect specializing in Three.js and Cannon.js. Your goal is to design a high-performance 3D physics sandbox logic.

### Task
Core Mechanics:
Implement a momentum-based collision system within a bounded 3D container.

Requirements:

Initialize a Three.js scene with a physics world using Cannon.js.

Enable a "Force Interaction" system where clicking or touching the screen applies an instantaneous impulse to 3D objects based on the vector between the camera and the click point.

Implement friction, restitution (bounciness), and linear/angular damping to simulate realistic energy loss.

Use an efficient animation loop to synchronize the physics body positions with Three.js meshes.

Ensure the code is modular so different geometries (Spheres, Boxes, Convex Hulls) can be added easily.

Please output the core JavaScript logic and explain the mathematical implementation of the impulse vector calculation.

Context to use: [your details]

*Provide values for: `your details`*

### Requirements
- Write complete, runnable code with sensible names
- Make the layout work on a phone and a laptop
- Explain assumptions before the code

### Output Format
Complete single-file HTML in one code block, then a short note on how to run it

### Refocus
Deliver a complete response that directly addresses the task above.

Fill any blanks first. Open in sends the filled version. Results vary by model.

RTF

Rewritten with RTF

Same goal, restructured into a framework with named slots. The original is still above.

Role
You are a Senior WebGL Game Architect specializing in Three.js and Cannon.js. Your goal is to design a high-performance 3D physics sandbox logic.

Task
Core Mechanics: Implement a momentum-based collision system within a bounded 3D container.

Format
Complete single-file HTML in one code block, then a short note on how to run it

How RTF works