aframe-inspector - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #llm #golang #android #machine-learning #linux #macos #awesome #cli #vue #awesome-list #mcp #openai

aframe-inspector

(★ 689)

:mag: Visual inspector tool for A-Frame. Hit *<ctrl> + <alt> + i* on any A-Frame scene.

File Explorer

Download Latest Version (.zip)

- - ci.yml
- pre-commit
- gltf.svg
- aframe-inspector.js
- aframe-inspector.js.map
- aframe-inspector.min.js
- aframe-inspector.min.js.LICENSE.txt
- aframe-inspector.min.js.map
- 360video.html
- colors.html
- controllers.html
- embedded-zoom.html
- embedded.html
- empty.html
- index.html
- supercraft.html
- - AwesomeIcon.js
  - Collapsible.js
  - CopyToClipboardButton.js
  - EntityRepresentation.js
  - Main.js
- - assetsLoader.js
  - assetsUtils.js
  - cameras.js
  - config.js
  - EditorControls.js
  - entity.js
  - Events.js
  - history.js
  - raycaster.js
  - shortcuts.js
  - utils.js
  - viewport.js
- - components.styl
  - entity.styl
  - help.styl
  - index.styl
  - lib.styl
  - scenegraph.styl
  - select.styl
  - textureModal.styl
  - themes.css
  - viewport.styl
  - widgets.styl
- index.js
.babelrc
.editorconfig
.gitignore
.prettierignore
.prettierrc.json
eslint.config.mjs
index.html
LICENSE
package-lock.json
package.json
README.md
stylelint.config.js
webpack.config.js

# Installation Guide

1. Get the code

git clone https://github.com/aframevr/aframe-inspector

Downloads the entire project code from GitHub to your computer.

cd aframe-inspector

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# A-Frame Inspector

A visual inspector tool for [A-Frame](https://aframe.io) scenes. Just hit
`<ctrl> + <alt> + i` on any A-Frame scene to open up the Inspector.

- [Documentation / Guide](https://aframe.io/docs/master/introduction/visual-inspector-and-dev-tools.html)
- [Example](https://aframe.io/aframe-inspector/examples/)

Also check out:

- [A-Frame Watcher](https://github.com/supermedium/aframe-watcher) - Companion server to sync changes to HTML files.

![Inspector Preview](https://user-images.githubusercontent.com/674727/50159991-fa540c80-028c-11e9-87f1-72c54e08d808.png)

## Using the Inspector

### Keyboard Shortcut

A-Frame comes with a **keyboard shortcut** to inject the inspector. Just open
up any A-Frame scene (running at least A-Frame v0.3.0) and press **`<ctrl> +
<alt> + i`** to inject the inspector, just like you would use a DOM inspector:

### Specifying Inspector Build

This is done with the `inspector` component. By default, this is set on the
scene already. If we want, we can specify a specific build of the Inspector to
inject by passing a URL. For debugging:

```html
<a-scene inspector="url: http://localhost:3333/dist/aframe-inspector.js">
  
</a-scene>
```

To use the master branch of the Inspector:

```html
<a-scene inspector="url: https://cdn.jsdelivr.net/gh/aframevr/aframe-inspector@master/dist/aframe-inspector.min.js">
</a-scene>
```

## Local Development

```bash
git clone git@github.com:aframevr/aframe-inspector.git
cd aframe-inspector
npm install
npm start
```

Then navigate to __[http://localhost:3333/examples/](http://localhost:3333/examples/)__

## Self-hosting the sample-assets directory

The textures modal is using https://aframe.io/sample-assets/dist/images.json
to get the available textures.
The GitHub repository for those assets is https://github.com/aframevr/sample-assets

If you want to self-host this directory, do the following:

```bash
cd examples
git clone git@github.com:aframevr/sample-assets.git
```

edit `index.html` and define before any script tag this global variable:

```html
<script>window.AFRAME_SAMPLE_ASSETS_ROOT = "./sample-assets/";</script>
```

## Config overrides

Since A-Frame 1.7.0, the inspector perspective camera position is kept in sync with the A-Frame
active camera. This means you can move around the scene, toggle the inspector and you will be at the same position.
If you want to disable that behavior, you can do that by defining a global variable like this:

```html
<script>
  window.AFRAME_INSPECTOR_CONFIG = { copyCameraPosition: false };
</script>
```
## Customizing the A-Frame Watcher save endpoint

If you run the A-Frame Watcher from a different host or port, you can set `AFRAME_INSPECTOR_CONFIG` to specify a custom endpoint like this:

```html
<script>
  window.AFRAME_INSPECTOR_CONFIG = {saveEndpoint: "http://my-custom-host.org:1234/save"};
</script>