Tiny Online Tools
Quatro formas de colocar um modelo numa página, todas completas
Incorporar um modelo 3D é uma daquelas tarefas em que o código de exemplo está sempre quase certo. O trecho de código da documentação esquece o tratador de redimensionamento. O artigo do blog esquece o controls.update(), e por isso o amortecimento simplesmente não faz nada. O exemplo em React pula o limite de Suspense e quebra na primeira renderização. Este gerador emite a coisa inteira, já com as configurações que você realmente escolheu.
<model-viewer>
O componente web do Google é o caminho mais curto entre o nada e um visualizador funcionando: uma tag <script type="module"> e um elemento personalizado. Ele cuida sozinho dos controles de câmera, da rotação automática, da RA tanto no Android quanto no iOS, da iluminação baseada em imagem e de uma imagem de pôster. Se você quer um modelo numa página de marketing ainda hoje à tarde, use este.
A tag gerada inclui touch-action="pan-y", fácil de esquecer e que faz toda a diferença entre um visualizador que parece nativo no celular e outro que briga com a rolagem da página.
Three.js
Para uma cena que você controla. O trecho de código importa de three/addons/* — um subpath export de verdade do pacote do three, então funciona com qualquer bundler —, configura o renderizador com tone mapping ACES e a sua exposição, monta um ambiente de estúdio neutro através de PMREMGenerator e RoomEnvironment, adiciona OrbitControls com amortecimento, carrega o modelo com GLTFLoader, trata o redimensionamento e roda sobre renderer.setAnimationLoop() em vez de um requestAnimationFrame puro, de modo que o mesmo laço continue funcionando se a página entrar em WebXR mais tarde.
React Three Fiber
A versão React: @react-three/fiber para o canvas, @react-three/drei para useGLTF, OrbitControls, Environment e ContactShadows. O useGLTF.preload() é chamado fora do componente para que o download comece antes de o React renderizar, e o modelo fica dentro de um limite de Suspense com um fallback de progresso real alimentado por useProgress.
Página HTML independente
Um index.html completo: doctype, meta viewport, estilos, script de CDN e visualizador. Salve, envie para qualquer hospedagem estática e pronto. Não é a mesma coisa que o primeiro trecho de código: aquele é um fragmento para uma página existente, este é um arquivo inteiro.
Distância da câmera
Adivinhar a distância da câmera é a parte mais chata de incorporar um modelo, porque depende da escala real dele. Carregue o arquivo localmente e a ferramenta mede a esfera delimitadora e calcula a distância em que o modelo preenche um frustum de 45° com uma pequena margem. O arquivo nunca é enviado e nunca aparece no código gerado — só o número aparece.