3D Sailing Environment

Project Link

Visit Site

About The Project

This is a 3D sailing experience I built inspired by One Piece. You can sail around in a ship using controls similar to World of Warcraft - WASD movement with mouse look. The water is custom-made with animations, and there are islands and objects scattered around that you can collide with. There's also a border barrier so you can't sail outside the playable area. Works on both desktop and mobile - mobile has a joystick control option.

Features

  • WoW-style controls: Move with WASD and look around with the mouse, just like World of Warcraft. There's an onscreen control visualization so you can see what's happening.
  • Mobile joystick: On mobile devices, there's a joystick control option that works pretty well for touch screens.
  • Custom water: The ocean is a custom mesh I built with animations. It moves and reacts as you sail through it.
  • Collidable islands: There are islands and objects in the ocean that you can bump into - collision detection is working for all of them.
  • Boundary barrier: There's an invisible wall around the playable area so you can't sail off into infinity.
  • Music: Background music plays while you sail, and there's a volume slider to control it.

Mobile Experience

On mobile, there's a joystick control option that works pretty well. You can see it in action below - it's positioned on the left side of the screen and gives you full control over the ship's movement.

Mobile joystick interface for 3D Sailing Environment

Tech Stack

Built with Next.js, React, and Three.js for the 3D rendering. Used TypeScript throughout for type safety. The custom water mesh was probably the trickiest part - had to optimize it to keep performance smooth while still having nice animations. Collision detection handles the ship hitting islands and objects, and the boundary system keeps you from sailing too far out.

Mobile support took some work to get the joystick controls feeling right. Had to handle touch events properly and make sure the joystick responded well on different screen sizes. The audio system is pretty straightforward - just background music with a volume slider.