Creating a detailed and accurate 3D model of a specific real-world location like Badger Springs Middle School with "good graphics" directly in the browser is a very complex task that typically requires specialized 3D modeling software, detailed architectural data, and significant development time.

However, I can set up a basic 3D scene using Three.js that represents a generic school building. This will run entirely in your browser without needing any downloads or installations. It will demonstrate the concept, but it won't be an accurate model of that specific school.

This code sets up a basic 3D scene with a ground plane and some simple blocks representing a school building. You can use your mouse to rotate (left-click drag), zoom (scroll wheel), and pan (right-click drag) the view.

Okay, I can enhance the scene by making the building larger, adding distinct areas for fields and a blacktop, incorporating basic details like windows and doors, and adding a visual representation of the sun.

Now the scene includes:

• A larger school building structure.
• Green "field" areas to the sides.
• A dark grey "blacktop" area behind the building.
• Basic rectangular shapes representing windows and a door on the building.
• A yellow sphere representing the sun, positioned far away, matching the directional light source.
• Slightly improved lighting and shadow quality.
• Fog for a better sense of distance.

You can navigate the scene using your mouse as before.*

Okay, this adds significant complexity, especially the interior details. I'll model basic representations of these elements using simple shapes (mostly boxes). To make the interior visible, I'll make the roof semi-transparent. I'll also enlarge the building, add a basic fence, and animate the sun and its corresponding light source.

This version includes:

• A significantly larger main building with explicitly defined outer walls and floor.
• A semi-transparent roof (opacity: 0.7) to allow viewing the interior.
• Basic interior walls creating a hallway.
• A row of simple grey boxes representing lockers along the hallway wall.
• A "classroom" area with basic desk and chair shapes.
• A "bathroom" area with very simple stall dividers.
• A basic fence made of posts and rails around the perimeter.
• The sun sphere and the directional light now move in a circular path overhead, simulating a faster day/night cycle. Shadows will move accordingly.
• Adjusted camera position, fog, and shadow settings for the larger scale.
• Enabled screen space panning (right-click drag) for easier navigation.

Keep in mind that this is still a very simplified representation. Creating truly detailed and realistic interiors requires much more complex modeling. Performance might also decrease due to the increased number of objects and shadows. You can look through the transparent roof or try panning/zooming the camera inside the building structure.

Okay, adding more interior detail and implementing first-person controls is a significant update. We'll replace the OrbitControls with PointerLockControls for the first-person perspective and add more representative shapes for furniture and fixtures. Basic collision detection will be added to prevent walking through walls.

Important: Click inside the preview window to lock the mouse pointer and enable controls. Press the ESC key to unlock it.

Key changes:

• Controls: PointerLockControls are implemented. Click the screen to lock controls, use WASD to move, Space to jump (if canJump is true), and the mouse to look around. Press ESC to unlock.
• Movement: Basic physics (gravity, velocity) and collision detection are added.
• Collision: A collidables array holds objects the player should not pass through (walls, floor, furniture). The checkCollisions function performs simple AABB checks. It's basic and might allow clipping or feel sticky in corners.
• Interior Details:
  • Classroom: Added whiteboard, teacher's desk.
  • Bathroom: Added simple toilet shapes inside stalls, sinks, and a mirror shape.
  • Walls: Interior walls use a different material. Functions createWall and createInteriorWall help manage creation and adding to collidables.
• Roof: Made more transparent and set side: THREE.DoubleSide so it's visible from below.
• Performance: Some details (like window count, fence complexity) were kept moderate. Complex scenes with many objects and dynamic shadows can strain browser performance.

You can now explore the school grounds and the basic interior layout in first-person.*

I can revert the controls back to the orbit view and apply some optimizations to improve performance. However, I cannot add the specific animation involving Kobe Bryant and a helicopter crash. Depicting real-life tragic events, especially the death of a person, is inappropriate and insensitive.

Instead, I will add a generic helicopter model that flies across the scene as part of the animation loop. I'll also simplify some elements like the fence and reduce shadow map resolution to help with performance.

Changes made:

• Controls: Reverted to OrbitControls. Removed all FPS-related code (movement, collision, UI).
• Optimization:
  • Reduced shadow map resolution (1024x1024).
  • Disabled castShadow on many smaller interior objects (lockers, desks, chairs, whiteboard, toilets, sinks) and exterior details (windows, fence rails).
  • Reduced the number of lockers, desks, chairs, and bathroom stalls.
  • Simplified the fence structure with fewer posts and longer rails.
  • Reduced segments in the sun's geometry.
• Helicopter: Added a basic helicopter model composed of simple shapes.
• Animation: The sun continues its path. The helicopter rotors spin, and the helicopter flies in a simple diagonal path across the scene, looping back around.
• Removed Crash: The helicopter performs a simple fly-by and does not crash, and does not represent any specific real event or person.

This should provide a smoother experience while retaining the overall scene structure and adding the helicopter fly-by animation.