https://github.com/severidade/toys

A aplicação carrega e exibe um modelo 3D no formato GLB, com controles de câmera interativos e iluminação, criando uma experiência visual imersiva.
https://github.com/severidade/toys

3dgraphics frontend javascript react threejs vite

Last synced: 2 months ago
JSON representation

A aplicação carrega e exibe um modelo 3D no formato GLB, com controles de câmera interativos e iluminação, criando uma experiência visual imersiva.

• Host: GitHub
• URL: https://github.com/severidade/toys
• Owner: severidade
• Created: 2025-03-13T12:49:51.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-03-31T18:49:41.000Z (about 1 year ago)
• Last Synced: 2025-03-31T19:35:50.551Z (about 1 year ago)
• Topics: 3dgraphics, frontend, javascript, react, threejs, vite
• Language: CSS
• Homepage: https://3d.severidade.com.br/
• Size: 7.98 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
![Prévia da página - Preview of the page](./public/avatar_01.png) 

Renderização de Objeto 3D no Navegador usando Three.js e React

## Visão Geral

Este projeto utiliza React, Three.js e @react-three/fiber para renderizar um modelo 3D interativo diretamente no navegador.

## Funcionalidades

* Carregamento e exibição de um modelo 3D no formato GLB

* Controle de câmera interativo com OrbitControls

* Iluminação ambiental e direcional

* Indicador de carregamento durante a renderização do modelo

## Modelo 3D

O modelo 3D utilizado nesta aplicação foi gerado utilizando a ferramenta [tripo3d.ai](https://www.tripo3d.ai/).

## Tecnologias

* **Vite**: Ferramenta de build rápida para projetos frontend.

* **React**: Biblioteca para criação de interfaces de usuário.

* **Three.js / React Three Fiber**: Framework para renderização de gráficos 3D no navegador.

* **Drei**: Conjunto de utilitários para facilitar o uso do React Three Fiber.

* **ESLint**: Ferramenta para padronização de código.

## Configuração do Vite para Arquivos ```.glb```

Para que o Vite reconheça arquivos ```.glb```, é necessário adicionar a seguinte configuração ao arquivo ```vite.config.js```:

```js

import { defineConfig } from 'vite';

export default defineConfig({

  assetsInclude: ['**/*.glb'],

});

```

Isso permite que o Vite trate arquivos .glb corretamente no processo de build.