Official website: www.fairygui.com
Step 1, we use the editor to create the UI.
Step 2, we only need a little code to display it.
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
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.
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
If a perspective camera is using for all UI,
Stage.init(renderer, { defaultLayer:0 }); Stage.camera = yourCamera;MIT