Wondering what’s next for npm?Check out our public roadmap! »

    fairygui-three
    TypeScript icon, indicating that this package has built-in type declarations

    0.6.0 • Public • Published

    FairyGUI-three

    A GUI Editor&framework for Three.js

    Official website: 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.

    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;

    License

    MIT

    Install

    npm i fairygui-three

    DownloadsWeekly Downloads

    5

    Version

    0.6.0

    License

    MIT

    Unpacked Size

    2.92 MB

    Total Files

    249

    Last publish

    Collaborators

    • avatar