https://github.com/spite/threejseditorextension

Three.js Editor Extension for Google Chrome
https://github.com/spite/threejseditorextension

Last synced: about 1 year ago
JSON representation

Three.js Editor Extension for Google Chrome

• Host: GitHub
• URL: https://github.com/spite/threejseditorextension
• Owner: spite
• License: mit
• Created: 2015-07-15T15:12:37.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2015-07-24T19:05:57.000Z (almost 11 years ago)
• Last Synced: 2025-03-27T23:23:48.541Z (over 1 year ago)
• Language: JavaScript
• Size: 11.7 MB
• Stars: 184
• Watchers: 16
• Forks: 29
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Three.js Editor Extension for Google Chrome

A Chrome DevTools extension to manage any three.js project.

[Install the extension from the Chrome Store](https://chrome.google.com/webstore/detail/threejs-editor-extension/fbgbekpggeldiacgjkacbkkcbjhmakea/)

[![npm](/about/ChromeWebStore_Badge_v2_496x150.png)](https://chrome.google.com/webstore/detail/threejs-editor-extension/fbgbekpggeldiacgjkacbkkcbjhmakea/)

![Demo](/about/demo.gif)

Twin project of [WebGL GLSL Shader Editor Extension for Google Chrome](https://github.com/spite/ShaderEditorExtension)

### How to install ###

While in beta, you can load the extension from disk directly:

- Checkout the repo

- Open Chrome's Extensions page (``Settings / More tools / Extensions``)

- Enable ``Developer Mode``

- Click on ``Load unpacked extension`...

- Select the folder /src in the checked out project

Alternatively, you can pack the extension yourself and load by dropping the .crx file in the Extensions page.

### How to use ###

- Browse to a page with three.js content (you can find many here http://threejs.org/ or here https://www.chromeexperiments.com/webgl)

- Open DevTools

- Select the ``Three.js Editor`` tab

- The extension needs to instrument ``THREE``, so the inspected tab has to be reloaded with the script injected. Hit the ``Reload`` button

- If you are developing the page, make sure ``THREE`` is global

- The extension will begin to track Scene and other objects allocations

- Select an object to see its properties and change them

#### License ####

MIT licensed

Copyright (C) 2015 Jaume Sanchez Elias, http://www.clicktorelease.com