• Index
• Search by APIs
• Search by Words
• Project Search

• Java
• Python
• JavaScript
• TypeScript
• C++
• Scala
• Blog

Project: FairyGUI-threejs (GitHub Link)

• FairyGUI-threejs-master
  • src
    • FairyGUI.ts
    • utils
      • ToolSet.ts
      • xml
        • XMLIterator.ts
        • XML.ts
        • XMLUtils.ts
      • UBBParser.ts
      • ByteBuffer.ts
      • html
        • HtmlLink.ts
        • HtmlParser.ts
        • IHtmlObject.ts
        • HtmlParseOptions.ts
        • HtmlElement.ts
        • HtmlPageContext.ts
        • IHtmlPageContext.ts
        • HtmlImage.ts
      • Color.ts
      • Timers.ts
      • Rect.ts
      • Pool.ts
      • ColorMatrix.ts
    • ui
      • GProgressBar.ts
      • GTextField.ts
      • GRoot.ts
      • DragDropManager.ts
      • GMovieClip.ts
      • UIPackage.ts
      • GRichTextField.ts
      • GList.ts
      • GComboBox.ts
      • ScrollPane.ts
      • GLoader.ts
      • GImage.ts
      • FieldTypes.ts
      • UIContentScaler.ts
      • RelationItem.ts
      • GLabel.ts
      • UIConfig.ts
      • GObject.ts
      • GTree.ts
      • GScrollBar.ts
      • GObjectPool.ts
      • GComponent.ts
      • Transition.ts
      • Window.ts
      • Margin.ts
      • UIObjectFactory.ts
      • Relations.ts
      • PackageItem.ts
      • GTreeNode.ts
      • PopupMenu.ts
      • AsyncOperation.ts
      • GLoader3D.ts
      • GSlider.ts
      • GTextInput.ts
      • TranslationHelper.ts
      • GGraph.ts
      • GButton.ts
      • Controller.ts
      • GGroup.ts
    • tween
      • EaseManager.ts
      • GTweener.ts
      • GPath.ts
      • TweenValue.ts
      • GPathPoint.ts
      • TweenManager.ts
      • GTween.ts
      • EaseType.ts
    • event
      • EventDispatcher.ts
      • Event.ts
    • action
      • ChangePageAction.ts
      • PlayTransitionAction.ts
      • ControllerAction.ts
    • core
      • Image.ts
      • mesh
        • PolygonMesh.ts
        • MeshFactory.ts
        • EllipseMesh.ts
        • RectMesh.ts
        • VertexBuffer.ts
        • FillMesh.ts
        • RegularPolygonMesh.ts
        • RoundedRectMesh.ts
        • CompositeMesh.ts
      • MovieClip.ts
      • Shape.ts
      • Stage.ts
      • NGraphics.ts
      • DisplayObject.ts
      • text
        • BaseFont.ts
        • SelectionShape.ts
        • TextFormat.ts
        • DynamicFont.ts
        • RichTextField.ts
        • TextField.ts
        • BitmapFont.ts
        • FontManager.ts
        • InputTextField.ts
      • hittest
        • IHitTest.ts
        • PixelHitTest.ts
        • ShapeHitTest.ts
      • NTexture.ts
      • NMaterial.ts
    • gears
      • GearLook.ts
      • GearXY.ts
      • GearAnimation.ts
      • GearIcon.ts
      • GearColor.ts
      • GearDisplay.ts
      • GearBase.ts
      • GearDisplay2.ts
      • GearFontSize.ts
      • GearText.ts
      • GearSize.ts
  • LICENSE
  • test
    • src
      • index.ts
    • .npmignore
    • template.html
    • webpack.config.js
    • UIProject
      • .npmignore
      • FairyGUI-threejs-test.fairy
      • settings
        • Publish.json
      • assets
        • Package1
          • package.xml
          • Main.xml
    • tsconfig.json
    • assets
      • UI
        • Package1.fui
  • migrationRules.js
  • README.md
  • package.json
  • tsconfig.json
  • .gitignore
  • gulpfile.js
  • .vscode
    • settings.json
    • tasks.json

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