fairygui/fairygui-threejs

A GUI Editor & framework for Three.js

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

fairygui-threejs's Issues

修复文本显示BUG和Three升级后的接口差异

1、更改Three版本更新的接口调整；DisplayObject -> inverse->invert
2、新增输入文本键盘按下的事件；InputTextField -> createElement -> onkeydown
3、修复BUG：绘制大量文本时清除canvas方法不对，会造成重影；DynamicFont -> clearTexture

Errors with Three 124

Its great to see this in Three.js! Have an issue using in Typescript with latest Three.js @ three@^0.124.0

 Stage.init(renderer)
    Stage.scene = r.scene

Argument of type 'WebGLRenderer' is not assignable to parameter of type 'Renderer'.
  Types of property 'render' are incompatible.
    Type '(scene: Object3D, camera: Camera) => void' is not assignable to type '(scene: Scene, camera: Camera) => void'.
      Types of parameters 'scene' and 'scene' are incompatible.
        Type 'Scene' is missing the following properties from type 'Object3D': animations, clear
Property 'dispose' is missing in type 'THREE.Scene' but required in type 

If I revert back to 116.1 it appears to be ok, but could you update to latest?

DisplayObject.ts里的set pivoY函数问题

public set pivotY(value: number) {
this.setPosition(this._pivot.x, value);
}
是不是写错了

Requesting More Flexibility to the scaleWithScreenSize Method

Hello, the project I am currently working on leverages a flexible canvas element size. Essentially, the screen scales to the browser's window following the default ratio set from 1280px by 720px. The scaleWithScreenSize API appears to retrieve the screen size based on the Stage dimensions. This may work fine with static screen sizes, but hoping for a solution for screen sizes that can change dynamically.

富文本显示图片

在2D模式下 富文本能显示包体自带的图片，外部链接图片显示不了，在3D模式下富文本不能显示图片 ，这是什么原因

Vite fail

Hi, I use Vite as my build tool, which is what three.js doc recommended. When running "npx vite" with fairygui, I get an error

caught TypeError: Cannot read properties of undefined (reading 'Vector3')
    at Stage.js:105:19
    at fairygui.js:4:31
    at fairygui.js:5:2
(anonymous) @ Stage.js:105
(ano

I tried vite with your other example https://github.com/fairygui/FairyGUI-threejs-example, it has more errors

Unable to parse HTML; parse5 error code invalid-first-character-of-tag-name
 at F:/Dev/Cas/External/FairyGUI-threejs-example/index.html:8:7
6  |      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
7  |      <meta name="keywords" content="" />
8  |       <% for (var css in htmlWebpackPlugin.files.css) { %>
   |               ^
9  |      <link href="<%=htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
10 |      <% } %>

It seems that vite does not support non strict mode

https://vitejs.dev/guide/troubleshooting.html#syntax-error-type-error-happens

How can I get it to run with vite?

three 150版本里各种报错，请修复更新一下

three 150版本里各种报错，请修复更新一下

无法进入webxr模式

加入fgui后VR按钮无法点击了，不知道哪里出了问题。

migrationRules.js is hard coded and not picking up different three versions

Hello the migrationRules.js files is hard coded for versions 116 and 134. I recommend deprecating three.js versions earlier than 0.134.0 and changing the code base to use .invert() and .copy($1).invert() where .inverse() and .getInverse() is being used.

请问下打包相关

npm run serve后,可以调试项目.
npm run build命令正常运行后,需要将什么文件,build和dist移动到本地服务器吗?在哪里查看访问链接配置.

fairygui-threejs 中要唤起手机相册有实现方法吗

一般在js 和html中实现唤起手机相机直接用html的 input标签，type="file" accept="image/*" 即可
但目前fairygui 官网写 富文本支持 html，
仅支持 INPUT 支持显示以下语法：
//显示一个按钮

//显示一个输入框

是不支持
吗

https://www.fairygui.com/docs/editor/richtext

单独写一个 html覆盖 fairygui-three的canvas，无法唤起相机，应该是click事件还没传到input标签就被捕获了

请问一下，three vr模式下，这个ui还有效么？

请问一下，three vr模式下，这个ui还有效么？