diff --git a/src/twisty/dom/viewers/Twisty3DCanvas.ts b/src/twisty/dom/viewers/Twisty3DCanvas.ts index 75526b132..7362c1fe4 100644 --- a/src/twisty/dom/viewers/Twisty3DCanvas.ts +++ b/src/twisty/dom/viewers/Twisty3DCanvas.ts @@ -7,7 +7,7 @@ import { twisty3DCanvasCSS } from "./Twisty3DCanvas.css"; import { TwistyOrbitControls } from "./TwistyOrbitControls"; import { TwistyViewerElement } from "./TwistyViewerElement"; import { customElementsShim } from "../element/node-custom-element-shims"; -import Stats from "three/examples/jsm/libs/stats.module"; +import Stats from "../../../vendor/node_modules/three/examples/jsm/libs/stats.module"; let SHOW_STATS = false; // Show render stats for newly contructed renderers. diff --git a/src/vendor/node_modules/three/examples/jsm/libs/stats.module.d.ts b/src/vendor/node_modules/three/examples/jsm/libs/stats.module.d.ts new file mode 100644 index 000000000..04f8de29c --- /dev/null +++ b/src/vendor/node_modules/three/examples/jsm/libs/stats.module.d.ts @@ -0,0 +1,24 @@ +declare interface Stats { + REVISION: number; + dom: HTMLDivElement; + addPanel( panel: Stats.Panel ): Stats.Panel; + showPanel( id: number ): void; + begin(): void; + end(): void; + update(): void; + domElement: HTMLDivElement; + setMode( id: number ): void; +} + +declare function Stats(): Stats; + +declare namespace Stats { + interface Panel { + dom: HTMLCanvasElement; + update( value: number, maxValue: number ): void; + } + + function Panel( name?: string, fg?: string, bg?: string ): Panel; +} + +export default Stats; diff --git a/src/vendor/node_modules/three/examples/jsm/libs/stats.module.js b/src/vendor/node_modules/three/examples/jsm/libs/stats.module.js new file mode 100644 index 000000000..09ab9902d --- /dev/null +++ b/src/vendor/node_modules/three/examples/jsm/libs/stats.module.js @@ -0,0 +1,171 @@ +/** + * @author mrdoob / http://mrdoob.com/ + */ + +var Stats = function () { + + var mode = 0; + + var container = document.createElement( 'div' ); + container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000'; + container.addEventListener( 'click', function ( event ) { + + event.preventDefault(); + showPanel( ++ mode % container.children.length ); + + }, false ); + + // + + function addPanel( panel ) { + + container.appendChild( panel.dom ); + return panel; + + } + + function showPanel( id ) { + + for ( var i = 0; i < container.children.length; i ++ ) { + + container.children[ i ].style.display = i === id ? 'block' : 'none'; + + } + + mode = id; + + } + + // + + var beginTime = ( performance || Date ).now(), prevTime = beginTime, frames = 0; + + var fpsPanel = addPanel( new Stats.Panel( 'FPS', '#0ff', '#002' ) ); + var msPanel = addPanel( new Stats.Panel( 'MS', '#0f0', '#020' ) ); + + if ( self.performance && self.performance.memory ) { + + var memPanel = addPanel( new Stats.Panel( 'MB', '#f08', '#201' ) ); + + } + + showPanel( 0 ); + + return { + + REVISION: 16, + + dom: container, + + addPanel: addPanel, + showPanel: showPanel, + + begin: function () { + + beginTime = ( performance || Date ).now(); + + }, + + end: function () { + + frames ++; + + var time = ( performance || Date ).now(); + + msPanel.update( time - beginTime, 200 ); + + if ( time >= prevTime + 1000 ) { + + fpsPanel.update( ( frames * 1000 ) / ( time - prevTime ), 100 ); + + prevTime = time; + frames = 0; + + if ( memPanel ) { + + var memory = performance.memory; + memPanel.update( memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576 ); + + } + + } + + return time; + + }, + + update: function () { + + beginTime = this.end(); + + }, + + // Backwards Compatibility + + domElement: container, + setMode: showPanel + + }; + +}; + +Stats.Panel = function ( name, fg, bg ) { + + var min = Infinity, max = 0, round = Math.round; + var PR = round( window.devicePixelRatio || 1 ); + + var WIDTH = 80 * PR, HEIGHT = 48 * PR, + TEXT_X = 3 * PR, TEXT_Y = 2 * PR, + GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR, + GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR; + + var canvas = document.createElement( 'canvas' ); + canvas.width = WIDTH; + canvas.height = HEIGHT; + canvas.style.cssText = 'width:80px;height:48px'; + + var context = canvas.getContext( '2d' ); + context.font = 'bold ' + ( 9 * PR ) + 'px Helvetica,Arial,sans-serif'; + context.textBaseline = 'top'; + + context.fillStyle = bg; + context.fillRect( 0, 0, WIDTH, HEIGHT ); + + context.fillStyle = fg; + context.fillText( name, TEXT_X, TEXT_Y ); + context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT ); + + context.fillStyle = bg; + context.globalAlpha = 0.9; + context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT ); + + return { + + dom: canvas, + + update: function ( value, maxValue ) { + + min = Math.min( min, value ); + max = Math.max( max, value ); + + context.fillStyle = bg; + context.globalAlpha = 1; + context.fillRect( 0, 0, WIDTH, GRAPH_Y ); + context.fillStyle = fg; + context.fillText( round( value ) + ' ' + name + ' (' + round( min ) + '-' + round( max ) + ')', TEXT_X, TEXT_Y ); + + context.drawImage( canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT ); + + context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT ); + + context.fillStyle = bg; + context.globalAlpha = 0.9; + context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round( ( 1 - ( value / maxValue ) ) * GRAPH_HEIGHT ) ); + + } + + }; + +}; + +export default Stats;