My First Three.js App

{"name":"Bouncy Ball Bonanza","description":"Get ready for a bouncing good time in Bouncy Ball Bonanza! Control colorful balls as they bounce around the screen and collect points. Challenge yourself to see how high you can score in this addictive ball bouncing game!","photo":null,"view_count":5,"fork_count":0,"expires_at":null,"created_at":"2024-01-09T21:26:25.835120Z","updated_at":"2024-01-09T22:06:41.086837Z","user_id":1,"status":"PUBLIC","parent_id":null,"id":315,"user":{"photo":null,"email":null,"recess_id":"3c157d72-b311-5420-5811-b5ccb77b8bb9","created_at":"2023-12-11T21:38:41.147846Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"nebwinters","id":1,"password_hash":null,"updated_at":"2023-12-11T21:38:41.147848Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"\nvar scene, camera, renderer, ball, pivot;\nvar mouse = new THREE.Vector2();\nvar PI_2 = Math.PI / 2;\nvar mouseIsDown = false;\nvar radius = 5;\nvar isBouncing = false;\nvar isJumping = false;\nvar portal;\n// Gravity, damping, ground level for bouncing and bouncing flag\nvar GRAVITY = -0.02;\nvar DAMPING = 0.8;\nvar GROUND = -2;\nvar jumpCount = 0; // initialize the jumpCount to 0\nvar MAX_JUMP = 2; // maximum number of jumps allowed before landing\nvar jumpForce = 0.4;\nvar rollForce = 0.005;\nvar rollSpeed = 0.05;\nvar level = 0;\nvar levelCleared = false;\nvar canMove = true;\nvar jumpCount = 0; // initialize the jumpCount to 0\nvar MAX_JUMP = 2; // maximum number of jumps allowed before landing\nvar zoomSpeed = 1.05;\nvar zoomMin = 15;\nvar zoomMax = 150;\n\nvar mouseDown = false;\nvar startMousePos = new THREE.Vector2();\nvar currentMousePos = new THREE.Vector2();\n\n//Click and Drag variables\nvar isDragging = false;\nvar previousMousePosition = {\n x: 0,\n y: 0\n};\n\n\n\n\n\nvar framesOnGround = 0;\nvar FRAMES_ON_GROUND_THRESHOLD = 3;\nvar MIN_BOUNCE_VELOCITY = 0.2;\n\nvar keys = {\n 'w': false,\n 'a': false,\n 's': false,\n 'd': false\n};\n\nvar onGround = false;\nvar onPlatform = false;\n\n\nvar platforms = [];\nvar platform;\nvar PLATFORM_HEIGHT = 1; // Set the height of the platform\n\n// Variables for camera smoothing\nvar smoothFactor = 0.9; // Amount of current camera position to keep\nvar cameraYSmoothed = 0; // Smoothed camera Y position\nvar wasJumping = false;\nvar shouldCameraMoveUp = false;\n\n\nfunction init() {\n scene = new THREE.Scene();\n\n camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 1000);\n camera.position.z = 5;\n\n renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(window.innerWidth, window.innerHeight);\n document.body.appendChild(renderer.domElement);\n\n var geometry = new THREE.SphereGeometry(0.5, 32, 32);\n var material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });\n ball = new THREE.Mesh(geometry, material);\n ball.position.y = GROUND + geometry.parameters.radius + 0.001;\n ball.velocity = new THREE.Vector3(0, 0, 0);\n scene.add(ball);\n\n // Create pivot\n pivot = new THREE.Object3D();\n pivot.position.set(ball.position.x, ball.position.y, ball.position.z);\n\n // Add pivot to the scene\n scene.add(pivot);\n\n // Add camera to the pivot\n pivot.add(camera);\n\n var light = new THREE.PointLight(0xFFFFFF, 1, 1000); // reduced intensity from 2 to 1\n light.position.set(2, 2, 2);\n scene.add(light);\n\n var ambientLight = new THREE.AmbientLight(0x404040);\n scene.add(ambientLight);\n\n loadLevel(level)\n\n\n}\n\nfunction animate() {\n requestAnimationFrame(animate);\n\n // Update ball position based on velocity\n ball.position.add(ball.velocity);\n\n // Apply gravity to velocity if the ball is above the ground\n if (ball.position.y > GROUND + ball.geometry.parameters.radius) {\n ball.velocity.y += GRAVITY;\n }\n\n // Bounce off ground only after ball has jumped\n if (isJumping && ball.position.y <= GROUND + ball.geometry.parameters.radius && ball.velocity.y < 0) {\n if (Math.abs(ball.velocity.y) < MIN_BOUNCE_VELOCITY) {\n ball.velocity.y = 0; // Stop bouncing when velocity is less than MIN_BOUNCE_VELOCITY\n isJumping = false;\n } else {\n ball.velocity.y *= -1 * DAMPING;\n }\n }\n\n // Check for platform collisions\n var ballBB = new THREE.Sphere(ball.position, ball.geometry.parameters.radius);\n var onGround = ball.position.y <= GROUND + ball.geometry.parameters.radius;\n var onPlatform = false;\n var platformY = 0;\n for (var i = 0; i < platforms.length; i++) {\n var platformBB = new THREE.Box3().setFromObject(platforms[i]);\n if (ballBB.intersectsBox(platformBB)) {\n onPlatform = true;\n platformY = platforms[i].position.y + platforms[i].geometry.parameters.height / 2;\n ball.position.y = platformY + ball.geometry.parameters.radius; // Adjust ball's y position to be above the platform\n if (ball.velocity.y < 0) { // Apply damping only when the ball is falling\n if (Math.abs(ball.velocity.y) < MIN_BOUNCE_VELOCITY) {\n ball.velocity.y = 0; // Stop bouncing when velocity is less than MIN_BOUNCE_VELOCITY\n isJumping = false;\n } else {\n ball.velocity.y *= -1 * DAMPING; // Reflect and damp the ball's velocity in the y direction\n }\n } else if (ball.velocity.y === 0) { // Prevent ball from falling when its velocity is zero\n isJumping = false;\n }\n }\n }\n\n if (mouseDown) {\n // Calculate how much the mouse has moved since the last frame\n var deltaX = currentMousePos.x - startMousePos.x;\n var deltaY = currentMousePos.y - startMousePos.y;\n\n // Calculate the new camera position\n var radius = camera.position.distanceTo(ball.position);\n var spherical = new THREE.Spherical();\n spherical.setFromVector3(camera.position);\n spherical.theta -= deltaX * 0.01;\n spherical.phi -= deltaY * 0.01;\n camera.position.setFromSpherical(spherical);\n camera.lookAt(ball.position);\n\n // Update the start mouse position for the next frame\n startMousePos.copy(currentMousePos);\n }\n\n // Apply gravity to velocity if the ball is not on a platform\n if (!onPlatform) {\n ball.velocity.y += GRAVITY;\n }\n\n if (onGround && !onPlatform) {\n ball.position.y = GROUND + ball.geometry.parameters.radius; // Adjust ball's y position to ground level\n if (isJumping && ball.velocity.y < 0) {\n if (Math.abs(ball.velocity.y) < MIN_BOUNCE_VELOCITY) {\n ball.velocity.y = 0; // Stop bouncing when velocity is less than MIN_BOUNCE_VELOCITY\n isJumping = false;\n } else {\n ball.velocity.y *= -1 * DAMPING; // Reflect and damp the ball's velocity in the y direction\n }\n }\n }\n\n // Check if ball is on ground or a platform, and if so, reset jump count\n if (isBallOnSurface() && jumpCount > 0) {\n jumpCount = 0;\n }\n\n // Update ball position based on velocity\n if (!onGround && !onPlatform) {\n ball.position.add(ball.velocity);\n }\n\n if (canMove) {\n // Modify ball position based on which keys are down\n if (keys.w) ball.position.z -= rollSpeed;\n if (keys.a) ball.position.x -= rollSpeed;\n if (keys.s) ball.position.z += rollSpeed;\n if (keys.d) ball.position.x += rollSpeed;\n }\n\n // Make the camera follow the ball from behind\n let offset = new THREE.Vector3(0, 10, 20); // Offset from the ball's position\n let cameraPosition = new THREE.Vector3().copy(ball.position).add(offset);\n\n // If the ball has just jumped, update the camera's y position\n if (shouldCameraMoveUp) {\n camera.position.y = ball.position.y + offset.y;\n shouldCameraMoveUp = false;\n }\n\n// Set a fixed camera position\n camera.position.set(ball.position.x, ball.position.y + 10, ball.position.z + 2);\n \n // Set a fixed point for the camera to look at\n camera.lookAt(ball.position);\n // Check if the ball has passed through the portal\n var ballBB = new THREE.Box3().setFromObject(ball);\n var portalBB = new THREE.Box3().setFromObject(portal);\n\n if (ballBB.intersectsBox(portalBB)) {\n if (!levelCleared) {\n // Disable movement\n canMove = false;\n\n // Increase the level\n levelCleared = true;\n level++;\n\n triggerConfetti()\n\n // Wait for 2 seconds before moving to the next level\n setTimeout(function () {\n levelCleared = false; // Reset levelCleared flag\n loadLevel(level);\n\n // Enable movement\n canMove = true;\n }, 2000);\n }\n } else {\n levelCleared = false; // Reset levelCleared flag when the ball is not in the portal\n }\n\n\n renderer.render(scene, camera);\n var rollDirection = new THREE.Vector3(-ball.velocity.z, 0, ball.velocity.x).normalize();\n ball.rotateOnAxis(rollDirection, rollSpeed);\n\n // Make the camera look at the ball every frame\n camera.lookAt(pivot.position);\n\n // Render the scene with the camera\n renderer.render(scene, camera);\n}\n\nwindow.addEventListener('wheel', function (event) {\n if (event.deltaY < 0) { // Scrolling up\n camera.fov = Math.max(camera.fov / zoomSpeed, zoomMin);\n } else if (event.deltaY > 0) { // Scrolling down\n camera.fov = Math.min(camera.fov * zoomSpeed, zoomMax);\n }\n camera.updateProjectionMatrix();\n});\n\nwindow.addEventListener('mousedown', function (e) {\n console.log('mousedownworked')\n mouseDown = true;\n if (mouseDown) {\n\n // Calculate how much the mouse has moved since the last frame\n var deltaX = currentMousePos.x - startMousePos.x;\n var deltaY = currentMousePos.y - startMousePos.y;\n\n // Rotate the pivot\n pivot.rotation.y += deltaX * 0.01;\n pivot.rotation.x += deltaY * 0.01;\n\n // Update the start mouse position for the next frame\n startMousePos.copy(currentMousePos);\n }\n});\n\nwindow.addEventListener('mousemove', function (e) {\n if (mouseDown) {\n console.log(`mousemove worked`)\n currentMousePos.set(e.clientX, e.clientY);\n }\n});\n\nwindow.addEventListener('mouseup', function (e) {\n console.log(`mouseup worked`)\n mouseDown = false;\n});\n// New function to display the message\nfunction displayMessage() {\n var messageDiv = document.getElementById('message');\n messageDiv.innerText = 'Level ' + level + ' cleared!';\n}\nfunction isBallOnSurface() {\n var ballBB = new THREE.Sphere(ball.position, ball.geometry.parameters.radius);\n var onGround = ball.position.y <= GROUND + ball.geometry.parameters.radius;\n var onPlatform = false;\n for (var i = 0; i < platforms.length && !onPlatform; i++) {\n var platformBB = new THREE.Box3().setFromObject(platforms[i]);\n if (ballBB.intersectsBox(platformBB)) {\n onPlatform = true;\n }\n }\n return onGround || onPlatform;\n}\n\nwindow.addEventListener('keydown', function (event) {\n if (event.key === ' ' && jumpCount < MAX_JUMP) {\n if (jumpCount == 0) { // if it's the first jump\n ball.velocity.y = 0; // Reset vertical velocity to zero before jumping\n }\n ball.velocity.y += jumpForce;\n jumpCount++; // increment the jumpCount\n isJumping = true;\n shouldCameraMoveUp = true;\n }\n});\n\n\nwindow.addEventListener('keydown', function (event) {\n if (event.key === ' ' && !isJumping) {\n isJumping = true;\n shouldCameraMoveUp = true;\n ball.velocity.y = 0; // Reset vertical velocity to zero before jumping\n ball.velocity.y += jumpForce;\n }\n});\n\n\nwindow.addEventListener('keydown', function (event) {\n if (event.key === ' ' && jumpCount < MAX_JUMP) {\n ball.velocity.y = 0; // Reset vertical velocity to zero before jumping\n ball.velocity.y += jumpForce;\n jumpCount++; // increment the jumpCount\n isJumping = true;\n }\n});\n\n\n\n// Add event listener for WASD keys\nwindow.addEventListener('keydown', function (event) {\n if (keys.hasOwnProperty(event.key)) {\n keys[event.key] = true;\n }\n});\n\nwindow.addEventListener('keyup', function (event) {\n if (keys.hasOwnProperty(event.key)) {\n keys[event.key] = false;\n }\n});\n\n\nwindow.onload = function () {\n init();\n animate();\n};\n\nfunction triggerConfetti() {\n var confettiAnimation = confetti.create(null, { resize: true });\n confettiAnimation({\n particleCount: 100,\n spread: 70,\n origin: { y: 1 }\n });\n setTimeout(function () {\n confettiAnimation.reset();\n }, 1500);\n}\n\nfunction loadLevel(level) {\n // Clear the current level\n for (var i = 0; i < platforms.length; i++) {\n scene.remove(platforms[i]);\n }\n if (portal) scene.remove(portal);\n platforms = [];\n\n // Load the new level\n var platformGeometry = new THREE.BoxGeometry(2, 0.1, 2);\n var platformMaterial = new THREE.MeshPhongMaterial({ color: 0xFF0000 });\n\n // Create the portal material and geometry\n var portalMaterial = new THREE.MeshBasicMaterial({ color: 0x800080, side: THREE.DoubleSide });\n var portalGeometry = new THREE.RingGeometry(0.7, 0.8, 32);\n\n // Create the portal mesh\n portal = new THREE.Mesh(portalGeometry, portalMaterial);\n portal.scale.y = 1.5; // Scale the ring in the y direction to create an oval\n\n\n // Create the ground\n var groundGeometry = new THREE.PlaneGeometry(20, 20);\n var groundMaterial = new THREE.MeshPhongMaterial({ color: 0xAAAAAA, side: THREE.DoubleSide });\n var ground = new THREE.Mesh(groundGeometry, groundMaterial);\n ground.rotation.x = Math.PI / 2;\n ground.position.y = GROUND;\n scene.add(ground);\n\n\n if (level === 0) {\n // Create the platforms for level 0 (same as your initial setup)\n // Create the first platform\n var platformGeometry = new THREE.BoxGeometry(2, 0.1, 2);\n var platformMaterial = new THREE.MeshPhongMaterial({ color: 0xFF0000 });\n var platform1 = new THREE.Mesh(platformGeometry, platformMaterial);\n platform1.position.y = GROUND + PLATFORM_HEIGHT + 2;\n scene.add(platform1);\n platforms.push(platform1);\n\n // Create a second platform\n var platform2 = new THREE.Mesh(platformGeometry, platformMaterial);\n platform2.position.y = GROUND + PLATFORM_HEIGHT + 5;\n platform2.position.z = -2;\n scene.add(platform2);\n platforms.push(platform2);\n\n // Create a third platform\n var platform3 = new THREE.Mesh(platformGeometry, platformMaterial);\n platform3.position.y = GROUND + PLATFORM_HEIGHT + 8;\n platform3.position.z = -4;\n scene.add(platform3);\n platforms.push(platform3);\n\n // Create a fourth platform\n var platform4 = new THREE.Mesh(platformGeometry, platformMaterial);\n platform4.position.y = GROUND + PLATFORM_HEIGHT + 8;\n platform4.position.z = -4;\n platform4.position.x = +3.2;\n scene.add(platform4);\n platforms.push(platform4);\n\n // Create a fifth platform\n var platform5 = new THREE.Mesh(platformGeometry, platformMaterial);\n platform5.position.y = GROUND + PLATFORM_HEIGHT + 12;\n platform5.position.z = -6;\n platform5.position.x = +5;\n scene.add(platform5);\n platforms.push(platform5);\n\n // Adjust the portal position for level 0\n portal.position.y = GROUND + PLATFORM_HEIGHT + 12 + portalGeometry.parameters.outerRadius + 0.3 + 0.15;\n portal.position.z = -6;\n portal.position.x = +5;\n // Load the new level\n } else if (level === 1) {\n var largePlatformGeometry = new THREE.BoxGeometry(6, 0.1, 6); // Twice the size of the regular platforms\n var platform1 = new THREE.Mesh(largePlatformGeometry, platformMaterial);\n platform1.position.y = GROUND + PLATFORM_HEIGHT + 12;\n platform1.position.z = -6\n platform1.position.x = +5\n scene.add(platform1);\n platforms.push(platform1);\n\n\n // Create a second platform\n var platform2 = new THREE.Mesh(platformGeometry, platformMaterial);\n platform2.position.y = GROUND + PLATFORM_HEIGHT + 15;\n platform2.position.z = -10;\n platform1.position.x = +5\n scene.add(platform2);\n platforms.push(platform2);\n\n // Create a second platform\n var platform3 = new THREE.Mesh(platformGeometry, platformMaterial);\n platform3.position.y = GROUND + PLATFORM_HEIGHT + 17;\n platform3.position.z = -10;\n platform3.position.x = +5\n scene.add(platform3);\n platforms.push(platform3);\n\n // Create a fourth platform\n var platform4 = new THREE.Mesh(platformGeometry, platformMaterial);\n platform4.position.y = GROUND + PLATFORM_HEIGHT + 8;\n platform4.position.z = -4;\n platform4.position.x = +3.2;\n scene.add(platform4);\n platforms.push(platform4);\n\n // Create a fifth platform\n var platform5 = new THREE.Mesh(platformGeometry, platformMaterial);\n platform5.position.y = GROUND + PLATFORM_HEIGHT + 12;\n platform5.position.z = -6;\n platform5.position.x = +5;\n scene.add(platform5);\n platforms.push(platform5);\n\n // Adjust the portal position for level 1\n portal.position.y = GROUND + PLATFORM_HEIGHT + 16 + portalGeometry.parameters.outerRadius + 0.3 + 0.15;\n portal.position.z = -8;\n portal.position.x = +7;\n }\n scene.add(portal)\n}\n\nfunction toRadians(angle) {\n return angle * (Math.PI / 180);\n}\n\n","style.css":"\n@keyframes flash {\n 0% {\n opacity: 0;\n }\n\n 50% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n#message {\n z-index: 1;\n visibility: hidden;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 3em;\n color: #800080;\n /* Change text color to purple */\n font-family: 'Arial';\n background-color: #FFFFFF;\n /* Change background color to white */\n padding: 20px;\n border: 2px solid #800080;\n /* Change border color to purple */\n border-radius: 10px;\n /* Flash animation */\n}\n","index.html":"\n\n\n\n My First Three.js App\n \n \n\n\n\n

\n\n \n\n \n\n \n\n\n"},"chat_history":[{"deleted":0,"sender":"human","message":"I've got my new game working. I want the camera view to be more top down","project_id":315,"created_at":"2024-01-09T22:04:35.823666Z","output_tokens":null,"code_id":18119,"input_tokens":null,"id":11413},{"deleted":0,"sender":"ai","message":"To achieve a more top-down camera view, you can adjust the position of the camera relative to the ball. Here, we'll modify the 'animate' function to change the offset and camera position:\n\n```javascript\nfunction animate() {\n // ...\n \n // Make the camera follow the ball from behind\n let offset = new THREE.Vector3(0, 5, 2); // Offset from the ball's position\n let cameraPosition = new THREE.Vector3().copy(ball.position).add(offset);\n \n // Set a fixed camera position\n camera.position.set(ball.position.x, ball.position.y + 5, ball.position.z + 2);\n \n // ...\n}\n```\n\nExplanation:\n\n1. The `offset` variable determines how far the camera is from the ball. Changing its values will change the camera's position. Here, we've increased the y-value to move the camera higher above the ball, and decreased the z-value to move it closer to the ball, giving a more top-down view.\n\n2. `camera.position.set(ball.position.x, ball.position.y + 5, ball.position.z + 2);` - This line sets the camera's position in 3D space. It's set to the ball's position plus the offset, so the camera stays over the ball as it moves.\n\nRemember to adjust the values as needed to get the exact view you want.","project_id":315,"created_at":"2024-01-09T22:04:35.829676Z","output_tokens":null,"code_id":18119,"input_tokens":null,"id":11414}],"assets":[],"messages_sent":13,"comments":[],"steps":[]}