- Um site de portfólio 3D criado pelo desenvolvedor web Bruno Simon, que oferece um ambiente interativo no qual o usuário explora dirigindo um carro
- Construído com base em Three.js, implementa renderização 3D em tempo real usando tanto WebGL quanto WebGPU
- O site inclui elementos de jogo como sistema de conquistas, elementos secretos e a função de mensagens de visitantes (Whisper)
- Todo o código e os arquivos do Blender estão disponíveis no GitHub sob licença MIT, e a música pode ser usada livremente sob licença CC0
- Como um exemplo que combina tecnologia web e interação criativa, é um portfólio representativo que mostra as possibilidades das experiências web em 3D
Visão geral do portfólio 3D de Bruno Simon
- Um portfólio interativo em que é possível explorar um mundo 3D na web e experimentar os projetos e experimentos do criador
- O usuário pode controlar um carro, circular por um espaço virtual e interagir com vários objetos
- A frase “Don’t break anything!” cria um clima de exploração leve e divertido
- Suporta tanto controles de teclado como WASD, setas, espaço e enter quanto entrada por toque e gamepad
- Oferece várias ações, como movimento, salto, freio, booster, buzina e suspensão
Elementos de jogo e sistema de conquistas
- O site tem 38 conquistas (Achievements), que podem ser obtidas por meio de ações específicas
- Ex.: “Traveler” (visitar todas as áreas), “Cookie Clicker” (aceitar 1000 cookies), “Flip of faith” (acertar um backflip) etc.
- Inclui condições variadas, como distância percorrida, experimentar o clima e destruir caixas explosivas
- O tempo de conquista e o progresso são exibidos em tempo real, e também existe um recurso de placar no servidor (Leaderboard)
- Porém, se o servidor estiver offline, não será possível salvar a pontuação
Whisper e recursos de comunidade
- Os visitantes podem deixar mensagens curtas por meio do recurso Whisper
- Máximo de 30 caracteres, com uma mensagem por usuário
- Quando uma nova mensagem é adicionada, as mais antigas são apagadas
- Palavrões são proibidos, e é possível escolher a bandeira do país
- Se o servidor do Whisper estiver offline, a função de mensagens fica desativada
Stack técnica e composição open source
- A renderização 3D é feita com Three.js
- Three.js é uma biblioteca criada por mr.doob, e graças ao TSL (Three.js Shading Language) adicionado por Sunag, oferece suporte tanto a WebGL quanto a WebGPU
- O motor de física é o Rapier, o áudio usa Howler.js, e as fontes são Amatic SC e Nunito
- Todo o código-fonte está disponível no GitHub (brunosimon/folio-2025) sob licença MIT
- Os arquivos do Blender também estão incluídos, permitindo modificação e estudo livremente
- O código do servidor não é público por motivos de segurança, mas o portfólio funciona mesmo sem servidor
Música e materiais adicionais
- A música de fundo foi criada especialmente para o portfólio por Kounine
- É distribuída sob licença CC0, podendo ser baixada e reutilizada livremente
- Está disponível no caminho
/static/sounds/musics dentro do repositório no GitHub
- Também há materiais de estudo de Three.js por meio do curso online Three.js Journey
- O curso cobre todo o processo de criação de experiências web 3D com Three.js
- O processo de desenvolvimento do portfólio foi registrado por meio de uma série de Devlogs no YouTube
- Mesmo após a conclusão, a produção do último vídeo continua em andamento
Significado geral
- O portfólio de Bruno Simon é um exemplo em que tecnologia web, interação de jogo e expressão artística se combinam
- Com open source e licenças livres, pode ser usado como um projeto web 3D reutilizável para estudo e experimentação
- Como exemplo real de implementação do ecossistema Three.js e de renderização baseada em WebGPU, mostra a direção dos gráficos web da próxima geração
4 comentários
Isso é só um jogo mesmo ..
O diretor de desenvolvimento que ignorou a opinião de usar
tjsno projeto principal da empresa e insistiu em usarbabylon.js... O diretor de desenvolvimento que, em vez de assumir a responsabilidade pela própria decisão, ainda tirou a empresa e a equipe do caminho e abriu uma nova empresa... Está vivendo bem, não é?Deixei aberto só por um momento enquanto testava... e meu MacBook M1 começou a decolar. Mas, ainda assim, é excelente.
Comentários no Hacker News
Depois de atualizar 1 ou 2 vezes, abre direitinho, e no geral é um trabalho incrível
Só queria poder dar mais zoom out. Meus parabéns ao Bruno
Há pequenos templos-objeto que simbolizam cada rede social, e se você bater neles com o carro eles tombam, mas os links continuam clicáveis
Também existe estado global, como um contador de “oferecer sacrifícios ao deus do caos” que aumenta quando você avança contra o portal
No geral, o estilo de arte é consistente e, depois de explorar por uns 5 minutos, pareceu bem caprichado
Ainda assim, em vez de “o site 3D mais legal”, como diz o título do HN, parece mais correto vê-lo como um site de portfólio muito bem feito
Eu fazia isso até com o jogo grátis Chex Quest que vinha em caixa de cereal
Mas agora eu dou uma olhada no site por uns 30 segundos, penso “legal” e já fecho
Provavelmente é por causa de (A) mudança no valor do tempo, (B) aumento do padrão de imersão em jogos, ou (C) porque já gastei tempo demais jogando
Houve inúmeros demos em three.js/babylon.js nos últimos 10 anos, e este está mais ou menos no nível dos 10% melhores
É divertido e tem boa qualidade, mas não traz nada novo e a eficiência na transmissão de informação é baixa
Em comparação com jogos indie 3D, ainda há bastante distância em termos de acabamento
Se a recomendação de um iniciante em threejs tiver algum valor, eu recomendo fortemente
Só que, ao dirigir com os dedos, o menu de pressionamento longo do iOS aparecia com frequência e quebrava a imersão
Dava para sentir o cuidado nos detalhes e a diversão, e eu brinquei com meu filho no minigame de corrida
Fiquei me perguntando como as pessoas que fizeram 20 segundos conseguiram isso. Será que existe algum boost de velocidade?
Acho que o verdadeiro valor da tecnologia está em “isso permite fazer algo que antes não era possível?”
Por exemplo, quando alguém da Idade da Pedra descobriu um machado de aço, o importante não era o machado em si, mas a metalurgia
Da mesma forma, mais importante que o bitcoin é a criptografia, e mais importante que threejs é o que se pode criar de novo com isso
Pessoalmente, sinto que dá para fazer muito mais com threejs, react-three-fiber, shaders etc.
O que eu considero “legal” é algo que faz você enxergar o mundo de outro jeito
Como exemplo, eu citaria este demo no CodePen
Eu esperava uma inovação na experiência de navegação que justificasse o uso de 3D, e foi aí que achei decepcionante