Flutter Scene for VS Code

English | Português

Full support for .fscene and .fsceneb files from the flutter_scene package: syntax highlighting, autocomplete, an interactive 3D preview, and a wizard to add objects to your scene without hand-editing JSON.

English

Features

✏️ .fscene editing

.fscene files are recognized as JSON with full support:

• Syntax highlighting, formatting, and code folding.
• Real-time autocomplete and validation via JSON Schema (property names, node types, lights, etc.).
• Schema errors show up right in the editor, before you even run the app.

🧙 Add objects with a wizard

Flutter Scene: Add Object... command — opens a guided step-by-step flow to insert:

• Lights (directional, point, or spot, with configurable intensity)
• Cameras
• Empty nodes
• Meshes

No need to memorize the JSON structure.

🧊 3D preview

Two ways to view your scene without leaving VS Code:

• Flutter Scene: Open Preview to the Side — opens a 3D preview next to the .fscene file you're editing.

• Opening a .fsceneb file (binary, generated at build time) automatically opens a custom editor with a real 3D preview via Three.js: geometry and albedo texture decoded directly from the file, a node outline/tree, metadata, and a binary chunk table. Includes a transform panel (position/rotation/scale) for visual inspection only — the extension does not edit .fsceneb, since it's always regenerated at build time from the original .fscene/.glb.

How to use

1. Install the extension and open a Flutter project that uses flutter_scene.
2. Open a .fscene file — it's recognized automatically.
3. Use the preview icon (top-right of the editor) or the Flutter Scene: Open Preview to the Side command to view the scene in 3D.
4. Use the Flutter Scene: Add Object... command (same icon area) to add lights, cameras, empty nodes, or meshes through a step-by-step wizard.
5. Open a build-generated .fsceneb to inspect the final compiled result.

Commands are also available from the command palette (Cmd/Ctrl+Shift+P) while a .fscene file is open.

Requirements

• No external dependencies — the extension works standalone, no Flutter/Dart SDK required to edit or preview scenes.

About the format

• .fscene — authoring file in JSON, manually edited during development.
• .fsceneb — binary file automatically generated by the flutter_scene build from the .fscene/.glb. Not meant to be hand-edited; the extension only inspects it.

Português

Funcionalidades

✏️ Edição de .fscene

Arquivos .fscene são reconhecidos como JSON com suporte completo:

• Syntax highlighting, formatação e dobra de código.
• Autocomplete e validação em tempo real via JSON Schema (nomes de propriedades, tipos de nó, luzes, etc.).
• Erros de schema aparecem direto no editor, antes mesmo de rodar o app.

🧙 Adicionar objetos com um assistente

Comando Flutter Scene: Add Object... — abre uma sequência de passos guiados para inserir:

• Luzes (direcional, ponto ou spot, com intensidade configurável)
• Câmeras
• Nós vazios (empty)
• Meshes

Sem precisar decorar a estrutura do JSON.

🧊 Preview 3D

Duas formas de visualizar sua cena sem sair do VS Code:

• Flutter Scene: Open Preview to the Side — abre um preview 3D ao lado do .fscene que você está editando.

• Ao abrir um arquivo .fsceneb (binário, gerado no build), a extensão abre automaticamente um editor customizado com preview 3D real via Three.js: geometria e textura de albedo decodificadas diretamente do arquivo, árvore/outline dos nós, metadados e tabela de chunks binários. Inclui um painel de transform (posição/rotação/escala) apenas para inspeção visual — o .fsceneb não é editado pela extensão, já que ele é sempre regerado no build a partir do .fscene/.glb original.

Como usar

1. Instale a extensão e abra um projeto Flutter que use flutter_scene.
2. Abra um arquivo .fscene — o editor já reconhece o formato automaticamente.
3. Use o ícone de preview (canto superior direito do editor) ou o comando Flutter Scene: Open Preview to the Side para visualizar a cena em 3D.
4. Use o comando Flutter Scene: Add Object... (mesmo ícone) para adicionar luzes, câmeras, nós vazios ou meshes com um assistente passo a passo.
5. Abra um .fsceneb gerado pelo build para inspecionar o resultado final compilado.

Os comandos também estão disponíveis pela paleta de comandos (Cmd/Ctrl+Shift+P) enquanto um .fscene estiver aberto.

Requisitos

• Nenhuma dependência externa — a extensão funciona standalone, sem precisar do Flutter/Dart SDK instalado para editar ou visualizar as cenas.

Sobre o formato

• .fscene — arquivo autoral em JSON, editado manualmente durante o desenvolvimento.
• .fsceneb — arquivo binário gerado automaticamente pelo build do flutter_scene a partir do .fscene/.glb. Não deve ser editado à mão; a extensão apenas o inspeciona.