A.

03

Jogo 3d

Three.js Journey

Experimento do curso Three.js Journey: um percurso procedural com obstáculos (spinner, limbo e axe), física Rapier e controles por teclado.

Jogo 3d project preview
Visite o site

Projeto de estudo em React Three Fiber com foco em gameplay loop (start / playing / end), câmera que segue o player, geração aleatória de níveis e UI de interface sobre o canvas. Física com @react-three/rapier (corpo rígido, jump com raycast) e estado global com Zustand.

Tecnologias

  • Three.js
  • React Three Fiber
  • React Three Rapier
  • Drei
  • Zustand
  • Postprocessing
  • Vite

Estudo de caso

Por trás do projeto

  1. 01

    Gameplay e física

    A esfera responde a teclado e pulo só quando está no chão (raycast para baixo). Obstáculos usam corpo rígido / animação para criar o desafio do percurso.

  2. 02

    Nível procedural

    A cada seed/count, o nível monta uma sequência aleatória de blocos entre início e fim, mantendo o floor contínuo sob o trajeto.

  3. 03

    Estado e interface

    Zustand controla fase, quantidade de blocos e restart; a interface HTML informa o jogador sem sair do contexto 3D.

FUNÇÃO & CONTRIBUIÇÕES

O que foi feito

  • Implementar o player com RigidBody, movimento e jump via raycast
  • Montar o nível procedural (BlockStart, Spinner, Limbo, Axe, BlockEnd)
  • Gerenciar fases do jogo e restart com Zustand
  • Integrar câmera suave que acompanha a esfera
  • Estruturar a experiência em módulos (Game, Interface, Lights, Debug)

Resultados do projeto

  • Prática de física 3D no browser com Rapier
  • Loop de jogo completo (start → finish → restart)
  • Base reutilizável para outros protótipos R3F + física