- Threlte é um framework open source que coloca o modelo de componentes reativos do Svelte sobre o Three.js para criar rapidamente apps 3D interativos para a web
- Com componentes declarativos como
<T.Mesh>, ele compõe objetos do Three.js e usa o ciclo de vida do Svelte para lidar com assinatura de eventos e mudanças de estado - Como ferramentas padrão, oferece junto o motor de física Rapier, a ferramenta de animação Theatre.js,
@threlte/gltfe@threlte/extras, reduzindo a configuração inicial de apps 3D - Comportamentos que não podem ser cobertos apenas pelos componentes
<T>podem ser estendidos com Plugins type-safe, adicionando props e eventos personalizados - No ecossistema Svelte, ele é avaliado como uma opção forte em documentação e usabilidade para desenvolvedores que buscam uma biblioteca declarativa de THREE e ferramentas para criar apps WebGL
Montando cenas do Three.js no estilo Svelte
- Threlte é um framework 3D para web criado sobre Svelte e Three.js
- O foco é construir rapidamente apps 3D interativos com componentes declarativos e reativos
- Aproveitando o ciclo de vida dos componentes Svelte, é possível lidar com as seguintes tarefas
- assinatura de eventos
- processamento de mudanças de estado
- conexão de comportamentos baseados em componentes
- O código de exemplo posiciona geometria e material dentro de
<T.Mesh>e define diretamente props e eventos comoscale,position.xeonclick - A primeira configuração de cena pode ser vista em Make Your First Scene
Ferramentas incluídas e forma de extensão
- Threlte adota uma abordagem “batteries included” e fornece junto as ferramentas necessárias para criar apps 3D
- Rapier: motor de física
- Theatre.js: biblioteca de animação com um conjunto profissional de ferramentas de motion design
@threlte/gltf: ferramenta que converte arquivos GLTF em componentes Threlte@threlte/extras: coleção de componentes e utilitários necessários para começar
- O exemplo com Rapier combina
RigidBody,AutoColliderse<T.Mesh>para configurar um colisor esférico e a malha - O exemplo de
@threlte/extrasusa os componentesFloateGLTFpara carregar o modelo/models/flower.glbe definir sombra, posição e escala - O uso de
@threlte/extraspode ser visto na Documentation - Plugins são a forma de extensão que adiciona props e eventos personalizados ao
<T>com segurança de tipos- O plugin de exemplo registra a prop
lookAtcominjectPlugine chamaargs.ref.lookAt(args.props.lookAt)dentro de$effect - O uso avançado está organizado na documentação de Plugins
- O plugin de exemplo registra a prop
- Também são fornecidos documentos iniciais e links da comunidade
1 comentários
Opiniões no Hacker News
Basicamente estamos fazendo duas coisas. Uma é o suporte ao Svelte 5; como o Threlte mexeu bastante nos componentes internamente para tornar o tratamento de eventos mais eficiente ou para aplicar transições do Svelte a componentes, não a elementos do DOM, dá um pouco mais de trabalho do que em uma biblioteca Svelte comum. Boa parte disso foi incorporada ao Svelte 5, e o restante, como as transições, teremos que deixar de lado por enquanto
A outra é o Threlte Studio. Ainda não sei bem qual é a melhor forma de descrevê-lo, mas dá para dizer que é um editor que permite modificar o código visualmente. Ele é extensível, então pode ser adaptado ao seu fluxo de trabalho, e estou curioso para ver até onde isso pode ir. Se tiver interesse, acompanhe pelo Discord http://chat.threlte.xyz ou pelo X https://twitter.com/threlte
O Svelte é tão intuitivo que naturalmente pensei que também daria para gerenciar um ambiente 3D de forma eficiente, e por isso acabei pesquisando “Svelte + three.js”
Como alguém que tem usado PlayCanvas e Babylon.js, estou muito animado com o desenvolvimento do Threlte Studio. Gosto do DREI por expor tudo como se fosse um diretório, mas isso me fez pensar em “ferramentas de estúdio” familiares. Gostaria de saber qual é a previsão para o Threlte Studio
Um de que gosto especialmente é o exemplo da galeria de imagens. Fiz uma modificação para que, ao clicar em uma imagem, você entre em outra sala, ou seja, em outra galeria
https://github.com/pmndrs/drei é uma coleção de exemplos e helpers
O que mais me impressionou foi um exemplo que usa modelos GLTF, textura de vídeo sobre texto, reflexos etc.; a versão independente está em https://bfplr.csb.app/
Ainda mais impressionante é o sandbox que mostra que não há tanto código assim: https://codesandbox.io/p/sandbox/ground-reflections-and-vide...
Colocar uma camada por cima do three.js exige muito trabalho e também me deu boas dores de cabeça, mas o potencial é grande. Usar three.js mudou completamente a forma como vejo o desenvolvimento de sites, e, se você usa Svelte, definitivamente vale a pena dar uma olhada
O Technical Outline, especialmente a explicação simplificada da física de carros, é bem instrutivo. Essencialmente, é um clone de Trackmania com até um editor de pistas, e parece ser um exemplo que aproveita ao máximo os pontos fortes de Svelte/Threlte
Fico me perguntando se as pessoas realmente querem 3D declarativo. X3D/VRML existe há mais de 25 anos e A-Frame há 8 anos, mas nenhum dos dois se tornou muito popular; vários outros formatos também surgiram e desapareceram. Por outro lado, three.js e 3D imperativo/procedural em geral vão bem, e fico curioso sobre o porquê
Não está superotimizado, e todos os modelos são modelos gratuitos do Sketchfab. Como é um ambiente de jogo 3D, ajuda ter um PC moderno
Acho que muitas UIs poderiam se beneficiar do uso de 3D