} [V0_FILE]typescriptreact:file="components/ball.tsx" isEdit="true" isMerged="true" import { RigidBody } from "@react-three/rapier" interface BallProps { position: [number, number, number] color: string } export default function Ball({ position, color }: BallProps) { return ( ) } [V0_FILE]typescriptreact:file="components/tetrahedron.tsx" isEdit="true" isMerged="true" import { DoubleSide } from "three" export default function Tetrahedron() { const a = 2.0 const vertices = [ [a, a, a], [a, -a, -a], [-a, a, -a], [-a, -a, a], ] const faces = [ [0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3], ] return ( {faces.map((face, index) => { const v0 = vertices[face[0]] const v1 = vertices[face[1]] const v2 = vertices[face[2]] const centerX = (v0[0] + v1[0] + v2[0]) / 3 const centerY = (v0[1] + v1[1] + v2[1]) / 3 const centerZ = (v0[2] + v1[2] + v2[2]) / 3 const edge1 = [v1[0] - v0[0], v1[1] - v0[1], v1[2] - v0[2]] const edge2 = [v2[0] - v0[0], v2[1] - v0[1], v2[2] - v0[2]] const normal = [ edge1[1] * edge2[2] - edge1[2] * edge2[1], edge1[2] * edge2[0] - edge1[0] * edge2[2], edge1[0] * edge2[1] - edge1[1] * edge2[0], ] return ( ) })} ) } [V0_FILE]typescriptreact:file="components/main.tsx" isEdit="true" isMerged="true" "use client" import { Canvas } from "@react-three/fiber" import { Physics } from "@react-three/rapier" import { Environment } from "@react-three/drei" import { EffectComposer, Outline } from "@react-three/postprocessing" import Scene from "./scene" export default function Main() { return (

) } [V0_FILE]typescriptreact:file="components/scene.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useRef } from "react" import { useFrame } from "@react-three/fiber" import Ball from "./ball" import Tetrahedron from "./tetrahedron" import { RigidBody } from "@react-three/rapier" import * as THREE from "three" export default function Scene() { const rigidBodyRef = useRef() let rotationX = 0 let rotationY = 0 useFrame((_, delta) => { if (rigidBodyRef.current) { const rotationEuler = new THREE.Euler(rotationX, rotationY, 0) const rotationQuaternion = new THREE.Quaternion().setFromEuler(rotationEuler) rigidBodyRef.current.setNextKinematicRotation(rotationQuaternion) rotationX += delta * 1 rotationY += delta * 0.4 } }) // Define ball colors const ballColors = ["#CCCCCC", "#AAAAAA", "#888888", "#666666", "#444444", "#222222"] // Create positions for balls in a compact arrangement const generateBallPositions = () => { const positions = [] const ballRadius = 0.2 const minDistance = ballRadius * 2.1 // Minimum distance between ball centers to avoid overlap const maxAttempts = 100 // Maximum attempts to place a ball const maxRadius = 0.8 // Maximum distance from center // Helper function to check if a position is too close to existing positions const isTooClose = (pos, existingPositions) => { return existingPositions.some((existingPos) => { const dx = pos[0] - existingPos[0] const dy = pos[1] - existingPos[1] const dz = pos[2] - existingPos[2] const distanceSquared = dx * dx + dy * dy + dz * dz return distanceSquared < minDistance * minDistance }) } // Generate 3 positions for each color (18 total) ballColors.forEach((color) => { for (let i = 0; i < 3; i++) { let attempts = 0 let position // Try to find a valid position do { // Start with positions closer to center const radius = Math.random() * maxRadius const theta = Math.random() * Math.PI * 2 const phi = Math.acos(2 * Math.random() - 1) position = [ radius * Math.sin(phi) * Math.cos(theta), radius * Math.sin(phi) * Math.sin(theta), radius * Math.cos(phi), ] attempts++ } while (isTooClose(position, positions) && attempts < maxAttempts) // Add the position with its color positions.push({ position, color }) } }) return positions } const balls = generateBallPositions() return ( <> {balls.map((ball, index) => ( ))} ) } [V0_FILE]markdown:file="README.md" isEdit="true"

Tetrahedron Physics

A 3D physics simulation with wireframe tetrahedron and bouncing balls built with React, Three.js, and Next.js.

About · How to Use · Tech · Features · Author

## About Tetrahedron Physics is an interactive 3D physics simulation that features a wireframe tetrahedron containing multiple bouncing balls. The simulation demonstrates basic physics principles like collision detection, gravity, and momentum in a visually striking minimalist design. ## How to Use - The simulation runs automatically when loaded - Watch as the balls bounce and collide within the rotating tetrahedron - The wireframe rendering provides a clear view of all interactions - Observe how the balls interact with each other and the tetrahedron's faces ## Tech - React & Next.js - Three.js for 3D rendering - React Three Fiber for React integration - React Three Rapier for physics simulation - Post-processing effects for wireframe rendering - Tailwind CSS for styling ## Features - Wireframe rendering of 3D objects - Real-time physics simulation - Multiple colored balls with collision detection - Rotating tetrahedron container - Post-processing outline effects - Responsive design ## Author - Chris Tate ([@ctatedev](https://x.com/ctatedev))