https://github.com/fairygui/fairygui-threejs
A GUI Editor & framework for Three.js
https://github.com/fairygui/fairygui-threejs
fairygui gui-editor three-js threejs threejs-example
Last synced: 19 days ago
JSON representation
A GUI Editor & framework for Three.js
- Host: GitHub
- URL: https://github.com/fairygui/fairygui-threejs
- Owner: fairygui
- License: mit
- Created: 2020-06-08T03:21:57.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-03-15T06:34:16.000Z (about 1 year ago)
- Last Synced: 2025-04-05T10:07:04.519Z (19 days ago)
- Topics: fairygui, gui-editor, three-js, threejs, threejs-example
- Language: TypeScript
- Homepage: https://www.fairygui.com
- Size: 9.21 MB
- Stars: 262
- Watchers: 9
- Forks: 43
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# FairyGUI-three
#### A GUI Editor&framework for Three.js ####
Official website: [www.fairygui.com](https://www.fairygui.com)
### Usage ###
Step 1, we use the editor to create the UI.
Step 2, we only need a little code to display it.
```javascript
import * as fgui from "fairygui-three";
var renderer;
var scene;
var view;
init();
animate();
function init() {
//THREE initialization code here
fgui.Stage.init(renderer, { screenMode:'horizontal' }); //screenMode is optional if you dont want to rotate the screen
fgui.Stage.scene = scene;
fgui.UIPackage.loadPackage('path/to/UI').then(()=> {
view = fgui.UIPackage.CreateObject('Basics', 'Main');
view.makeFullScreen();
fgui.GRoot.inst.addChild(view);
});
}
function animate() {
requestAnimationFrame( animate );
fgui.Stage.update();
renderer.render(scene, fgui.Stage.camera);
}
```
You should see [this](https://fairygui.com/threejs-demo/main/)
In the example above, an UI is created and displayed by an orthographic camera (fgui.Stage.camera) . It's easy to display UI by an specific perspective camera.
```javascript
import * as fgui from "fairygui-three";
var renderer;
var scene;
var camera;
var view;
init();
animate();
function init() {
//THREE initialization code here
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
fgui.Stage.init(renderer);
fgui.Stage.scene = scene;
fgui.UIPackage.loadPackage('path/to/UI').then(()=> {
view = fgui.UIPackage.CreateObject('3DInventory', 'Main');
view.displayObject.camera = camera;
view.displayObject.setLayer(0);
let container = new Group();
container.scale.set(0.5, 0.5, 0.5);
container.add(view.obj3D);
scene.add(container);
});
}
function animate() {
requestAnimationFrame( animate );
fgui.Stage.update();
renderer.render(scene, camera);
}
```
You should see [this](https://fairygui.com/threejs-demo/3d/)
If a perspective camera is using for all UI,
```javascript
Stage.init(renderer, { defaultLayer:0 });
Stage.camera = yourCamera;
```
# License
MIT