GLTF/GLB Viewer for VS Code

A Visual Studio Code extension that provides a built-in viewer for GLTF or GLB files. This extension allows you to preview and interact with 3D models directly within VS Code.

Preview

⚠️ IMPORTANT: ⚠️

From version 3.0.0 with the launch of the web version all core files are now in a separate repository: https://github.com/ohzinteractive/glb-viewer-core. This repository is now only a wrapper for the core files with some VS Code specific code.

Extension Usage

Click on any .gltf .glb file in VS Code's explorer window
The file will be opened automatically in a new tab using the GLTF/GLB Viewer
- If that doesn't happen, you can right click manually on the file and choose 'open with:' GLTF/GLB Viewer
- From the "open with" menu, you can also configure the default viewer to be this one
Interact with the 3D model using your mouse:
- Left click and drag to rotate
- Right click and drag to pan
- Scroll to zoom

Features

Inspect GLTF/GLB files directly in VS Code in a 3D viewer
Automatic file association with .gltf .glb files
Interactive 3D model viewing
DRACO compression support
KTX2 support (GPU Texture Compression)
Hierarchy, Animations, Textures, Materials, Geometries and Info panels
Play and stop individual animations
Visualize textures, their resolution, and their relationship and usage with the materials
Download textures
Get a quick general understanding of the number of geometries, vertices, materials, textures, animations, etc.
Camera auto focus focus on any object when clicked
Copy to properties to clipboard with a single click
Extra tools to visualize information like normals, object origins, and more.
Quick search through the hierarchy tree

Installation

Open VS Code
Go to the Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
Search for "GLTF/GLB Viewer"
Click Install

📜 Changelog

See CHANGELOG.md for details about each release.

Requirements

Visual Studio Code version 1.80.0 or higher

Development

Prerequisites

Node.js
Yarn package manager

Setup

Clone the repository:

git clone [email protected]:ohzinteractive/glb-viewer-vscode.git

Install dependencies:
```
yarn install
```
Start development mode: Inside vscode with the folder open, press F5 to start the extension. This will open a new window with the extension running. Under the hood, it will run the yarn start command. That builds and watches for changes in the src/ folder.

Build

To build the extension:

yarn build

Packaging

To package the extension into a VSIX file for distribution:

Install the VSCE (Visual Studio Code Extensions) tool globally:
```
npm install -g @vscode/vsce
```
Make sure your extension is built:
```
yarn build
```
Package the extension:
```
vsce package
```

This will create a .vsix file in your project directory. You can then:

Install it locally by running code --install-extension ohzi-glb-viewer-vscode-2.13.0.vsix
Upload it to the VS Code Marketplace for public distribution
Share it directly with other users for manual installation

Note: If you plan to publish to the VS Code Marketplace, you'll need to:

Create a publisher account on the Visual Studio Marketplace
Get a Personal Access Token (PAT)
Login using vsce login <publisher-name>
Publish using vsce publish

Project Structure

glb-viewer-core/ - Core files (submodule)
public/webview/ - Built files
extension.js - Main extension entry point
vite.config.mjs - Vite configuration for building the webview
package.json - Package configuration

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

glb-viewer-vscode

README