@xviewer.js/core 1.0.4-alpha.1 → 1.0.4-alpha.11

package/dist/main.cjs

@@ -8,7 +8,7 @@ var meshopt_decoder_module_js = require('three/examples/jsm/libs/meshopt_decoder
 var THREE = require('three');
 var RGBELoader_js = require('three/examples/jsm/loaders/RGBELoader.js');
 var SVGLoader_js = require('three/examples/jsm/loaders/SVGLoader.js');
-var KTX2Loader$1 = require('three/examples/jsm/loaders/KTX2Loader');
+var KTX2Loader_js = require('three/examples/jsm/loaders/KTX2Loader.js');
 var Addons_js = require('three/examples/jsm/Addons.js');
 
 function _interopNamespaceDefault(e) {
@@ -165,7 +165,6 @@ function getClassInstance(constructor, args = []) {
 
 class Loader {
     static _setUserData(node) {
-        const keys = Loader._texKeys;
         const meshes = [];
         const textures = {};
         const materials = {};
@@ -183,7 +182,7 @@ class Loader {
             queue.push(...object.children);
         }
         Object.values(materials).forEach((mat)=>{
-            keys.forEach((k)=>{
+            Loader._texKeys.forEach((k)=>{
                 let tex = mat[k];
                 if (tex) {
                     textures[tex.uuid] = tex;
@@ -244,13 +243,10 @@ class FBXLoader extends Loader {
         loader.manager = manager;
         loader.setPath(path);
         loader.setResourcePath(resourcePath);
-        const loadCallback = (node)=>{
-            onLoad(Loader._setUserData(node));
-        };
         if (buffer) {
-            loadCallback(loader.parse(buffer, resourcePath));
+            onLoad(loader.parse(buffer, resourcePath));
         } else {
-            loader.load(url, loadCallback, onProgress, onError);
+            loader.load(url, onLoad, onProgress, onError);
         }
     }
     constructor(...args){
@@ -277,15 +273,10 @@ class GLTFLoader extends Loader {
         loader.manager = manager;
         loader.setPath(path);
         loader.setResourcePath(resourcePath);
-        const loadCallback = (gltf)=>{
-            const node = gltf.scene;
-            node.animations.push(...gltf.animations);
-            onLoad(Loader._setUserData(node));
-        };
         if (buffer) {
-            loader.parse(buffer, resourcePath, loadCallback, onError);
+            loader.parse(buffer, resourcePath, onLoad, onError);
         } else {
-            loader.load(url, loadCallback, onProgress, onError);
+            loader.load(url, onLoad, onProgress, onError);
         }
     }
     constructor(...args){
@@ -379,15 +370,10 @@ class BINLoader extends Loader {
         loader.manager = manager;
         loader.setPath(path);
         loader.setResourcePath(resourcePath);
-        const loadCallback = (gltf)=>{
-            const node = gltf.scene;
-            node.animations.push(...gltf.animations);
-            onLoad(Loader._setUserData(node));
-        };
         if (buffer) {
-            loader.parse(buffer, resourcePath, loadCallback, onError);
+            loader.parse(buffer, resourcePath, onLoad, onError);
         } else {
-            loader.load(url, loadCallback, onProgress, onError);
+            loader.load(url, onLoad, onProgress, onError);
         }
     }
     constructor(...args){
@@ -459,11 +445,11 @@ class SVGLoader extends Loader {
 SVGLoader.Primitive = SVGLoader_js.SVGLoader;
 
 class KTX2Loader extends Loader {
-    load({ url, path, resourcePath, manager, texSettings, onLoad, onProgress, onError }) {
+    load({ url, path, resourcePath, transcoderPath, manager, texSettings, onLoad, onProgress, onError }) {
         let loader = this._loader;
         if (loader === undefined) {
-            loader = this._loader = new KTX2Loader$1.KTX2Loader();
-            loader.setTranscoderPath("three/examples/js/libs/basis/");
+            loader = this._loader = new KTX2Loader_js.KTX2Loader();
+            loader.setTranscoderPath(transcoderPath);
             loader.detectSupport(this.viewer.renderer);
         }
         loader.manager = manager;
@@ -2245,8 +2231,7 @@ class ComponentScheduler {
                 if (comp.onEnable) {
                     comp.onEnable();
                 }
-                if (typeof comp.start === "function" && !comp.flags.isStartCalled) {
-                    comp.flags.isStartCalled = true;
+                if (typeof comp.start === "function") {
                     this.startInvoker.add(comp);
                 }
                 if (typeof comp.update === "function") {
@@ -2476,12 +2461,12 @@ ComponentManager._infoMap = new Map();
 
 class Renderer extends Component {
     render(dt) {
-        const { renderer, scene, camera } = this.context;
+        const { renderer, scene, camera } = this.viewer;
         renderer.setRenderTarget(null);
         renderer.render(scene, camera);
     }
     resize(width, height) {
-        const { renderer } = this.context;
+        const { renderer } = this.viewer;
         renderer.setSize(width, height);
     }
     constructor(...args){
@@ -2601,6 +2586,60 @@ class Pressability {
     }
 }
 
+const PIXEL_STEP = 10;
+const LINE_HEIGHT = 40;
+const PAGE_HEIGHT = 800;
+function normalizeWheel(/*object*/ event) /*object*/ {
+    let sX = 0, sY = 0, pX = 0, pY = 0; // pixelX, pixelY
+    // Legacy
+    if ('detail' in event) {
+        sY = event.detail;
+    }
+    if ('wheelDelta' in event) {
+        sY = -event.wheelDelta / 120;
+    }
+    if ('wheelDeltaY' in event) {
+        sY = -event.wheelDeltaY / 120;
+    }
+    if ('wheelDeltaX' in event) {
+        sX = -event.wheelDeltaX / 120;
+    }
+    // side scrolling on FF with DOMMouseScroll
+    if ('axis' in event && event.axis === event.HORIZONTAL_AXIS) {
+        sX = sY;
+        sY = 0;
+    }
+    pX = sX * PIXEL_STEP;
+    pY = sY * PIXEL_STEP;
+    if ('deltaY' in event) {
+        pY = event.deltaY;
+    }
+    if ('deltaX' in event) {
+        pX = event.deltaX;
+    }
+    if ((pX || pY) && event.deltaMode) {
+        if (event.deltaMode == 1) {
+            pX *= LINE_HEIGHT;
+            pY *= LINE_HEIGHT;
+        } else {
+            pX *= PAGE_HEIGHT;
+            pY *= PAGE_HEIGHT;
+        }
+    }
+    // Fall-back if spin cannot be determined
+    if (pX && !sX) {
+        sX = pX < 1 ? -1 : 1;
+    }
+    if (pY && !sY) {
+        sY = pY < 1 ? -1 : 1;
+    }
+    return {
+        spinX: sX,
+        spinY: sY,
+        pixelX: pX,
+        pixelY: pY
+    };
+}
 class DeviceInput extends Component {
     get pointer() {
         return this._pointer;
@@ -2617,9 +2656,18 @@ class DeviceInput extends Component {
     get prePointerPixel() {
         return this._prePointerPixel;
     }
+    get preTouches() {
+        return this._preTouches;
+    }
     get mouseWheel() {
         return this._mouseWheel;
     }
+    get touchStart() {
+        return this._touchStart;
+    }
+    get touchMoving() {
+        return this._touchMoving;
+    }
     get touchCount() {
         return this._touchCount;
     }
@@ -2683,7 +2731,12 @@ class DeviceInput extends Component {
     lastUpdate(dt) {
         this._prePointer.copy(this._pointer);
         this._prePointerPixel.copy(this._pointerPixel);
+        for(let i = this._touchCount; i--;){
+            this._preTouches[i].id = this._touches[i].id;
+            this._preTouches[i].position.copy(this._touches[i].position);
+        }
         this._mouseWheel = 0;
+        this._touchStart = false;
     }
     connect(target, event) {
         switch(event){
@@ -2754,14 +2807,16 @@ class DeviceInput extends Component {
         const isDocument = target instanceof Document;
         const width = isDocument ? window.innerWidth : target.offsetWidth;
         const height = isDocument ? window.innerHeight : target.offsetHeight;
-        this._pointer.x = e.clientX / width * 2 - 1;
-        this._pointer.y = 1 - e.clientY / height * 2;
-        this._pointerPixel.set(e.clientX, e.clientY);
+        this._pointer.x = e.pageX / width * 2 - 1;
+        this._pointer.y = 1 - e.pageY / height * 2;
+        this._pointerPixel.set(e.pageX, e.pageY);
     }
     _onPointerDown(e) {
         e = this._remapPointer(e);
         this._pointerButton = e.button;
         this._computePointer(e);
+        this._prePointer.copy(this._pointer);
+        this._prePointerPixel.copy(this._pointerPixel);
         this._pressability.pointerDown(this._pointer, this.viewer.camera);
         this.viewer.emit(DeviceInput.POINTER_DOWN, e);
     }
@@ -2779,33 +2834,54 @@ class DeviceInput extends Component {
         this.viewer.emit(DeviceInput.POINTER_MOVE, e);
     }
     _onMouseWheel(e) {
-        this._mouseWheel = e.deltaY || e.wheelDelta;
+        this._mouseWheel = this._normalizeWheel(e).pixelY;
         this.viewer.emit(DeviceInput.MOUSE_WHEEL, e);
     }
     _onTouchStart(e) {
+        this._touchStart = true;
         e = this._remapTouch(e);
+        const curr = e.touches;
+        const touches = this._touches;
+        const preTouches = this._preTouches;
+        for(let i = curr.length; i--;){
+            if (touches[i] === undefined) {
+                touches[i] = {
+                    id: -1,
+                    position: new THREE.Vector2()
+                };
+            }
+            const touch = curr[i];
+            touches[i].id = touch.identifier;
+            touches[i].position.set(touch.pageX, touch.pageY);
+            if (preTouches[i] === undefined) {
+                preTouches[i] = {
+                    id: touches[i].id,
+                    position: touches[i].position.clone()
+                };
+            } else {
+                preTouches[i].id = touches[i].id;
+                preTouches[i].position.copy(touches[i].position);
+            }
+        }
+        this._touchCount = curr.length;
         this.viewer.emit(DeviceInput.TOUCH_START, e);
     }
     _onTouchEnd(e) {
+        this._touchMoving = false;
         e = this._remapTouch(e);
         this.viewer.emit(DeviceInput.TOUCH_END, e);
     }
     _onTouchMove(e) {
+        this._touchMoving = true;
         e = this._remapTouch(e);
-        const touches = e.touches;
-        const touchesTo = this._touches;
-        for(let i = touches.length; i--;){
-            if (touchesTo[i] == undefined) {
-                touchesTo[i] = {
-                    id: -1,
-                    position: new THREE.Vector2()
-                };
-            }
-            const touch = touches[i];
-            touchesTo[i].id = touch.identifier;
-            touchesTo[i].position.set(touch.pageX, touch.pageY);
-        }
-        this._touchCount = touches.length;
+        const curr = e.touches;
+        const touches = this._touches;
+        for(let i = curr.length; i--;){
+            const touch = curr[i];
+            touches[i].id = touch.identifier;
+            touches[i].position.set(touch.pageX, touch.pageY);
+        }
+        this._touchCount = curr.length;
         this.viewer.emit(DeviceInput.TOUCH_MOVE, e);
     }
     _onKeyDown(e) {
@@ -2820,9 +2896,10 @@ class DeviceInput extends Component {
         this._keys[e.key] = false;
         this.viewer.emit(DeviceInput.KEYUP, e);
     }
-    constructor(target){
-        super(), this._listeners = [], this._touches = [], this._touchCount = 0, this._pointer = new THREE.Vector2(), this._pointerPixel = new THREE.Vector2(), this._pointerButton = -1, this._prePointer = new THREE.Vector2(), this._prePointerPixel = new THREE.Vector2(), this._mouseWheel = 0, this._keys = {}, this._pressability = new Pressability();
-        this._target = target;
+    constructor(option){
+        super(), this._listeners = [], this._touches = [], this._touchCount = 0, this._touchStart = false, this._touchMoving = false, this._pointer = new THREE.Vector2(), this._pointerPixel = new THREE.Vector2(), this._pointerButton = -1, this._prePointer = new THREE.Vector2(), this._prePointerPixel = new THREE.Vector2(), this._preTouches = [], this._mouseWheel = 0, this._keys = {}, this._pressability = new Pressability();
+        this._target = option.source;
+        this._normalizeWheel = option.normalizeWheel || normalizeWheel;
     }
 }
 DeviceInput.CLICK = "click";
@@ -3666,7 +3743,9 @@ uniform float     roughness;
 uniform float     metalness;
 uniform sampler2D map;
 uniform sampler2D normalMap;
+uniform vec4      normalScaleBias;     
 uniform sampler2D roughnessMap;
+uniform vec4      roughnessScaleBias;    
 uniform sampler2D aoMap;
 uniform float     aoMapIntensity;
 uniform sampler2D lightMap;
@@ -3704,7 +3783,7 @@ void main() {
     vec2 reflectUv = coord.xy;
 
 #ifdef USE_NORMALMAP
-    vec4 texelNormal = texture2D(normalMap, UV_NORMAL);
+    vec4 texelNormal = texture2D(normalMap, UV_NORMAL * normalScaleBias.xy + normalScaleBias.zw);
     vec3 normal = normalize(vec3(texelNormal.r * 2.0 - 1.0, texelNormal.b,  texelNormal.g * 2.0 - 1.0));
     reflectUv += coord.z * normal.xz * 0.05;
 #endif
@@ -3731,7 +3810,7 @@ void main() {
     float roughnessFactor = roughness;
 
 #ifdef USE_ROUGHNESSMAP
-    roughnessFactor *= texture2D(roughnessMap, UV_ROUGHNESS).g * roughness;
+    roughnessFactor *= texture2D(roughnessMap, UV_ROUGHNESS * roughnessScaleBias.xy + roughnessScaleBias.zw).g * roughness;
 #endif
 
     computeMultiscattering( geometryNormal, geometryViewDir, specularColor, specularF90, roughnessFactor, singleScattering, multiScattering );
@@ -3743,6 +3822,8 @@ void main() {
 
 #ifdef USE_LIGHTMAP
     irradiance += texture2D(lightMap, UV_LIGHTMAP).rgb * lightMapIntensity;
+#else
+    irradiance += vec3(1.);
 #endif
 
     float lod = roughnessFactor * (1.7 - 0.7 * roughnessFactor) * 6.;
@@ -3829,12 +3910,24 @@ class ReflectorMaterial extends THREE.ShaderMaterial {
     set roughnessMap(v) {
         this.uniforms.roughnessMap.value = v;
     }
+    get roughnessScaleBias() {
+        return this.uniforms.roughnessScaleBias.value;
+    }
+    set roughnessScaleBias(v) {
+        this.uniforms.roughnessScaleBias.value.copy(v);
+    }
     get normalMap() {
         return this.uniforms.normalMap.value;
     }
     set normalMap(v) {
         this.uniforms.normalMap.value = v;
     }
+    get normalScaleBias() {
+        return this.uniforms.normalScaleBias.value;
+    }
+    set normalScaleBias(v) {
+        this.uniforms.normalScaleBias.value.copy(v);
+    }
     get aoMap() {
         return this.uniforms.aoMap.value;
     }
@@ -3899,9 +3992,15 @@ class ReflectorMaterial extends THREE.ShaderMaterial {
             roughnessMap: {
                 value: null
             },
+            roughnessScaleBias: {
+                value: new THREE.Vector4(1, 1, 0, 0)
+            },
             normalMap: {
                 value: null
             },
+            normalScaleBias: {
+                value: new THREE.Vector4(1, 1, 0, 0)
+            },
             aoMap: {
                 value: null
             },
@@ -3947,9 +4046,15 @@ __decorate([
 __decorate([
     property
 ], ReflectorMaterial.prototype, "roughnessMap", null);
+__decorate([
+    property
+], ReflectorMaterial.prototype, "roughnessScaleBias", null);
 __decorate([
     property
 ], ReflectorMaterial.prototype, "normalMap", null);
+__decorate([
+    property
+], ReflectorMaterial.prototype, "normalScaleBias", null);
 __decorate([
     property
 ], ReflectorMaterial.prototype, "aoMap", null);
@@ -4411,19 +4516,15 @@ class ResourceManager {
         }
         return loader;
     }
-    loadAsset({ url, buffer, ext, path, resourcePath, dracoPath, manager, onProgress, ...props }) {
+    loadAsset({ url, ext, onProgress, ...props }) {
         return new Promise((resolve, reject)=>{
             const sel = ext || url && ResourceManager.extension(url) || "";
             const texSettings = ResourceManager._splitTextureSettings(props);
             if (this._loaders.has(sel)) {
                 this._loaders.get(sel).load({
                     url,
-                    buffer,
                     texSettings,
-                    path,
-                    resourcePath,
-                    dracoPath,
-                    manager,
+                    ...props,
                     onProgress,
                     onLoad: resolve,
                     onError: (err)=>{
@@ -4880,6 +4981,9 @@ class Viewer extends EventEmitter {
     clearColor(renderTarget, color, alpha) {
         Viewer.ClearColor(this._renderer, renderTarget, color, alpha);
     }
+    stash(renderTarget, callback, clearColor, clearAlpha) {
+        Viewer.Stash(this._renderer, renderTarget, callback, clearColor, clearAlpha);
+    }
     blur(blurLevel, shadingScale, inputBuffer, tempBuffer, outputBuffer, fixedOutput) {
         Viewer.Blur(this._renderer, blurLevel, shadingScale, inputBuffer, tempBuffer, outputBuffer, fixedOutput);
     }
@@ -4975,7 +5079,7 @@ class Viewer extends EventEmitter {
         renderer.autoClear = true;
         renderer.setRenderTarget(renderTarget);
         clearColor !== undefined && renderer.setClearColor(clearColor, clearAlpha);
-        callback && callback();
+        callback && callback(renderer);
         renderer.autoClear = autoClear;
         renderer.setRenderTarget(RT);
         clearColor !== undefined && renderer.setClearColor(color, alpha);
@@ -5011,7 +5115,7 @@ class Viewer extends EventEmitter {
         near: 0.1,
         far: 1000,
         position: new THREE.Vector3(0, 0, 4)
-    }, targetFrameRate = -1, fixedFrameTime = false, colorSpace = THREE.SRGBColorSpace, toneMapping = THREE.LinearToneMapping, toneMappingExposure = 1, maxDPR = 1.5, path = "", resourcePath = "", dracoPath = "https://www.gstatic.com/draco/v1/decoders/", orientation = Orientation.AUTO, loader = {}, tasker = {}, ...webglOpts } = {}){
+    }, targetFrameRate = -1, fixedFrameTime = false, colorSpace = THREE.SRGBColorSpace, toneMapping = THREE.LinearToneMapping, toneMappingExposure = 1, maxDPR = 1.5, path = "", resourcePath = "", dracoPath = "https://www.gstatic.com/draco/v1/decoders/", transcoderPath = "three/examples/js/libs/basis/", orientation = Orientation.AUTO, loader = {}, tasker = {}, ...webglOpts } = {}){
         super(), this._instanceId = Viewer.instanceCount++, this._dpr = 1, this._width = 1, this._height = 1, this._viewport = {
             width: 1,
             height: 1,
@@ -5069,12 +5173,15 @@ class Viewer extends EventEmitter {
             path,
             resourcePath,
             dracoPath,
+            transcoderPath,
             manager: this._loadingManager
         };
         this._mount = applyProps(new THREE.Object3D(), {
             name: "Mount"
         });
-        this._input = this.add(new DeviceInput(input || this._canvas));
+        this._input = this.add(new DeviceInput(input || {
+            source: this._canvas
+        }));
         this.add(Renderer);
         this.addLoader(GLTFLoader);
         this.addLoader(HDRLoader);
@@ -5810,10 +5917,698 @@ function getFilesFromItemList(items, onDone) {
     }
 }
 
+const newline = /\n/;
+const newlineChar = '\n';
+const whitespace = /\s/;
+function wordwrap(text, opt) {
+    opt = opt || {};
+    //zero width results in nothing visible
+    if (opt.width === 0 && opt.mode !== 'nowrap') return [];
+    text = text || '';
+    const width = typeof opt.width === 'number' ? opt.width : Number.MAX_VALUE;
+    const start = Math.max(0, opt.start || 0);
+    const end = typeof opt.end === 'number' ? opt.end : text.length;
+    const mode = opt.mode;
+    const letterSpacing = opt.letterSpacing || 0;
+    const measure = opt.measure || monospace;
+    if (mode === 'pre') return pre(measure, text, start, end, width, letterSpacing);
+    else return greedy(measure, text, start, end, width, mode, letterSpacing);
+}
+function idxOf(text, chr, start, end) {
+    var idx = text.indexOf(chr, start);
+    if (idx === -1 || idx > end) return end;
+    return idx;
+}
+function isWhitespace(chr) {
+    return whitespace.test(chr);
+}
+function pre(measure, text, start, end, width, letterSpacing) {
+    var lines = [];
+    var lineStart = start;
+    for(var i = start; i < end && i < text.length; i++){
+        var chr = text.charAt(i);
+        var isNewline = newline.test(chr);
+        //If we've reached a newline, then step down a line
+        //Or if we've reached the EOF
+        if (isNewline || i === end - 1) {
+            var lineEnd = isNewline ? i : i + 1;
+            var measured = measure(text, lineStart, lineEnd, width, letterSpacing);
+            lines.push(measured);
+            lineStart = i + 1;
+        }
+    }
+    return lines;
+}
+function greedy(measure, text, start, end, width, mode, letterSpacing) {
+    //A greedy word wrapper based on LibGDX algorithm
+    //https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/BitmapFontCache.java
+    var lines = [];
+    var testWidth = width;
+    //if 'nowrap' is specified, we only wrap on newline chars
+    if (mode === 'nowrap') testWidth = Number.MAX_VALUE;
+    while(start < end && start < text.length){
+        //get next newline position
+        var newLine = idxOf(text, newlineChar, start, end);
+        //eat whitespace at start of line
+        while(start < newLine){
+            if (!isWhitespace(text.charAt(start))) break;
+            start++;
+        }
+        //determine visible # of glyphs for the available width
+        var measured = measure(text, start, newLine, testWidth, letterSpacing);
+        var lineEnd = start + (measured.end - measured.start);
+        var nextStart = lineEnd + newlineChar.length;
+        //if we had to cut the line before the next newline...
+        if (lineEnd < newLine) {
+            //find char to break on
+            while(lineEnd > start){
+                if (isWhitespace(text.charAt(lineEnd))) break;
+                lineEnd--;
+            }
+            if (lineEnd === start) {
+                if (nextStart > start + newlineChar.length) nextStart--;
+                lineEnd = nextStart; // If no characters to break, show all.
+            } else {
+                nextStart = lineEnd;
+                //eat whitespace at end of line
+                while(lineEnd > start){
+                    if (!isWhitespace(text.charAt(lineEnd - newlineChar.length))) break;
+                    lineEnd--;
+                }
+            }
+        }
+        if (lineEnd >= start) {
+            var result = measure(text, start, lineEnd, testWidth);
+            lines.push(result);
+        }
+        start = nextStart;
+    }
+    return lines;
+}
+//determines the visible number of glyphs within a given width
+function monospace(text, start, end, width) {
+    var glyphs = Math.min(width, end - start);
+    return {
+        start: start,
+        end: start + glyphs
+    };
+}
+
+const X_HEIGHTS = [
+    'x',
+    'e',
+    'a',
+    'o',
+    'n',
+    's',
+    'r',
+    'c',
+    'u',
+    'm',
+    'v',
+    'w',
+    'z'
+];
+const M_WIDTHS = [
+    'm',
+    'w'
+];
+const CAP_HEIGHTS = [
+    'H',
+    'I',
+    'N',
+    'E',
+    'F',
+    'K',
+    'L',
+    'T',
+    'U',
+    'V',
+    'W',
+    'X',
+    'Y',
+    'Z'
+];
+const TAB_ID = '\t'.charCodeAt(0);
+const SPACE_ID = ' '.charCodeAt(0);
+const ALIGN_LEFT = 0, ALIGN_CENTER = 1, ALIGN_RIGHT = 2;
+function findChar(array, value, start) {
+    start = start || 0;
+    for(let i = start; i < array.length; i++){
+        if (array[i].id === value) {
+            return i;
+        }
+    }
+    return -1;
+}
+function getGlyphById(font, id) {
+    if (!font.chars || font.chars.length === 0) return null;
+    let glyphIdx = findChar(font.chars, id);
+    if (glyphIdx >= 0) return font.chars[glyphIdx];
+    return null;
+}
+function getXHeight(font) {
+    for(let i = 0; i < X_HEIGHTS.length; i++){
+        let id = X_HEIGHTS[i].charCodeAt(0);
+        let idx = findChar(font.chars, id);
+        if (idx >= 0) return font.chars[idx].height;
+    }
+    return 0;
+}
+function getMGlyph(font) {
+    for(let i = 0; i < M_WIDTHS.length; i++){
+        let id = M_WIDTHS[i].charCodeAt(0);
+        let idx = findChar(font.chars, id);
+        if (idx >= 0) return font.chars[idx];
+    }
+    return 0;
+}
+function getCapHeight(font) {
+    for(let i = 0; i < CAP_HEIGHTS.length; i++){
+        let id = CAP_HEIGHTS[i].charCodeAt(0);
+        let idx = findChar(font.chars, id);
+        if (idx >= 0) return font.chars[idx].height;
+    }
+    return 0;
+}
+function getKerning(font, left, right) {
+    if (!font.kernings || font.kernings.length === 0) return 0;
+    let table = font.kernings;
+    for(let i = 0; i < table.length; i++){
+        let kern = table[i];
+        if (kern.first === left && kern.second === right) return kern.amount;
+    }
+    return 0;
+}
+function getAlignType(align) {
+    if (align === 'center') return ALIGN_CENTER;
+    else if (align === 'right') return ALIGN_RIGHT;
+    return ALIGN_LEFT;
+}
+class BMFontTextLayout {
+    get width() {
+        return this._width;
+    }
+    get height() {
+        return this._height;
+    }
+    get descender() {
+        return this._descender;
+    }
+    get ascender() {
+        return this._ascender;
+    }
+    get xHeight() {
+        return this._xHeight;
+    }
+    get baseline() {
+        return this._baseline;
+    }
+    get capHeight() {
+        return this._capHeight;
+    }
+    get lineHeight() {
+        return this._lineHeight;
+    }
+    get glyphs() {
+        return this._glyphs;
+    }
+    get linesTotal() {
+        return this._linesTotal;
+    }
+    update(font, text, setting) {
+        setting = Object.assign({
+            tabSize: 4,
+            width: 0,
+            letterSpacing: 0,
+            mode: "nowrap",
+            align: "left"
+        }, setting);
+        this._font = font;
+        const measure = this._computeMetrics.bind(this);
+        const lines = wordwrap(text, {
+            measure,
+            ...setting
+        });
+        const minWidth = setting.width || 0;
+        const glyphs = this._glyphs;
+        const maxLineWidth = lines.reduce((prev, line)=>Math.max(prev, line.width, minWidth), 0);
+        var _setting_lineHeight;
+        //the pen position
+        const lineHeight = (_setting_lineHeight = setting.lineHeight) != null ? _setting_lineHeight : font.common.lineHeight;
+        const baseline = font.common.base;
+        const descender = lineHeight - baseline;
+        const letterSpacing = setting.letterSpacing || 0;
+        const height = lineHeight * lines.length - descender;
+        const align = getAlignType(setting.align);
+        var _setting_anchor;
+        const anchor = (_setting_anchor = setting.anchor) != null ? _setting_anchor : [
+            0.5,
+            0.5
+        ];
+        this._setupSpaceGlyphs(font, setting);
+        //the metrics for this text layout
+        this._width = maxLineWidth;
+        this._height = height;
+        this._descender = descender;
+        this._baseline = baseline;
+        this._xHeight = getXHeight(font);
+        this._capHeight = getCapHeight(font);
+        this._lineHeight = lineHeight;
+        this._ascender = baseline - this._xHeight; //lineHeight - descender - this._xHeight
+        const anchorOffset = [
+            -maxLineWidth * anchor[0],
+            2 * lineHeight * anchor[1] - baseline
+        ];
+        let x = 0, y = 0;
+        //draw text along baseline
+        y -= height;
+        glyphs.length = 0;
+        for(let k = 0; k < lines.length; k++){
+            const line = lines[k];
+            let start = line.start;
+            let end = line.end;
+            let lineWidth = line.width;
+            let lastGlyph;
+            //for each glyph in that line...
+            for(let i = start; i < end; i++){
+                let id = text.charCodeAt(i);
+                let glyph = this._getGlyph(font, id);
+                if (glyph) {
+                    if (lastGlyph) x += getKerning(font, lastGlyph.id, glyph.id);
+                    let tx = x;
+                    if (align === ALIGN_CENTER) tx += (maxLineWidth - lineWidth) / 2;
+                    else if (align === ALIGN_RIGHT) tx += maxLineWidth - lineWidth;
+                    glyphs.push({
+                        position: [
+                            tx + anchorOffset[0],
+                            y + anchorOffset[1]
+                        ],
+                        data: glyph,
+                        index: i,
+                        line: k
+                    });
+                    //move pen forward
+                    x += glyph.xadvance + letterSpacing;
+                    lastGlyph = glyph;
+                }
+            }
+            //next line down
+            y += lineHeight;
+            x = 0;
+        }
+        this._linesTotal = lines.length;
+    }
+    _setupSpaceGlyphs(font, setting) {
+        //These are fallbacks, when the font doesn't include
+        //' ' or '\t' glyphs
+        if (!font.chars || font.chars.length === 0) return;
+        //try to get space glyph
+        //then fall back to the 'm' or 'w' glyphs
+        //then fall back to the first glyph available
+        const space = Object.assign({}, getGlyphById(font, SPACE_ID) || getMGlyph(font) || font.chars[0]);
+        //and create a fallback for tab
+        const tabWidth = setting.tabSize * space.xadvance;
+        this._fallbackSpaceGlyph = space;
+        this._fallbackTabGlyph = Object.assign(space, {
+            x: 0,
+            y: 0,
+            xadvance: tabWidth,
+            id: TAB_ID,
+            xoffset: 0,
+            yoffset: 0,
+            width: 0,
+            height: 0
+        });
+    }
+    _getGlyph(font, id) {
+        let glyph = getGlyphById(font, id);
+        if (glyph) return glyph;
+        else if (id === TAB_ID) return this._fallbackTabGlyph;
+        else if (id === SPACE_ID) return this._fallbackSpaceGlyph;
+        return null;
+    }
+    _computeMetrics(text, start, end, width, letterSpacing = 0) {
+        let font = this._font;
+        let curPen = 0;
+        let curWidth = 0;
+        let count = 0;
+        let lastGlyph;
+        if (!font.chars || font.chars.length === 0) {
+            return {
+                start: start,
+                end: start,
+                width: 0
+            };
+        }
+        end = Math.min(text.length, end);
+        for(let i = start; i < end; i++){
+            let id = text.charCodeAt(i);
+            let glyph = this._getGlyph(font, id);
+            if (glyph) {
+                //move pen forward
+                glyph.xoffset;
+                let kern = lastGlyph ? getKerning(font, lastGlyph.id, glyph.id) : 0;
+                curPen += kern;
+                let nextPen = curPen + glyph.xadvance + letterSpacing;
+                let nextWidth = curPen + glyph.width;
+                //we've hit our limit; we can't move onto the next glyph
+                if (nextWidth >= width || nextPen >= width) break;
+                //otherwise continue along our line
+                curPen = nextPen;
+                curWidth = nextWidth;
+                lastGlyph = glyph;
+            }
+            count++;
+        }
+        //make sure rightmost edge lines up with rendered glyphs
+        if (lastGlyph) curWidth += lastGlyph.xoffset;
+        return {
+            start: start,
+            end: start + count,
+            width: curWidth
+        };
+    }
+    constructor(){
+        this._width = 0;
+        this._height = 0;
+        this._descender = 0;
+        this._ascender = 0;
+        this._xHeight = 0;
+        this._baseline = 0;
+        this._capHeight = 0;
+        this._lineHeight = 0;
+        this._linesTotal = 0;
+        this._glyphs = [];
+        this._fallbackSpaceGlyph = null;
+        this._fallbackTabGlyph = null;
+        this._font = null;
+    }
+}
+
+const itemSize = 2;
+const box = {
+    min: [
+        0,
+        0
+    ],
+    max: [
+        0,
+        0
+    ]
+};
+function bounds(positions) {
+    const count = positions.length / itemSize;
+    box.min[0] = positions[0];
+    box.min[1] = positions[1];
+    box.max[0] = positions[0];
+    box.max[1] = positions[1];
+    for(let i = 0; i < count; i++){
+        const x = positions[i * itemSize + 0];
+        const y = positions[i * itemSize + 1];
+        box.min[0] = Math.min(x, box.min[0]);
+        box.min[1] = Math.min(y, box.min[1]);
+        box.max[0] = Math.max(x, box.max[0]);
+        box.max[1] = Math.max(y, box.max[1]);
+    }
+}
+function computeBox(positions, output) {
+    bounds(positions);
+    output.min.set(box.min[0], box.min[1], 0);
+    output.max.set(box.max[0], box.max[1], 0);
+}
+function computeSphere(positions, output) {
+    bounds(positions);
+    const minX = box.min[0];
+    const minY = box.min[1];
+    const maxX = box.max[0];
+    const maxY = box.max[1];
+    const width = maxX - minX;
+    const height = maxY - minY;
+    const length = Math.sqrt(width * width + height * height);
+    output.center.set(minX + width / 2, minY + height / 2, 0);
+    output.radius = length / 2;
+}
+
+class BMFontTextGeometry extends THREE.BufferGeometry {
+    update(fontAtlas, text, setting) {
+        this.layout.update(fontAtlas.info, text, setting);
+        const { indice, position, uv } = fontAtlas.build(this.layout, setting);
+        this.setIndex(new THREE.BufferAttribute(indice, 1));
+        this.setAttribute("position", new THREE.BufferAttribute(position, 2));
+        this.setAttribute("uv", new THREE.BufferAttribute(uv, 2));
+    }
+    computeBoundingSphere() {
+        if (this.boundingSphere === null) {
+            this.boundingSphere = new THREE.Sphere();
+        }
+        const positions = this.attributes.position.array;
+        const itemSize = this.attributes.position.itemSize;
+        if (!positions || !itemSize || positions.length < 2) {
+            this.boundingSphere.radius = 0;
+            this.boundingSphere.center.set(0, 0, 0);
+            return;
+        }
+        computeSphere(positions, this.boundingSphere);
+        if (isNaN(this.boundingSphere.radius)) {
+            console.error('THREE.BufferGeometry.computeBoundingSphere(): ' + 'Computed radius is NaN. The ' + '"position" attribute is likely to have NaN values.');
+        }
+    }
+    computeBoundingBox() {
+        if (this.boundingBox === null) {
+            this.boundingBox = new THREE.Box3();
+        }
+        const bbox = this.boundingBox;
+        const positions = this.attributes.position["array"];
+        const itemSize = this.attributes.position.itemSize;
+        if (!positions || !itemSize || positions.length < 2) {
+            bbox.makeEmpty();
+            return;
+        }
+        computeBox(positions, bbox);
+    }
+    constructor(...args){
+        super(...args), this.layout = new BMFontTextLayout();
+    }
+}
+
+class Label extends Component {
+    get text() {
+        return this._text;
+    }
+    set text(v) {
+        if (this._text !== v) {
+            this._text = v;
+            this.needsUpdate = true;
+        }
+    }
+    get font() {
+        return this._font;
+    }
+    set font(v) {
+        if (this._font !== v) {
+            this._font = v;
+            this.needsUpdate = true;
+        }
+    }
+    get setting() {
+        return this._setting;
+    }
+    set setting(v) {
+        if (JSON.stringify(this._setting) !== JSON.stringify(v)) {
+            this._setting = v;
+            this.needsUpdate = true;
+        }
+    }
+    get layout() {
+        return this.node.geometry.layout;
+    }
+    forceUpdate() {
+        this.node.geometry.update(this.font, this.text, this.setting);
+    }
+    update(dt) {
+        if (this.needsUpdate) {
+            this.needsUpdate = false;
+            this.forceUpdate();
+        }
+    }
+    constructor({ text = "", font, material, ...setting }){
+        super(), this.needsUpdate = false, this._text = "", this._font = null, this._setting = null;
+        this.text = text;
+        this.font = font;
+        this.setting = setting;
+        this.node = new THREE.Mesh(new BMFontTextGeometry(), material || font.material);
+        this.node.geometry.update(this.font, this.text, this.setting);
+    }
+}
+
+const vert_MSDF = `
+varying vec2 v_uv;
+
+void main() {
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    v_uv = uv;
+}
+`;
+const frag_MSDF = `
+uniform sampler2D u_fontTexture;
+varying vec2  v_uv;
+
+uniform vec3  u_color;
+uniform float u_opacity;
+uniform vec3  u_strokeColor;
+uniform float u_strokeWidth;
+uniform vec3  u_shadowColor;
+uniform float u_shadowBlur;
+uniform vec2  u_shadowOffset;
+uniform float u_weight;
+
+float median(in float r, in float g, in float b) {
+    return max(min(r, g), min(max(r, g), b));
+}
+
+float signedDistance(in vec2 uv) {
+    vec4 texel = texture2D(u_fontTexture, uv);
+    return median(texel.r, texel.g, texel.b) - 0.5;
+}
+
+void main() {
+    vec4  color = vec4(u_color, 1.);
+    float d = signedDistance(v_uv) + u_weight;
+    float w = fwidth(d);
+
+    vec4 stroke = vec4(u_strokeColor, smoothstep(-w, w, d));
+    color.a *= smoothstep(-w, w, d - u_strokeWidth);
+    color = mix(stroke, color, color.a);
+
+    float sd = signedDistance(v_uv + u_shadowOffset) + u_weight;
+    vec4  shadow = vec4(u_shadowColor, smoothstep(-w - u_shadowBlur, w + u_shadowBlur, sd));
+    color = mix(shadow, color, color.a);
+
+    color.a *= u_opacity;
+    gl_FragColor = color;
+}
+`;
+class BMFontAtlas {
+    build(layout, setting) {
+        const info = this.info;
+        const texWidth = info.common.scaleW;
+        const texHeight = info.common.scaleH;
+        const glyphs = layout.glyphs.filter((glyph)=>glyph.data.width * glyph.data.height > 0);
+        const flipY = setting.flipY !== false;
+        const position = new Float32Array(glyphs.length * 8);
+        const uv = new Float32Array(glyphs.length * 8);
+        const indice = new Uint16Array(glyphs.length * 6);
+        for(let k = 0, i0 = 0, i1 = 0, i2 = 0, i = 0; i < glyphs.length; i++, k += 4){
+            const glyph = glyphs[i];
+            const bitmap = glyph.data;
+            // bottom left position
+            let x = glyph.position[0] + bitmap.xoffset;
+            let y = glyph.position[1] + bitmap.yoffset;
+            // quad size
+            let w = bitmap.width;
+            let h = bitmap.height;
+            // BL
+            position[i0++] = x;
+            position[i0++] = y;
+            // BR
+            position[i0++] = x + w;
+            position[i0++] = y;
+            // TR
+            position[i0++] = x + w;
+            position[i0++] = y + h;
+            // TL
+            position[i0++] = x;
+            position[i0++] = y + h;
+            let bw = bitmap.x + bitmap.width;
+            let bh = bitmap.y + bitmap.height;
+            // top left position
+            let u0 = bitmap.x / texWidth;
+            let v0 = bitmap.y / texHeight;
+            let u1 = bw / texWidth;
+            let v1 = bh / texHeight;
+            if (flipY) {
+                v0 = 1 - v0;
+                v1 = 1 - v1;
+            }
+            // BL
+            uv[i1++] = u0;
+            uv[i1++] = v0;
+            // BR
+            uv[i1++] = u1;
+            uv[i1++] = v0;
+            // TR
+            uv[i1++] = u1;
+            uv[i1++] = v1;
+            // TL
+            uv[i1++] = u0;
+            uv[i1++] = v1;
+            indice[i2++] = k + 0;
+            indice[i2++] = k + 1;
+            indice[i2++] = k + 2;
+            indice[i2++] = k + 0;
+            indice[i2++] = k + 2;
+            indice[i2++] = k + 3;
+        }
+        return {
+            position,
+            uv,
+            indice
+        };
+    }
+    constructor({ info, texture, uniforms, ...props }){
+        this.uniforms = {
+            u_color: {
+                value: new THREE.Color(0xffffff)
+            },
+            u_opacity: {
+                value: 1
+            },
+            u_weight: {
+                value: 0.2
+            },
+            u_strokeColor: {
+                value: new THREE.Color(0xff0000)
+            },
+            u_strokeWidth: {
+                value: 0
+            },
+            u_shadowColor: {
+                value: new THREE.Color(0xff0000)
+            },
+            u_shadowBlur: {
+                value: 0
+            },
+            u_shadowOffset: {
+                value: new THREE.Vector2()
+            },
+            u_fontTexture: {
+                value: null
+            }
+        };
+        this.info = info;
+        this.uniforms.u_fontTexture.value = texture;
+        this.material = new THREE.ShaderMaterial(Object.assign({
+            vertexShader: vert_MSDF,
+            fragmentShader: frag_MSDF,
+            transparent: true,
+            depthWrite: false,
+            blending: THREE.NormalBlending,
+            uniforms: {
+                ...this.uniforms,
+                ...uniforms
+            }
+        }, props));
+    }
+}
+
 exports.AccumulativeShadows = AccumulativeShadows;
 exports.Animation = Animation;
 exports.AnimationCurve = AnimationCurve;
 exports.BINLoader = BINLoader;
+exports.BMFontAtlas = BMFontAtlas;
+exports.BMFontTextGeometry = BMFontTextGeometry;
+exports.BMFontTextLayout = BMFontTextLayout;
 exports.Box = Box;
 exports.BoxProjection = BoxProjection;
 exports.Center = Center;
@@ -5834,6 +6629,7 @@ exports.GLTFLoader = GLTFLoader;
 exports.HDRLoader = HDRLoader;
 exports.JSONLoader = JSONLoader;
 exports.KTX2Loader = KTX2Loader;
+exports.Label = Label;
 exports.Loader = Loader;
 exports.Logger = Logger;
 exports.ObjectInstance = ObjectInstance;