Initial commit
This commit is contained in:
Paul Graffam
commit
af6d73cca1
|
|
@ -0,0 +1,22 @@
|
||||||
|
{
|
||||||
|
"rules": {
|
||||||
|
"quotes": [
|
||||||
|
2,
|
||||||
|
"single"
|
||||||
|
],
|
||||||
|
"semi": [
|
||||||
|
2,
|
||||||
|
"always"
|
||||||
|
],
|
||||||
|
"no-unused-vars" : 2,
|
||||||
|
"no-undef" : 2
|
||||||
|
},
|
||||||
|
"env": {
|
||||||
|
"es6": true,
|
||||||
|
"browser": true
|
||||||
|
},
|
||||||
|
"extends": "eslint:recommended",
|
||||||
|
"parserOptions": {
|
||||||
|
"sourceType": "module"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
node_modules
|
||||||
|
*.log
|
||||||
|
.DS_Store
|
||||||
|
.idea
|
||||||
|
Iconr
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
# Three.js Webpack ES6 Boilerplate
|
||||||
|
A basic boilerplate for a Three.js project including the use of Webpack and ES6 syntax via Babel.
|
||||||
|
|
||||||
|
## Getting started
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
Then
|
||||||
|
|
||||||
|
```
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Spins up a webpack dev server at localhost:8080 and keeps track of all js and sass changes to files and reloads upon save.
|
||||||
|
|
||||||
|
## Build
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Cleans existing build folder while linting js and copies over the public folder from src. Then sets environment to production and compiles js and css into build.
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.main{width:100%;height:100vh}
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
.rs-base{
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10000;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #222;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 1.2em;
|
||||||
|
width: 350px;
|
||||||
|
font-family: 'Roboto Condensed', tahoma, sans-serif;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rs-base h1{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1.4em;
|
||||||
|
color: #fff;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rs-base div.rs-group{
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rs-base div.rs-group.hidden{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rs-base div.rs-fraction{
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rs-base div.rs-fraction p{
|
||||||
|
width: 120px;
|
||||||
|
text-align: right;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rs-base div.rs-legend{
|
||||||
|
position: absolute;
|
||||||
|
line-height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rs-base div.rs-counter-base{
|
||||||
|
position: relative;
|
||||||
|
margin: 2px 0;
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rs-base span.rs-counter-id{
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rs-base div.rs-counter-value{
|
||||||
|
position: absolute;
|
||||||
|
left: 90px;
|
||||||
|
width: 30px;
|
||||||
|
height: 1em;
|
||||||
|
top: 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rs-base canvas.rs-canvas{
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,719 @@
|
||||||
|
// performance.now() polyfill from https://gist.github.com/paulirish/5438650
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
( function () {
|
||||||
|
|
||||||
|
// prepare base perf object
|
||||||
|
if ( typeof window.performance === 'undefined' ) {
|
||||||
|
window.performance = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( !window.performance.now ) {
|
||||||
|
|
||||||
|
var nowOffset = Date.now();
|
||||||
|
|
||||||
|
if ( performance.timing && performance.timing.navigationStart ) {
|
||||||
|
nowOffset = performance.timing.navigationStart;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.performance.now = function now () {
|
||||||
|
return Date.now() - nowOffset;
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if( !window.performance.mark ) {
|
||||||
|
window.performance.mark = function(){}
|
||||||
|
}
|
||||||
|
|
||||||
|
if( !window.performance.measure ) {
|
||||||
|
window.performance.measure = function(){}
|
||||||
|
}
|
||||||
|
|
||||||
|
} )();
|
||||||
|
|
||||||
|
window.rStats = function rStats ( settings ) {
|
||||||
|
|
||||||
|
function iterateKeys ( array, callback ) {
|
||||||
|
var keys = Object.keys( array );
|
||||||
|
for ( var j = 0, l = keys.length; j < l; j++ ) {
|
||||||
|
callback( keys[ j ] );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function importCSS ( url ) {
|
||||||
|
|
||||||
|
var element = document.createElement( 'link' );
|
||||||
|
element.href = url;
|
||||||
|
element.rel = 'stylesheet';
|
||||||
|
element.type = 'text/css';
|
||||||
|
document.getElementsByTagName( 'head' )[ 0 ].appendChild( element );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
var _settings = settings || {};
|
||||||
|
var _colours = _settings.colours || [ '#850700', '#c74900', '#fcb300', '#284280', '#4c7c0c' ];
|
||||||
|
|
||||||
|
var _cssFont = 'https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300';
|
||||||
|
var _cssRStats = ( _settings.CSSPath ? _settings.CSSPath : '' ) + 'rStats.css';
|
||||||
|
|
||||||
|
var _css = _settings.css || [ _cssFont, _cssRStats ];
|
||||||
|
_css.forEach(function (uri) {
|
||||||
|
importCSS( uri );
|
||||||
|
});
|
||||||
|
|
||||||
|
if ( !_settings.values ) _settings.values = {};
|
||||||
|
|
||||||
|
var _base, _div, _elHeight = 10, _elWidth = 200;
|
||||||
|
var _perfCounters = {};
|
||||||
|
|
||||||
|
|
||||||
|
function Graph ( _dom, _id, _defArg ) {
|
||||||
|
|
||||||
|
var _def = _defArg || {};
|
||||||
|
var _canvas = document.createElement( 'canvas' ),
|
||||||
|
_ctx = _canvas.getContext( '2d' ),
|
||||||
|
_max = 0,
|
||||||
|
_current = 0;
|
||||||
|
|
||||||
|
var c = _def.color ? _def.color : '#666666';
|
||||||
|
|
||||||
|
var _dotCanvas = document.createElement( 'canvas' ),
|
||||||
|
_dotCtx = _dotCanvas.getContext( '2d' );
|
||||||
|
_dotCanvas.width = 1;
|
||||||
|
_dotCanvas.height = 2 * _elHeight;
|
||||||
|
_dotCtx.fillStyle = '#444444';
|
||||||
|
_dotCtx.fillRect( 0, 0, 1, 2 * _elHeight );
|
||||||
|
_dotCtx.fillStyle = c;
|
||||||
|
_dotCtx.fillRect( 0, _elHeight, 1, _elHeight );
|
||||||
|
_dotCtx.fillStyle = '#ffffff';
|
||||||
|
_dotCtx.globalAlpha = 0.5;
|
||||||
|
_dotCtx.fillRect( 0, _elHeight, 1, 1 );
|
||||||
|
_dotCtx.globalAlpha = 1;
|
||||||
|
|
||||||
|
var _alarmCanvas = document.createElement( 'canvas' ),
|
||||||
|
_alarmCtx = _alarmCanvas.getContext( '2d' );
|
||||||
|
_alarmCanvas.width = 1;
|
||||||
|
_alarmCanvas.height = 2 * _elHeight;
|
||||||
|
_alarmCtx.fillStyle = '#444444';
|
||||||
|
_alarmCtx.fillRect( 0, 0, 1, 2 * _elHeight );
|
||||||
|
_alarmCtx.fillStyle = '#b70000';
|
||||||
|
_alarmCtx.fillRect( 0, _elHeight, 1, _elHeight );
|
||||||
|
_alarmCtx.globalAlpha = 0.5;
|
||||||
|
_alarmCtx.fillStyle = '#ffffff';
|
||||||
|
_alarmCtx.fillRect( 0, _elHeight, 1, 1 );
|
||||||
|
_alarmCtx.globalAlpha = 1;
|
||||||
|
|
||||||
|
function _init () {
|
||||||
|
|
||||||
|
_canvas.width = _elWidth;
|
||||||
|
_canvas.height = _elHeight;
|
||||||
|
_canvas.style.width = _canvas.width + 'px';
|
||||||
|
_canvas.style.height = _canvas.height + 'px';
|
||||||
|
_canvas.className = 'rs-canvas';
|
||||||
|
_dom.appendChild( _canvas );
|
||||||
|
|
||||||
|
_ctx.fillStyle = '#444444';
|
||||||
|
_ctx.fillRect( 0, 0, _canvas.width, _canvas.height );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function _draw ( v, alarm ) {
|
||||||
|
_current += ( v - _current ) * 0.1;
|
||||||
|
_max *= 0.99;
|
||||||
|
if ( _current > _max ) _max = _current;
|
||||||
|
_ctx.drawImage( _canvas, 1, 0, _canvas.width - 1, _canvas.height, 0, 0, _canvas.width - 1, _canvas.height );
|
||||||
|
if ( alarm ) {
|
||||||
|
_ctx.drawImage( _alarmCanvas, _canvas.width - 1, _canvas.height - _current * _canvas.height / _max - _elHeight );
|
||||||
|
} else {
|
||||||
|
_ctx.drawImage( _dotCanvas, _canvas.width - 1, _canvas.height - _current * _canvas.height / _max - _elHeight );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_init();
|
||||||
|
|
||||||
|
return {
|
||||||
|
draw: _draw
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function StackGraph ( _dom, _num ) {
|
||||||
|
|
||||||
|
var _canvas = document.createElement( 'canvas' ),
|
||||||
|
_ctx = _canvas.getContext( '2d' );
|
||||||
|
|
||||||
|
function _init () {
|
||||||
|
|
||||||
|
_canvas.width = _elWidth;
|
||||||
|
_canvas.height = _elHeight * _num;
|
||||||
|
_canvas.style.width = _canvas.width + 'px';
|
||||||
|
_canvas.style.height = _canvas.height + 'px';
|
||||||
|
_canvas.className = 'rs-canvas';
|
||||||
|
_dom.appendChild( _canvas );
|
||||||
|
|
||||||
|
_ctx.fillStyle = '#444444';
|
||||||
|
_ctx.fillRect( 0, 0, _canvas.width, _canvas.height );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function _draw ( v ) {
|
||||||
|
_ctx.drawImage( _canvas, 1, 0, _canvas.width - 1, _canvas.height, 0, 0, _canvas.width - 1, _canvas.height );
|
||||||
|
var th = 0;
|
||||||
|
iterateKeys( v, function ( j ) {
|
||||||
|
var h = v[ j ] * _canvas.height;
|
||||||
|
_ctx.fillStyle = _colours[ j ];
|
||||||
|
_ctx.fillRect( _canvas.width - 1, th, 1, h );
|
||||||
|
th += h;
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
_init();
|
||||||
|
|
||||||
|
return {
|
||||||
|
draw: _draw
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function PerfCounter ( id, group ) {
|
||||||
|
|
||||||
|
var _id = id,
|
||||||
|
_time,
|
||||||
|
_value = 0,
|
||||||
|
_total = 0,
|
||||||
|
_averageValue = 0,
|
||||||
|
_accumValue = 0,
|
||||||
|
_accumStart = performance.now(),
|
||||||
|
_accumSamples = 0,
|
||||||
|
_dom = document.createElement( 'div' ),
|
||||||
|
_spanId = document.createElement( 'span' ),
|
||||||
|
_spanValue = document.createElement( 'div' ),
|
||||||
|
_spanValueText = document.createTextNode( '' ),
|
||||||
|
_def = _settings ? _settings.values[ _id.toLowerCase() ] : null,
|
||||||
|
_graph = new Graph( _dom, _id, _def ),
|
||||||
|
_started = false;
|
||||||
|
|
||||||
|
_dom.className = 'rs-counter-base';
|
||||||
|
|
||||||
|
_spanId.className = 'rs-counter-id';
|
||||||
|
_spanId.textContent = ( _def && _def.caption ) ? _def.caption : _id;
|
||||||
|
|
||||||
|
_spanValue.className = 'rs-counter-value';
|
||||||
|
_spanValue.appendChild( _spanValueText );
|
||||||
|
|
||||||
|
_dom.appendChild( _spanId );
|
||||||
|
_dom.appendChild( _spanValue );
|
||||||
|
if ( group ) group.div.appendChild( _dom );
|
||||||
|
else _div.appendChild( _dom );
|
||||||
|
|
||||||
|
_time = performance.now();
|
||||||
|
|
||||||
|
function _average ( v ) {
|
||||||
|
if ( _def && _def.average ) {
|
||||||
|
_accumValue += v;
|
||||||
|
_accumSamples++;
|
||||||
|
var t = performance.now();
|
||||||
|
if ( t - _accumStart >= ( _def.avgMs || 1000 ) ) {
|
||||||
|
_averageValue = _accumValue / _accumSamples;
|
||||||
|
_accumValue = 0;
|
||||||
|
_accumStart = t;
|
||||||
|
_accumSamples = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function _start () {
|
||||||
|
_time = performance.now();
|
||||||
|
if( _settings.userTimingAPI ) performance.mark( _id + '-start' );
|
||||||
|
_started = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _end () {
|
||||||
|
_value = performance.now() - _time;
|
||||||
|
if( _settings.userTimingAPI ) {
|
||||||
|
performance.mark( _id + '-end' );
|
||||||
|
if( _started ) {
|
||||||
|
performance.measure( _id, _id + '-start', _id + '-end' );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
_average( _value );
|
||||||
|
}
|
||||||
|
|
||||||
|
function _tick () {
|
||||||
|
_end();
|
||||||
|
_start();
|
||||||
|
}
|
||||||
|
|
||||||
|
function _draw () {
|
||||||
|
var v = ( _def && _def.average ) ? _averageValue : _value;
|
||||||
|
_spanValueText.nodeValue = Math.round( v * 100 ) / 100;
|
||||||
|
var a = ( _def && ( ( _def.below && _value < _def.below ) || ( _def.over && _value > _def.over ) ) );
|
||||||
|
_graph.draw( _value, a );
|
||||||
|
_dom.style.color = a ? '#b70000' : '#ffffff';
|
||||||
|
}
|
||||||
|
|
||||||
|
function _frame () {
|
||||||
|
var t = performance.now();
|
||||||
|
var e = t - _time;
|
||||||
|
_total++;
|
||||||
|
if ( e > 1000 ) {
|
||||||
|
if ( _def && _def.interpolate === false ) {
|
||||||
|
_value = _total;
|
||||||
|
} else {
|
||||||
|
_value = _total * 1000 / e;
|
||||||
|
}
|
||||||
|
_total = 0;
|
||||||
|
_time = t;
|
||||||
|
_average( _value );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function _set ( v ) {
|
||||||
|
_value = v;
|
||||||
|
_average( _value );
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
set: _set,
|
||||||
|
start: _start,
|
||||||
|
tick: _tick,
|
||||||
|
end: _end,
|
||||||
|
frame: _frame,
|
||||||
|
value: function () {
|
||||||
|
return _value;
|
||||||
|
},
|
||||||
|
draw: _draw
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function sample () {
|
||||||
|
|
||||||
|
var _value = 0;
|
||||||
|
|
||||||
|
function _set ( v ) {
|
||||||
|
_value = v;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
set: _set,
|
||||||
|
value: function () {
|
||||||
|
return _value;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function _perf ( idArg ) {
|
||||||
|
|
||||||
|
var id = idArg.toLowerCase();
|
||||||
|
if ( id === undefined ) id = 'default';
|
||||||
|
if ( _perfCounters[ id ] ) return _perfCounters[ id ];
|
||||||
|
|
||||||
|
var group = null;
|
||||||
|
if ( _settings && _settings.groups ) {
|
||||||
|
iterateKeys( _settings.groups, function ( j ) {
|
||||||
|
var g = _settings.groups[ parseInt( j, 10 ) ];
|
||||||
|
if ( !group && g.values.indexOf( id.toLowerCase() ) !== -1 ) {
|
||||||
|
group = g;
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
var p = new PerfCounter( id, group );
|
||||||
|
_perfCounters[ id ] = p;
|
||||||
|
return p;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function _init () {
|
||||||
|
|
||||||
|
if ( _settings.plugins ) {
|
||||||
|
if ( !_settings.values ) _settings.values = {};
|
||||||
|
if ( !_settings.groups ) _settings.groups = [];
|
||||||
|
if ( !_settings.fractions ) _settings.fractions = [];
|
||||||
|
for ( var j = 0; j < _settings.plugins.length; j++ ) {
|
||||||
|
_settings.plugins[ j ].attach( _perf );
|
||||||
|
iterateKeys( _settings.plugins[ j ].values, function ( k ) {
|
||||||
|
_settings.values[ k ] = _settings.plugins[ j ].values[ k ];
|
||||||
|
} );
|
||||||
|
_settings.groups = _settings.groups.concat( _settings.plugins[ j ].groups );
|
||||||
|
_settings.fractions = _settings.fractions.concat( _settings.plugins[ j ].fractions );
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
_settings.plugins = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
_base = document.createElement( 'div' );
|
||||||
|
_base.className = 'rs-base';
|
||||||
|
_div = document.createElement( 'div' );
|
||||||
|
_div.className = 'rs-container';
|
||||||
|
_div.style.height = 'auto';
|
||||||
|
_base.appendChild( _div );
|
||||||
|
document.body.appendChild( _base );
|
||||||
|
|
||||||
|
if ( !_settings ) return;
|
||||||
|
|
||||||
|
if ( _settings.groups ) {
|
||||||
|
iterateKeys( _settings.groups, function ( j ) {
|
||||||
|
var g = _settings.groups[ parseInt( j, 10 ) ];
|
||||||
|
var div = document.createElement( 'div' );
|
||||||
|
div.className = 'rs-group';
|
||||||
|
g.div = div;
|
||||||
|
var h1 = document.createElement( 'h1' );
|
||||||
|
h1.textContent = g.caption;
|
||||||
|
h1.addEventListener( 'click', function ( e ) {
|
||||||
|
this.classList.toggle( 'hidden' );
|
||||||
|
e.preventDefault();
|
||||||
|
}.bind( div ) );
|
||||||
|
_div.appendChild( h1 );
|
||||||
|
_div.appendChild( div );
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( _settings.fractions ) {
|
||||||
|
iterateKeys( _settings.fractions, function ( j ) {
|
||||||
|
var f = _settings.fractions[ parseInt( j, 10 ) ];
|
||||||
|
var div = document.createElement( 'div' );
|
||||||
|
div.className = 'rs-fraction';
|
||||||
|
var legend = document.createElement( 'div' );
|
||||||
|
legend.className = 'rs-legend';
|
||||||
|
|
||||||
|
var h = 0;
|
||||||
|
iterateKeys( _settings.fractions[ j ].steps, function ( k ) {
|
||||||
|
var p = document.createElement( 'p' );
|
||||||
|
p.textContent = _settings.fractions[ j ].steps[ k ];
|
||||||
|
p.style.color = _colours[ h ];
|
||||||
|
legend.appendChild( p );
|
||||||
|
h++;
|
||||||
|
} );
|
||||||
|
div.appendChild( legend );
|
||||||
|
div.style.height = h * _elHeight + 'px';
|
||||||
|
f.div = div;
|
||||||
|
var graph = new StackGraph( div, h );
|
||||||
|
f.graph = graph;
|
||||||
|
_div.appendChild( div );
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function _update () {
|
||||||
|
|
||||||
|
iterateKeys( _settings.plugins, function ( j ) {
|
||||||
|
_settings.plugins[ j ].update();
|
||||||
|
} );
|
||||||
|
|
||||||
|
iterateKeys( _perfCounters, function ( j ) {
|
||||||
|
_perfCounters[ j ].draw();
|
||||||
|
} );
|
||||||
|
|
||||||
|
if ( _settings && _settings.fractions ) {
|
||||||
|
iterateKeys( _settings.fractions, function ( j ) {
|
||||||
|
var f = _settings.fractions[ parseInt( j, 10 ) ];
|
||||||
|
var v = [];
|
||||||
|
var base = _perfCounters[ f.base.toLowerCase() ];
|
||||||
|
if ( base ) {
|
||||||
|
base = base.value();
|
||||||
|
iterateKeys( _settings.fractions[ j ].steps, function ( k ) {
|
||||||
|
var s = _settings.fractions[ j ].steps[ parseInt( k, 10 ) ].toLowerCase();
|
||||||
|
var val = _perfCounters[ s ];
|
||||||
|
if ( val ) {
|
||||||
|
v.push( val.value() / base );
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
f.graph.draw( v );
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
/*if( _height != _div.clientHeight ) {
|
||||||
|
_height = _div.clientHeight;
|
||||||
|
_base.style.height = _height + 2 * _elHeight + 'px';
|
||||||
|
console.log( _base.clientHeight );
|
||||||
|
}*/
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
_init();
|
||||||
|
|
||||||
|
return function ( id ) {
|
||||||
|
if ( id ) return _perf( id );
|
||||||
|
return {
|
||||||
|
element: _base,
|
||||||
|
update: _update
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof module === 'object') {
|
||||||
|
module.exports = window.rStats;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.glStats = function () {
|
||||||
|
|
||||||
|
var _rS = null;
|
||||||
|
|
||||||
|
var _totalDrawArraysCalls = 0,
|
||||||
|
_totalDrawElementsCalls = 0,
|
||||||
|
_totalUseProgramCalls = 0,
|
||||||
|
_totalFaces = 0,
|
||||||
|
_totalVertices = 0,
|
||||||
|
_totalPoints = 0,
|
||||||
|
_totalBindTexures = 0;
|
||||||
|
|
||||||
|
function _h ( f, c ) {
|
||||||
|
return function () {
|
||||||
|
c.apply( this, arguments );
|
||||||
|
f.apply( this, arguments );
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
WebGLRenderingContext.prototype.drawArrays = _h( WebGLRenderingContext.prototype.drawArrays, function () {
|
||||||
|
_totalDrawArraysCalls++;
|
||||||
|
if ( arguments[ 0 ] == this.POINTS ) _totalPoints += arguments[ 2 ];
|
||||||
|
else _totalVertices += arguments[ 2 ];
|
||||||
|
} );
|
||||||
|
|
||||||
|
WebGLRenderingContext.prototype.drawElements = _h( WebGLRenderingContext.prototype.drawElements, function () {
|
||||||
|
_totalDrawElementsCalls++;
|
||||||
|
_totalFaces += arguments[ 1 ] / 3;
|
||||||
|
_totalVertices += arguments[ 1 ];
|
||||||
|
} );
|
||||||
|
|
||||||
|
WebGLRenderingContext.prototype.useProgram = _h( WebGLRenderingContext.prototype.useProgram, function () {
|
||||||
|
_totalUseProgramCalls++;
|
||||||
|
} );
|
||||||
|
|
||||||
|
WebGLRenderingContext.prototype.bindTexture = _h( WebGLRenderingContext.prototype.bindTexture, function () {
|
||||||
|
_totalBindTexures++;
|
||||||
|
} );
|
||||||
|
|
||||||
|
var _values = {
|
||||||
|
allcalls: {
|
||||||
|
over: 3000,
|
||||||
|
caption: 'Calls (hook)'
|
||||||
|
},
|
||||||
|
drawelements: {
|
||||||
|
caption: 'drawElements (hook)'
|
||||||
|
},
|
||||||
|
drawarrays: {
|
||||||
|
caption: 'drawArrays (hook)'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var _groups = [ {
|
||||||
|
caption: 'WebGL',
|
||||||
|
values: [ 'allcalls', 'drawelements', 'drawarrays', 'useprogram', 'bindtexture', 'glfaces', 'glvertices', 'glpoints' ]
|
||||||
|
} ];
|
||||||
|
|
||||||
|
var _fractions = [ {
|
||||||
|
base: 'allcalls',
|
||||||
|
steps: [ 'drawelements', 'drawarrays' ]
|
||||||
|
} ];
|
||||||
|
|
||||||
|
function _update () {
|
||||||
|
_rS( 'allcalls' ).set( _totalDrawArraysCalls + _totalDrawElementsCalls );
|
||||||
|
_rS( 'drawElements' ).set( _totalDrawElementsCalls );
|
||||||
|
_rS( 'drawArrays' ).set( _totalDrawArraysCalls );
|
||||||
|
_rS( 'bindTexture' ).set( _totalBindTexures );
|
||||||
|
_rS( 'useProgram' ).set( _totalUseProgramCalls );
|
||||||
|
_rS( 'glfaces' ).set( _totalFaces );
|
||||||
|
_rS( 'glvertices' ).set( _totalVertices );
|
||||||
|
_rS( 'glpoints' ).set( _totalPoints );
|
||||||
|
}
|
||||||
|
|
||||||
|
function _start () {
|
||||||
|
_totalDrawArraysCalls = 0;
|
||||||
|
_totalDrawElementsCalls = 0;
|
||||||
|
_totalUseProgramCalls = 0;
|
||||||
|
_totalFaces = 0;
|
||||||
|
_totalVertices = 0;
|
||||||
|
_totalPoints = 0;
|
||||||
|
_totalBindTexures = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _end () {}
|
||||||
|
|
||||||
|
function _attach ( r ) {
|
||||||
|
_rS = r;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
update: _update,
|
||||||
|
start: _start,
|
||||||
|
end: _end,
|
||||||
|
attach: _attach,
|
||||||
|
values: _values,
|
||||||
|
groups: _groups,
|
||||||
|
fractions: _fractions
|
||||||
|
};
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
window.threeStats = function ( renderer ) {
|
||||||
|
|
||||||
|
var _rS = null;
|
||||||
|
|
||||||
|
var _values = {
|
||||||
|
'renderer.info.memory.geometries': {
|
||||||
|
caption: 'Geometries'
|
||||||
|
},
|
||||||
|
'renderer.info.memory.textures': {
|
||||||
|
caption: 'Textures'
|
||||||
|
},
|
||||||
|
'renderer.info.programs': {
|
||||||
|
caption: 'Programs'
|
||||||
|
},
|
||||||
|
'renderer.info.render.calls': {
|
||||||
|
caption: 'Calls'
|
||||||
|
},
|
||||||
|
'renderer.info.render.faces': {
|
||||||
|
caption: 'Faces',
|
||||||
|
over: 1000
|
||||||
|
},
|
||||||
|
'renderer.info.render.points': {
|
||||||
|
caption: 'Points'
|
||||||
|
},
|
||||||
|
'renderer.info.render.vertices': {
|
||||||
|
caption: 'Vertices'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var _groups = [ {
|
||||||
|
caption: 'Three.js - Memory',
|
||||||
|
values: [ 'renderer.info.memory.geometries', 'renderer.info.programs', 'renderer.info.memory.textures' ]
|
||||||
|
}, {
|
||||||
|
caption: 'Three.js - Render',
|
||||||
|
values: [ 'renderer.info.render.calls', 'renderer.info.render.faces', 'renderer.info.render.points', 'renderer.info.render.vertices' ]
|
||||||
|
} ];
|
||||||
|
|
||||||
|
var _fractions = [];
|
||||||
|
|
||||||
|
function _update () {
|
||||||
|
|
||||||
|
_rS( 'renderer.info.memory.geometries' ).set( renderer.info.memory.geometries );
|
||||||
|
//_rS( 'renderer.info.programs' ).set( renderer.info.programs.length );
|
||||||
|
_rS( 'renderer.info.memory.textures' ).set( renderer.info.memory.textures );
|
||||||
|
_rS( 'renderer.info.render.calls' ).set( renderer.info.render.calls );
|
||||||
|
_rS( 'renderer.info.render.faces' ).set( renderer.info.render.faces );
|
||||||
|
_rS( 'renderer.info.render.points' ).set( renderer.info.render.points );
|
||||||
|
_rS( 'renderer.info.render.vertices' ).set( renderer.info.render.vertices );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function _start () {}
|
||||||
|
|
||||||
|
function _end () {}
|
||||||
|
|
||||||
|
function _attach ( r ) {
|
||||||
|
_rS = r;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
update: _update,
|
||||||
|
start: _start,
|
||||||
|
end: _end,
|
||||||
|
attach: _attach,
|
||||||
|
values: _values,
|
||||||
|
groups: _groups,
|
||||||
|
fractions: _fractions
|
||||||
|
};
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* From https://github.com/paulirish/memory-stats.js
|
||||||
|
*/
|
||||||
|
|
||||||
|
window.BrowserStats = function () {
|
||||||
|
|
||||||
|
var _rS = null;
|
||||||
|
|
||||||
|
var _usedJSHeapSize = 0,
|
||||||
|
_totalJSHeapSize = 0;
|
||||||
|
|
||||||
|
var memory = {
|
||||||
|
usedJSHeapSize: 0,
|
||||||
|
totalJSHeapSize: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
if ( window.performance && performance.memory )
|
||||||
|
memory = performance.memory;
|
||||||
|
|
||||||
|
if ( memory.totalJSHeapSize === 0 ) {
|
||||||
|
console.warn( 'totalJSHeapSize === 0... performance.memory is only available in Chrome .' );
|
||||||
|
}
|
||||||
|
|
||||||
|
var _values = {
|
||||||
|
memory: {
|
||||||
|
caption: 'Used Memory',
|
||||||
|
average: true,
|
||||||
|
avgMs: 1000,
|
||||||
|
over: 22
|
||||||
|
},
|
||||||
|
total: {
|
||||||
|
caption: 'Total Memory'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var _groups = [ {
|
||||||
|
caption: 'Browser',
|
||||||
|
values: [ 'memory', 'total' ]
|
||||||
|
} ];
|
||||||
|
|
||||||
|
var _fractions = [ {
|
||||||
|
base: 'total',
|
||||||
|
steps: [ 'memory' ]
|
||||||
|
} ];
|
||||||
|
|
||||||
|
var log1024 = Math.log( 1024 );
|
||||||
|
|
||||||
|
function _size ( v ) {
|
||||||
|
|
||||||
|
var precision = 100; //Math.pow(10, 2);
|
||||||
|
var i = Math.floor( Math.log( v ) / log1024 );
|
||||||
|
if( v === 0 ) i = 1;
|
||||||
|
return Math.round( v * precision / Math.pow( 1024, i ) ) / precision; // + ' ' + sizes[i];
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function _update () {
|
||||||
|
_usedJSHeapSize = _size( memory.usedJSHeapSize );
|
||||||
|
_totalJSHeapSize = _size( memory.totalJSHeapSize );
|
||||||
|
|
||||||
|
_rS( 'memory' ).set( _usedJSHeapSize );
|
||||||
|
_rS( 'total' ).set( _totalJSHeapSize );
|
||||||
|
}
|
||||||
|
|
||||||
|
function _start () {
|
||||||
|
_usedJSHeapSize = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _end () {}
|
||||||
|
|
||||||
|
function _attach ( r ) {
|
||||||
|
_rS = r;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
update: _update,
|
||||||
|
start: _start,
|
||||||
|
end: _end,
|
||||||
|
attach: _attach,
|
||||||
|
values: _values,
|
||||||
|
groups: _groups,
|
||||||
|
fractions: _fractions
|
||||||
|
};
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof module === 'object') {
|
||||||
|
module.exports = {
|
||||||
|
glStats: window.glStats,
|
||||||
|
threeStats: window.threeStats,
|
||||||
|
BrowserStats: window.BrowserStats
|
||||||
|
};
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 636 KiB |
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Three.js Webpack ES6 Boilerplate</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="/assets/css/app.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="content">
|
||||||
|
<div id="appContainer" class="main">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="/assets/js/rStats.js"></script>
|
||||||
|
<script src="/assets/js/dat.gui.min.js"></script>
|
||||||
|
<script src="/assets/js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
{
|
||||||
|
"name": "threejs-es6-webpack-boilerplate",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Boilerplate for Three.js projects set up with Babel for ES6 and compiled with webpack",
|
||||||
|
"author": "Paul Graffam",
|
||||||
|
"main": "app.js",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "run-p dev:sass webpack-server webpack-watch",
|
||||||
|
"build": "run-s prebuild build:dir build:js build:sass",
|
||||||
|
"prebuild": "run-p clean lint",
|
||||||
|
"clean": "rimraf build",
|
||||||
|
"lint": "eslint src/js/; exit 0",
|
||||||
|
"webpack-server": "set NODE_ENV=0&& webpack-dev-server --hot --inline --open",
|
||||||
|
"webpack-watch": "set NODE_ENV=0&& webpack --progress --colors --watch --cache",
|
||||||
|
"dev:sass": "node-sass -w src/css/app.scss -o src/public/assets/css/",
|
||||||
|
"dev:js": "set NODE_ENV=0&& webpack",
|
||||||
|
"build:dir": "copyfiles -u 1 src/public/**/* build/",
|
||||||
|
"build:sass": "node-sass --output-style compressed src/css/ -o build/public/assets/css/",
|
||||||
|
"build:js": "set NODE_ENV=1&& webpack"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"es6-promise": "^3.2.1",
|
||||||
|
"normalize.css": "^4.2.0",
|
||||||
|
"three": "^0.79.0",
|
||||||
|
"tween.js": "16.2.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"babel-core": "^6.13.2",
|
||||||
|
"babel-loader": "^6.2.5",
|
||||||
|
"babel-preset-es2015": "^6.13.2",
|
||||||
|
"copyfiles": "^1.0.0",
|
||||||
|
"eslint": "^3.4.0",
|
||||||
|
"file-loader": "^0.9.0",
|
||||||
|
"node-sass": "^3.8.0",
|
||||||
|
"npm-run-all": "^3.0.0",
|
||||||
|
"rimraf": "^2.5.4",
|
||||||
|
"webpack": "^1.13.2",
|
||||||
|
"webpack-dev-middleware": "^1.6.1",
|
||||||
|
"webpack-dev-server": "^1.15.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": "5.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,585 @@
|
||||||
|
/* ==========================================================================
|
||||||
|
Normalize.scss settings
|
||||||
|
========================================================================== */
|
||||||
|
/**
|
||||||
|
* Includes legacy browser support IE6/7
|
||||||
|
*
|
||||||
|
* Set to false if you want to drop support for IE6 and IE7
|
||||||
|
*/
|
||||||
|
|
||||||
|
$legacy_browser_support: false !default;
|
||||||
|
|
||||||
|
/* Base
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Set default font family to sans-serif.
|
||||||
|
* 2. Prevent iOS and IE text size adjust after device orientation change,
|
||||||
|
* without disabling user zoom.
|
||||||
|
* 3. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
|
||||||
|
* `em` units.
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: sans-serif; /* 1 */
|
||||||
|
-ms-text-size-adjust: 100%; /* 2 */
|
||||||
|
-webkit-text-size-adjust: 100%; /* 2 */
|
||||||
|
@if $legacy_browser_support {
|
||||||
|
*font-size: 100%; /* 3 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove default margin.
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* HTML5 display definitions
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct `block` display not defined for any HTML5 element in IE 8/9.
|
||||||
|
* Correct `block` display not defined for `details` or `summary` in IE 10/11
|
||||||
|
* and Firefox.
|
||||||
|
* Correct `block` display not defined for `main` in IE 11.
|
||||||
|
*/
|
||||||
|
|
||||||
|
article,
|
||||||
|
aside,
|
||||||
|
details,
|
||||||
|
figcaption,
|
||||||
|
figure,
|
||||||
|
footer,
|
||||||
|
header,
|
||||||
|
hgroup,
|
||||||
|
main,
|
||||||
|
menu,
|
||||||
|
nav,
|
||||||
|
section,
|
||||||
|
summary {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
|
||||||
|
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||||
|
*/
|
||||||
|
|
||||||
|
audio,
|
||||||
|
canvas,
|
||||||
|
progress,
|
||||||
|
video {
|
||||||
|
display: inline-block; /* 1 */
|
||||||
|
vertical-align: baseline; /* 2 */
|
||||||
|
@if $legacy_browser_support {
|
||||||
|
*display: inline;
|
||||||
|
*zoom: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prevents modern browsers from displaying `audio` without controls.
|
||||||
|
* Remove excess height in iOS 5 devices.
|
||||||
|
*/
|
||||||
|
|
||||||
|
audio:not([controls]) {
|
||||||
|
display: none;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address `[hidden]` styling not present in IE 8/9/10.
|
||||||
|
* Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[hidden],
|
||||||
|
template {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Links
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the gray background color from active links in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Improve readability of focused elements when they are also in an
|
||||||
|
* active/hover state.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a {
|
||||||
|
&:active, &:hover {
|
||||||
|
outline: 0;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text-level semantics
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
border-bottom: 1px dotted;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $legacy_browser_support {
|
||||||
|
blockquote {
|
||||||
|
margin: 1em 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address styling not present in Safari and Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
dfn {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address variable `h1` font-size and margin within `section` and `article`
|
||||||
|
* contexts in Firefox 4+, Safari, and Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0.67em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $legacy_browser_support {
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
margin: 0.83em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.17em;
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 1em;
|
||||||
|
margin: 1.33em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 0.83em;
|
||||||
|
margin: 1.67em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: 0.67em;
|
||||||
|
margin: 2.33em 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Addresses styling not present in IE 8/9.
|
||||||
|
*/
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background: #ff0;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $legacy_browser_support {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Addresses margins set differently in IE 6/7.
|
||||||
|
*/
|
||||||
|
|
||||||
|
p,
|
||||||
|
pre {
|
||||||
|
*margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Addresses CSS quotes not supported in IE 6/7.
|
||||||
|
*/
|
||||||
|
|
||||||
|
q {
|
||||||
|
*quotes: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Addresses `quotes` property not supported in Safari 4.
|
||||||
|
*/
|
||||||
|
|
||||||
|
q:before,
|
||||||
|
q:after {
|
||||||
|
content: '';
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address inconsistent and variable font size in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $legacy_browser_support {
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Lists
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Addresses margins set differently in IE 6/7.
|
||||||
|
*/
|
||||||
|
|
||||||
|
dl,
|
||||||
|
menu,
|
||||||
|
ol,
|
||||||
|
ul {
|
||||||
|
*margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
*margin: 0 0 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Addresses paddings set differently in IE 6/7.
|
||||||
|
*/
|
||||||
|
|
||||||
|
menu,
|
||||||
|
ol,
|
||||||
|
ul {
|
||||||
|
*padding: 0 0 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Corrects list images handled incorrectly in IE 7.
|
||||||
|
*/
|
||||||
|
|
||||||
|
nav ul,
|
||||||
|
nav ol {
|
||||||
|
*list-style: none;
|
||||||
|
*list-style-image: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Embedded content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Remove border when inside `a` element in IE 8/9/10.
|
||||||
|
* 2. Improves image quality when scaled in IE 7.
|
||||||
|
*/
|
||||||
|
|
||||||
|
img {
|
||||||
|
border: 0;
|
||||||
|
@if $legacy_browser_support {
|
||||||
|
*-ms-interpolation-mode: bicubic; /* 2 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct overflow not hidden in IE 9/10/11.
|
||||||
|
*/
|
||||||
|
|
||||||
|
svg:not(:root) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grouping content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address margin not present in IE 8/9 and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
figure {
|
||||||
|
margin: 1em 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address differences between Firefox and other browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
hr {
|
||||||
|
box-sizing: content-box;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Contain overflow in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
pre {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address odd `em`-unit font size rendering in all browsers.
|
||||||
|
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
pre,
|
||||||
|
samp {
|
||||||
|
font-family: monospace, monospace;
|
||||||
|
@if $legacy_browser_support {
|
||||||
|
_font-family: 'courier new', monospace;
|
||||||
|
}
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forms
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||||
|
* styling of `select`, unless a `border` property is set.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct color not being inherited.
|
||||||
|
* Known issue: affects color of disabled elements.
|
||||||
|
* 2. Correct font properties not being inherited.
|
||||||
|
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||||
|
* 4. Improves appearance and consistency in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
optgroup,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
color: inherit; /* 1 */
|
||||||
|
font: inherit; /* 2 */
|
||||||
|
margin: 0; /* 3 */
|
||||||
|
@if $legacy_browser_support {
|
||||||
|
vertical-align: baseline; /* 3 */
|
||||||
|
*vertical-align: middle; /* 3 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address `overflow` set to `hidden` in IE 8/9/10/11.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||||
|
* All other form control elements do not inherit `text-transform` values.
|
||||||
|
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
||||||
|
* Correct `select` style inheritance in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
select {
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||||
|
* and `video` controls.
|
||||||
|
* 2. Correct inability to style clickable `input` types in iOS.
|
||||||
|
* 3. Improve usability and consistency of cursor style between image-type
|
||||||
|
* `input` and others.
|
||||||
|
* 4. Removes inner spacing in IE 7 without affecting normal text inputs.
|
||||||
|
* Known issue: inner spacing remains in IE 6.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
html input[type="button"], /* 1 */
|
||||||
|
input[type="reset"],
|
||||||
|
input[type="submit"] {
|
||||||
|
-webkit-appearance: button; /* 2 */
|
||||||
|
cursor: pointer; /* 3 */
|
||||||
|
@if $legacy_browser_support {
|
||||||
|
*overflow: visible; /* 4 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Re-set default cursor for disabled elements.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button[disabled],
|
||||||
|
html input[disabled] {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove inner padding and border in Firefox 4+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
input::-moz-focus-inner {
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||||
|
* the UA stylesheet.
|
||||||
|
*/
|
||||||
|
|
||||||
|
input {
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||||
|
* 2. Remove excess padding in IE 8/9/10.
|
||||||
|
* Known issue: excess padding remains in IE 6.
|
||||||
|
*/
|
||||||
|
|
||||||
|
input[type="checkbox"],
|
||||||
|
input[type="radio"] {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
padding: 0; /* 2 */
|
||||||
|
@if $legacy_browser_support {
|
||||||
|
*height: 13px; /* 3 */
|
||||||
|
*width: 13px; /* 3 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||||
|
* `font-size` values of the `input`, it causes the cursor style of the
|
||||||
|
* decrement button to change from `default` to `text`.
|
||||||
|
*/
|
||||||
|
|
||||||
|
input[type="number"]::-webkit-inner-spin-button,
|
||||||
|
input[type="number"]::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
|
||||||
|
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
input[type="search"] {
|
||||||
|
-webkit-appearance: textfield; /* 1 */
|
||||||
|
box-sizing: content-box; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||||
|
* Safari (but not Chrome) clips the cancel button when the search input has
|
||||||
|
* padding (and `textfield` appearance).
|
||||||
|
*/
|
||||||
|
|
||||||
|
input[type="search"]::-webkit-search-cancel-button,
|
||||||
|
input[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Define consistent border, margin, and padding.
|
||||||
|
*/
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
border: 1px solid #c0c0c0;
|
||||||
|
margin: 0 2px;
|
||||||
|
padding: 0.35em 0.625em 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct `color` not being inherited in IE 8/9/10/11.
|
||||||
|
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||||
|
* 3. Corrects text not wrapping in Firefox 3.
|
||||||
|
* 4. Corrects alignment displayed oddly in IE 6/7.
|
||||||
|
*/
|
||||||
|
|
||||||
|
legend {
|
||||||
|
border: 0; /* 1 */
|
||||||
|
padding: 0; /* 2 */
|
||||||
|
@if $legacy_browser_support {
|
||||||
|
white-space: normal; /* 3 */
|
||||||
|
*margin-left: -7px; /* 4 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove default vertical scrollbar in IE 8/9/10/11.
|
||||||
|
*/
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Don't inherit the `font-weight` (applied by a rule above).
|
||||||
|
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||||
|
*/
|
||||||
|
|
||||||
|
optgroup {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tables
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove most spacing between table cells.
|
||||||
|
*/
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import Config from './data/config';
|
||||||
|
import Detector from './utils/detector';
|
||||||
|
import Main from './app/main';
|
||||||
|
|
||||||
|
// verify environment.
|
||||||
|
if(__ENV__ == 'dev') {
|
||||||
|
console.log('----- RUNNING IN DEV ENVIRONMENT! -----');
|
||||||
|
|
||||||
|
Config.isDev = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
if(!Detector.webgl) {
|
||||||
|
Detector.addGetWebGLMessage();
|
||||||
|
} else {
|
||||||
|
const container = document.getElementById('appContainer');
|
||||||
|
new Main(container);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onload = init;
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
import THREE from 'three';
|
||||||
|
|
||||||
|
export default class Animation {
|
||||||
|
constructor(obj, clip) {
|
||||||
|
this.obj = obj;
|
||||||
|
|
||||||
|
this.mixer = new THREE.AnimationMixer(this.obj);
|
||||||
|
|
||||||
|
this.playClip(clip);
|
||||||
|
}
|
||||||
|
|
||||||
|
playClip(clip) {
|
||||||
|
this.action = this.mixer.clipAction(clip);
|
||||||
|
|
||||||
|
this.action.play();
|
||||||
|
}
|
||||||
|
|
||||||
|
update(delta) {
|
||||||
|
if(this.mixer) {
|
||||||
|
this.mixer.update(delta);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
import THREE from 'three';
|
||||||
|
|
||||||
|
import Config from './../data/config';
|
||||||
|
|
||||||
|
export default class Camera {
|
||||||
|
constructor(renderer) {
|
||||||
|
const width = renderer.domElement.width;
|
||||||
|
const height = renderer.domElement.height;
|
||||||
|
|
||||||
|
this.threeCamera = new THREE.PerspectiveCamera(Config.camera.fov, width / height, Config.camera.near, Config.camera.far);
|
||||||
|
this.threeCamera.position.set(Config.camera.posX, Config.camera.posY, Config.camera.posZ);
|
||||||
|
|
||||||
|
this.updateSize(renderer);
|
||||||
|
|
||||||
|
// listeners
|
||||||
|
window.addEventListener('resize', () => this.updateSize(renderer), false);
|
||||||
|
}
|
||||||
|
|
||||||
|
updateSize(renderer) {
|
||||||
|
this.threeCamera.aspect = (renderer.domElement.width * Config.dpr) / (renderer.domElement.height * Config.dpr);
|
||||||
|
this.threeCamera.updateProjectionMatrix();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
import THREE from 'three';
|
||||||
|
|
||||||
|
import OrbitControls from '../utils/orbitControls';
|
||||||
|
import Config from './../data/config';
|
||||||
|
|
||||||
|
export default class Controls {
|
||||||
|
constructor(camera, container) {
|
||||||
|
const orbitControls = new OrbitControls(THREE);
|
||||||
|
this.threeControls = new orbitControls(camera, container);
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
this.threeControls.target.set(Config.controls.target.x, Config.controls.target.y, Config.controls.target.z);
|
||||||
|
this.threeControls.autoRotate = Config.controls.autoRotate;
|
||||||
|
this.threeControls.autoRotateSpeed = Config.controls.autoRotateSpeed;
|
||||||
|
this.threeControls.rotateSpeed = Config.controls.rotateSpeed;
|
||||||
|
this.threeControls.zoomSpeed = Config.controls.zoomSpeed;
|
||||||
|
this.threeControls.minDistance = Config.controls.minDistance;
|
||||||
|
this.threeControls.maxDistance = Config.controls.maxDistance;
|
||||||
|
this.threeControls.minPolarAngle = Config.controls.minPolarAngle;
|
||||||
|
this.threeControls.maxPolarAngle = Config.controls.maxPolarAngle;
|
||||||
|
this.threeControls.enableDamping = Config.controls.enableDamping;
|
||||||
|
this.threeControls.enableZoom = Config.controls.enableZoom;
|
||||||
|
this.threeControls.dampingFactor = Config.controls.dampingFactor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
import THREE from 'three';
|
||||||
|
|
||||||
|
import Config from '../data/config';
|
||||||
|
|
||||||
|
export default class Geometry {
|
||||||
|
constructor(scene) {
|
||||||
|
this.scene = scene;
|
||||||
|
this.geo = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
make(type) {
|
||||||
|
if(type == 'plane') {
|
||||||
|
return (width, height, widthSegments = 1, heightSegments = 1) => {
|
||||||
|
this.geo = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
place(position, rotation) {
|
||||||
|
const material = new THREE.MeshStandardMaterial({ color: 0xCCCCCC, side: THREE.DoubleSide });
|
||||||
|
const mesh = new THREE.Mesh(this.geo, material);
|
||||||
|
|
||||||
|
mesh.position.set(...position);
|
||||||
|
mesh.rotation.set(...rotation);
|
||||||
|
|
||||||
|
if(Config.shadow.enabled) {
|
||||||
|
mesh.receiveShadow = true;
|
||||||
|
mesh.castShadow = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.scene.add(mesh);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,369 @@
|
||||||
|
import Config from './../data/config';
|
||||||
|
|
||||||
|
export default class GUI {
|
||||||
|
constructor(main, mesh) {
|
||||||
|
let gui = new dat.GUI();
|
||||||
|
|
||||||
|
this.camera = main.camera.threeCamera;
|
||||||
|
this.controls = main.controls.threeControls;
|
||||||
|
this.light = main.light;
|
||||||
|
|
||||||
|
/* Global */
|
||||||
|
//gui.close();
|
||||||
|
|
||||||
|
/* Camera */
|
||||||
|
let cameraFolder = gui.addFolder('Camera');
|
||||||
|
let cameraFOVGui = cameraFolder.add(Config.camera, 'fov', 0, 180).name('Camera FOV');
|
||||||
|
cameraFOVGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
|
this.camera.fov = value;
|
||||||
|
});
|
||||||
|
cameraFOVGui.onFinishChange((value) => {
|
||||||
|
this.camera.updateProjectionMatrix();
|
||||||
|
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
});
|
||||||
|
let cameraAspectGui = cameraFolder.add(Config.camera, 'aspect', 0, 4).name('Camera Aspect');
|
||||||
|
cameraAspectGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
|
this.camera.aspect = value;
|
||||||
|
});
|
||||||
|
cameraAspectGui.onFinishChange((value) => {
|
||||||
|
this.camera.updateProjectionMatrix();
|
||||||
|
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
});
|
||||||
|
let cameraFogColorGui = cameraFolder.addColor(Config.fog, 'color').name('Fog Color');
|
||||||
|
cameraFogColorGui.onChange((value) => {
|
||||||
|
main.scene.fog.color.setHex(value);
|
||||||
|
});
|
||||||
|
let cameraFogNearGui = cameraFolder.add(Config.fog, 'near', 0.000, 0.010).name('Fog Near');
|
||||||
|
cameraFogNearGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
|
main.scene.fog.density = value;
|
||||||
|
});
|
||||||
|
cameraFogNearGui.onFinishChange((value) => {
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/* Controls */
|
||||||
|
let controlsFolder = gui.addFolder('Controls');
|
||||||
|
controlsFolder.add(Config.controls, 'autoRotate').name('Auto Rotate').onChange((value) => {
|
||||||
|
this.controls.autoRotate = value;
|
||||||
|
});
|
||||||
|
let controlsAutoRotateSpeedGui = controlsFolder.add(Config.controls, 'autoRotateSpeed', -1, 1).name('Rotation Speed');
|
||||||
|
controlsAutoRotateSpeedGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
this.controls.autoRotateSpeed = value;
|
||||||
|
});
|
||||||
|
controlsAutoRotateSpeedGui.onFinishChange((value) => {
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/* Mesh */
|
||||||
|
let meshFolder = gui.addFolder('Mesh');
|
||||||
|
meshFolder.add(Config.mesh, 'translucent', true).name('Translucent').onChange((value) => {
|
||||||
|
if(value) {
|
||||||
|
mesh.material.transparent = true;
|
||||||
|
mesh.material.opacity = 0.5;
|
||||||
|
} else {
|
||||||
|
mesh.material.opacity = 1.0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
meshFolder.add(Config.mesh, 'wireframe', true).name('Wireframe').onChange((value) => {
|
||||||
|
mesh.material.wireframe = value;
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/* Lights */
|
||||||
|
// Ambient Light
|
||||||
|
let ambientLightFolder = gui.addFolder('Ambient Light');
|
||||||
|
ambientLightFolder.add(Config.ambientLight, 'enabled').name('Enabled').onChange((value) => {
|
||||||
|
this.light.ambientLight.visible = value;
|
||||||
|
});
|
||||||
|
ambientLightFolder.addColor(Config.ambientLight, 'color').name('Color').onChange((value) => {
|
||||||
|
this.light.ambientLight.color.setHex(value);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// Directional Light
|
||||||
|
let directionalLightFolder = gui.addFolder('Directional Light');
|
||||||
|
directionalLightFolder.add(Config.directionalLight, 'enabled').name('Enabled').onChange((value) => {
|
||||||
|
this.light.directionalLight.visible = value;
|
||||||
|
});
|
||||||
|
directionalLightFolder.addColor(Config.directionalLight, 'color').name('Color').onChange((value) => {
|
||||||
|
this.light.directionalLight.color.setHex(value);
|
||||||
|
});
|
||||||
|
let directionalLightIntensityGui = directionalLightFolder.add(Config.directionalLight, 'intensity', 0, 2).name('Intensity');
|
||||||
|
directionalLightIntensityGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
|
this.light.directionalLight.intensity = value;
|
||||||
|
});
|
||||||
|
directionalLightIntensityGui.onFinishChange((value) => {
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
});
|
||||||
|
let directionalLightPositionXGui = directionalLightFolder.add(Config.directionalLight, 'x', -1000, 1000).name('Position X');
|
||||||
|
directionalLightPositionXGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
|
this.light.directionalLight.position.x = value;
|
||||||
|
});
|
||||||
|
directionalLightPositionXGui.onFinishChange((value) => {
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
});
|
||||||
|
let directionalLightPositionYGui = directionalLightFolder.add(Config.directionalLight, 'y', -1000, 1000).name('Position Y');
|
||||||
|
directionalLightPositionYGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
|
this.light.directionalLight.position.y = value;
|
||||||
|
});
|
||||||
|
directionalLightPositionYGui.onFinishChange((value) => {
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
});
|
||||||
|
let directionalLightPositionZGui = directionalLightFolder.add(Config.directionalLight, 'z', -1000, 1000).name('Position Z');
|
||||||
|
directionalLightPositionZGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
|
this.light.directionalLight.position.z = value;
|
||||||
|
});
|
||||||
|
directionalLightPositionZGui.onFinishChange((value) => {
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Shadow Map
|
||||||
|
let shadowFolder = gui.addFolder('Shadow Map');
|
||||||
|
shadowFolder.add(Config.shadow, 'enabled').name('Enabled').onChange((value) => {
|
||||||
|
this.light.directionalLight.castShadow = value;
|
||||||
|
});
|
||||||
|
shadowFolder.add(Config.shadow, 'helperEnabled').name('Helper Enabled').onChange((value) => {
|
||||||
|
this.light.directionalLightHelper.visible = value;
|
||||||
|
});
|
||||||
|
let shadowNearGui = shadowFolder.add(Config.shadow, 'near', 0, 100).name('Near');
|
||||||
|
shadowNearGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
|
this.light.directionalLight.shadow.camera.near = value;
|
||||||
|
});
|
||||||
|
shadowNearGui.onFinishChange((value) => {
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
this.light.directionalLight.shadow.map.dispose();
|
||||||
|
this.light.directionalLight.shadow.map = null;
|
||||||
|
this.light.directionalLightHelper.update();
|
||||||
|
});
|
||||||
|
let shadowFarGui = shadowFolder.add(Config.shadow, 'far', 0, 1200).name('Far');
|
||||||
|
shadowFarGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
|
this.light.directionalLight.shadow.camera.far = value;
|
||||||
|
});
|
||||||
|
shadowFarGui.onFinishChange((value) => {
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
this.light.directionalLight.shadow.map.dispose();
|
||||||
|
this.light.directionalLight.shadow.map = null;
|
||||||
|
this.light.directionalLightHelper.update();
|
||||||
|
});
|
||||||
|
let shadowTopGui = shadowFolder.add(Config.shadow, 'top', -400, 400).name('Top');
|
||||||
|
shadowTopGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
|
this.light.directionalLight.shadow.camera.top = value;
|
||||||
|
});
|
||||||
|
shadowTopGui.onFinishChange((value) => {
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
this.light.directionalLight.shadow.map.dispose();
|
||||||
|
this.light.directionalLight.shadow.map = null;
|
||||||
|
this.light.directionalLightHelper.update();
|
||||||
|
});
|
||||||
|
let shadowRightGui = shadowFolder.add(Config.shadow, 'right', -400, 400).name('Right');
|
||||||
|
shadowRightGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
|
this.light.directionalLight.shadow.camera.right = value;
|
||||||
|
});
|
||||||
|
shadowRightGui.onFinishChange((value) => {
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
this.light.directionalLight.shadow.map.dispose();
|
||||||
|
this.light.directionalLight.shadow.map = null;
|
||||||
|
this.light.directionalLightHelper.update();
|
||||||
|
});
|
||||||
|
let shadowBottomGui = shadowFolder.add(Config.shadow, 'bottom', -400, 400).name('Bottom');
|
||||||
|
shadowBottomGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
|
this.light.directionalLight.shadow.camera.bottom = value;
|
||||||
|
});
|
||||||
|
shadowBottomGui.onFinishChange((value) => {
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
this.light.directionalLight.shadow.map.dispose();
|
||||||
|
this.light.directionalLight.shadow.map = null;
|
||||||
|
this.light.directionalLightHelper.update();
|
||||||
|
});
|
||||||
|
let shadowLeftGui = shadowFolder.add(Config.shadow, 'left', -400, 400).name('Left');
|
||||||
|
shadowLeftGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
|
this.light.directionalLight.shadow.camera.left = value;
|
||||||
|
});
|
||||||
|
shadowLeftGui.onFinishChange((value) => {
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
this.light.directionalLight.shadow.map.dispose();
|
||||||
|
this.light.directionalLight.shadow.map = null;
|
||||||
|
this.light.directionalLightHelper.update();
|
||||||
|
});
|
||||||
|
let shadowBiasGui = shadowFolder.add(Config.shadow, 'bias', -0.000010, 1).name('Bias');
|
||||||
|
shadowBiasGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
|
this.light.directionalLight.shadow.bias = value;
|
||||||
|
});
|
||||||
|
shadowBiasGui.onFinishChange((value) => {
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
this.light.directionalLight.shadow.map.dispose();
|
||||||
|
this.light.directionalLight.shadow.map = null;
|
||||||
|
this.light.directionalLightHelper.update();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// Point Light
|
||||||
|
let pointLightFolder = gui.addFolder('Point Light');
|
||||||
|
pointLightFolder.add(Config.pointLight, 'enabled').name('Enabled').onChange((value) => {
|
||||||
|
this.light.pointLight.visible = value;
|
||||||
|
});
|
||||||
|
pointLightFolder.addColor(Config.pointLight, 'color').name('Color').onChange((value) => {
|
||||||
|
this.light.pointLight.color.setHex(value);
|
||||||
|
});
|
||||||
|
let pointLightIntensityGui = pointLightFolder.add(Config.pointLight, 'intensity', 0, 2).name('Intensity');
|
||||||
|
pointLightIntensityGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
|
this.light.pointLight.intensity = value;
|
||||||
|
});
|
||||||
|
pointLightIntensityGui.onFinishChange((value) => {
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
});
|
||||||
|
let pointLightDistanceGui = pointLightFolder.add(Config.pointLight, 'distance', 0, 1000).name('Distance');
|
||||||
|
pointLightDistanceGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
|
this.light.pointLight.distance = value;
|
||||||
|
});
|
||||||
|
pointLightDistanceGui.onFinishChange((value) => {
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
});
|
||||||
|
let pointLightPositionXGui = pointLightFolder.add(Config.pointLight, 'x', -1000, 1000).name('Position X');
|
||||||
|
pointLightPositionXGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
|
this.light.pointLight.position.x = value;
|
||||||
|
});
|
||||||
|
pointLightPositionXGui.onFinishChange((value) => {
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
});
|
||||||
|
let pointLightPositionYGui = pointLightFolder.add(Config.pointLight, 'y', -1000, 1000).name('Position Y');
|
||||||
|
pointLightPositionYGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
|
this.light.pointLight.position.y = value;
|
||||||
|
});
|
||||||
|
pointLightPositionYGui.onFinishChange((value) => {
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
});
|
||||||
|
let pointLightPositionZGui = pointLightFolder.add(Config.pointLight, 'z', -1000, 1000).name('Position Z');
|
||||||
|
pointLightPositionZGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
|
this.light.pointLight.position.z = value;
|
||||||
|
});
|
||||||
|
pointLightPositionZGui.onFinishChange((value) => {
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// Hemi Light
|
||||||
|
let hemiLightFolder = gui.addFolder('Hemi Light');
|
||||||
|
hemiLightFolder.add(Config.hemiLight, 'enabled').name('Enabled').onChange((value) => {
|
||||||
|
this.light.hemiLight.visible = value;
|
||||||
|
});
|
||||||
|
hemiLightFolder.addColor(Config.hemiLight, 'color').name('Color').onChange((value) => {
|
||||||
|
this.light.hemiLight.color.setHex(value);
|
||||||
|
});
|
||||||
|
hemiLightFolder.addColor(Config.hemiLight, 'groundColor').name('ground Color').onChange((value) => {
|
||||||
|
this.light.hemiLight.groundColor.setHex(value);
|
||||||
|
});
|
||||||
|
let hemiLightIntensityGui = hemiLightFolder.add(Config.hemiLight, 'intensity', 0, 2).name('Intensity');
|
||||||
|
hemiLightIntensityGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
|
this.light.hemiLight.intensity = value;
|
||||||
|
});
|
||||||
|
hemiLightIntensityGui.onFinishChange((value) => {
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
});
|
||||||
|
let hemiLightPositionXGui = hemiLightFolder.add(Config.hemiLight, 'x', -1000, 1000).name('Position X');
|
||||||
|
hemiLightPositionXGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
|
this.light.hemiLight.position.x = value;
|
||||||
|
});
|
||||||
|
hemiLightPositionXGui.onFinishChange((value) => {
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
});
|
||||||
|
let hemiLightPositionYGui = hemiLightFolder.add(Config.hemiLight, 'y', -500, 1000).name('Position Y');
|
||||||
|
hemiLightPositionYGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
|
this.light.hemiLight.position.y = value;
|
||||||
|
});
|
||||||
|
hemiLightPositionYGui.onFinishChange((value) => {
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
});
|
||||||
|
let hemiLightPositionZGui = hemiLightFolder.add(Config.hemiLight, 'z', -1000, 1000).name('Position Z');
|
||||||
|
hemiLightPositionZGui.onChange((value) => {
|
||||||
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
|
this.light.hemiLight.position.z = value;
|
||||||
|
});
|
||||||
|
hemiLightPositionZGui.onFinishChange((value) => {
|
||||||
|
this.controls.enableRotate = true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
handleColorChange(color) {
|
||||||
|
return (value) => {
|
||||||
|
if(typeof value === 'string') {
|
||||||
|
value = value.replace('#', '0x');
|
||||||
|
}
|
||||||
|
|
||||||
|
color.setHex(value);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
needsUpdate(material, geometry) {
|
||||||
|
return function() {
|
||||||
|
material.shading = +material.shading; //Ensure number
|
||||||
|
material.vertexColors = +material.vertexColors; //Ensure number
|
||||||
|
material.side = +material.side; //Ensure number
|
||||||
|
material.needsUpdate = true;
|
||||||
|
geometry.verticesNeedUpdate = true;
|
||||||
|
geometry.normalsNeedUpdate = true;
|
||||||
|
geometry.colorsNeedUpdate = true;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
updateTexture(material, materialKey, textures) {
|
||||||
|
return function(key) {
|
||||||
|
material[materialKey] = textures[key];
|
||||||
|
material.needsUpdate = true;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
update() {
|
||||||
|
this.needsUpdate(mesh.material, mesh.geometry);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
import THREE from 'three';
|
||||||
|
|
||||||
|
export default class Helper {
|
||||||
|
constructor(scene, mesh) {
|
||||||
|
let wireframe = new THREE.WireframeGeometry(mesh.geometry);
|
||||||
|
let wireLine = new THREE.LineSegments(wireframe);
|
||||||
|
wireLine.material.depthTest = false;
|
||||||
|
wireLine.material.opacity = 0.25;
|
||||||
|
wireLine.material.transparent = true;
|
||||||
|
mesh.add(wireLine);
|
||||||
|
|
||||||
|
let edges = new THREE.EdgesGeometry(mesh.geometry);
|
||||||
|
let edgesLine = new THREE.LineSegments(edges);
|
||||||
|
edgesLine.material.depthTest = false;
|
||||||
|
edgesLine.material.opacity = 0.25;
|
||||||
|
edgesLine.material.transparent = true;
|
||||||
|
mesh.add(edgesLine);
|
||||||
|
|
||||||
|
scene.add(new THREE.BoxHelper(mesh));
|
||||||
|
scene.add(new THREE.FaceNormalsHelper(mesh, 2));
|
||||||
|
scene.add(new THREE.VertexNormalsHelper(mesh, 2));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
import THREE from 'three';
|
||||||
|
|
||||||
|
import Keyboard from './../utils/keyboard';
|
||||||
|
import Helpers from './../utils/helpers';
|
||||||
|
import Config from './../data/config';
|
||||||
|
|
||||||
|
export default class Interaction {
|
||||||
|
constructor(renderer, scene, camera, controls) {
|
||||||
|
this.renderer = renderer;
|
||||||
|
this.scene = scene;
|
||||||
|
this.camera = camera;
|
||||||
|
this.controls = controls;
|
||||||
|
|
||||||
|
this.keyboard = new Keyboard();
|
||||||
|
|
||||||
|
// listeners
|
||||||
|
// mouse events
|
||||||
|
this.renderer.domElement.addEventListener('mouseup', (event) => this.onMouseUp(event), false);
|
||||||
|
this.renderer.domElement.addEventListener('mousemove', (event) => Helpers.throttle(this.onMouseMove(event), 250), false);
|
||||||
|
this.renderer.domElement.addEventListener('mouseenter', (event) => this.onMouseEnter(event), false);
|
||||||
|
this.renderer.domElement.addEventListener('mouseleave', (event) => this.onMouseLeave(event), false);
|
||||||
|
this.renderer.domElement.addEventListener('mouseover', (event) => this.onMouseOver(event), false);
|
||||||
|
|
||||||
|
// keyboard events
|
||||||
|
this.keyboard.domElement.addEventListener('keydown', (event) => {
|
||||||
|
if(event.repeat) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if(this.keyboard.eventMatches(event, 'escape')) {
|
||||||
|
console.log('Escape pressed');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseEnter(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseOver(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseLeave(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseMove(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseUp(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
import THREE from 'three';
|
||||||
|
|
||||||
|
import Config from './../data/config';
|
||||||
|
|
||||||
|
export default class Light {
|
||||||
|
constructor(scene) {
|
||||||
|
this.scene = scene;
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
// ambient
|
||||||
|
this.ambientLight = new THREE.AmbientLight(Config.ambientLight.color);
|
||||||
|
this.ambientLight.visible = Config.ambientLight.enabled;
|
||||||
|
|
||||||
|
// point light
|
||||||
|
this.pointLight = new THREE.PointLight(Config.pointLight.color, Config.pointLight.intensity, Config.pointLight.distance);
|
||||||
|
this.pointLight.position.set(Config.pointLight.x, Config.pointLight.y, Config.pointLight.z);
|
||||||
|
this.pointLight.visible = Config.pointLight.enabled;
|
||||||
|
|
||||||
|
// directional light
|
||||||
|
this.directionalLight = new THREE.DirectionalLight(Config.directionalLight.color, Config.directionalLight.intensity);
|
||||||
|
this.directionalLight.position.set(Config.directionalLight.x, Config.directionalLight.y, Config.directionalLight.z);
|
||||||
|
this.directionalLight.visible = Config.directionalLight.enabled;
|
||||||
|
|
||||||
|
// shadow map
|
||||||
|
this.directionalLight.castShadow = Config.shadow.enabled;
|
||||||
|
this.directionalLight.shadow.bias = Config.shadow.bias;
|
||||||
|
this.directionalLight.shadow.camera.near = Config.shadow.near;
|
||||||
|
this.directionalLight.shadow.camera.far = Config.shadow.far;
|
||||||
|
this.directionalLight.shadow.camera.left = Config.shadow.left;
|
||||||
|
this.directionalLight.shadow.camera.right = Config.shadow.right;
|
||||||
|
this.directionalLight.shadow.camera.top = Config.shadow.top;
|
||||||
|
this.directionalLight.shadow.camera.bottom = Config.shadow.bottom;
|
||||||
|
this.directionalLight.shadow.mapSize.width = Config.shadow.mapWidth;
|
||||||
|
this.directionalLight.shadow.mapSize.height = Config.shadow.mapHeight;
|
||||||
|
|
||||||
|
// shadow camera helper
|
||||||
|
this.directionalLightHelper = new THREE.CameraHelper(this.directionalLight.shadow.camera);
|
||||||
|
this.directionalLightHelper.visible = Config.shadow.helperEnabled;
|
||||||
|
|
||||||
|
// hemisphere light
|
||||||
|
this.hemiLight = new THREE.HemisphereLight(Config.hemiLight.color, Config.hemiLight.groundColor, Config.hemiLight.intensity);
|
||||||
|
this.hemiLight.position.set(Config.hemiLight.x, Config.hemiLight.y, Config.hemiLight.z);
|
||||||
|
this.hemiLight.visible = Config.hemiLight.enabled;
|
||||||
|
}
|
||||||
|
|
||||||
|
place(lightName) {
|
||||||
|
switch(lightName) {
|
||||||
|
case 'ambient':
|
||||||
|
this.scene.add(this.ambientLight);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'directional':
|
||||||
|
this.scene.add(this.directionalLight);
|
||||||
|
this.scene.add(this.directionalLightHelper);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'point':
|
||||||
|
this.scene.add(this.pointLight);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'hemi':
|
||||||
|
this.scene.add(this.hemiLight);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,147 @@
|
||||||
|
// global imports
|
||||||
|
import THREE from 'three';
|
||||||
|
import TWEEN from 'tween.js';
|
||||||
|
|
||||||
|
// local imports
|
||||||
|
import Renderer from './renderer';
|
||||||
|
import Camera from './camera';
|
||||||
|
import Light from './light';
|
||||||
|
import Controls from './controls';
|
||||||
|
import Geometry from './geometry';
|
||||||
|
import Texture from './texture';
|
||||||
|
import Model from './model';
|
||||||
|
import Interaction from './interaction';
|
||||||
|
import GUI from './gui';
|
||||||
|
|
||||||
|
// data
|
||||||
|
import Config from './../data/config';
|
||||||
|
|
||||||
|
// stats
|
||||||
|
let rS, bS, glS, tS;
|
||||||
|
|
||||||
|
export default class Main {
|
||||||
|
constructor(container) {
|
||||||
|
this.container = container;
|
||||||
|
|
||||||
|
// Start Three clock
|
||||||
|
this.clock = new THREE.Clock();
|
||||||
|
|
||||||
|
// Main scene
|
||||||
|
this.scene = new THREE.Scene();
|
||||||
|
this.scene.fog = new THREE.FogExp2(Config.fog.color, Config.fog.near);
|
||||||
|
|
||||||
|
// Get Device Pixel Ratio first
|
||||||
|
if(window.devicePixelRatio) {
|
||||||
|
Config.dpr = window.devicePixelRatio;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Main renderer
|
||||||
|
this.renderer = new Renderer(container, this.scene);
|
||||||
|
|
||||||
|
// Components
|
||||||
|
this.camera = new Camera(this.renderer.threeRenderer);
|
||||||
|
this.controls = new Controls(this.camera.threeCamera, this.container);
|
||||||
|
this.light = new Light(this.scene);
|
||||||
|
|
||||||
|
// Place lights
|
||||||
|
const lights = ['ambient', 'directional', 'point', 'hemi'];
|
||||||
|
for(let i = 0; i < lights.length; i++) {
|
||||||
|
this.light.place(lights[i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Place geo
|
||||||
|
this.geometry = new Geometry(this.scene);
|
||||||
|
this.geometry.make('plane')(100, 100, 10, 10);
|
||||||
|
this.geometry.place([0, -20, 0], [Math.PI/2, 0, 0]);
|
||||||
|
|
||||||
|
// Set up stats if dev
|
||||||
|
if(Config.isDev) {
|
||||||
|
bS = new BrowserStats();
|
||||||
|
glS = new glStats();
|
||||||
|
tS = new threeStats(this.renderer.threeRenderer);
|
||||||
|
|
||||||
|
rS = new rStats({
|
||||||
|
CSSPath: '/assets/css/',
|
||||||
|
userTimingAPI: true,
|
||||||
|
values: {
|
||||||
|
frame: { caption: 'Total frame time (ms)', over: 16, average: true, avgMs: 100 },
|
||||||
|
fps: { caption: 'Framerate (FPS)', below: 30 },
|
||||||
|
calls: { caption: 'Calls (three.js)', over: 3000 },
|
||||||
|
raf: { caption: 'Time since last rAF (ms)', average: true, avgMs: 100 },
|
||||||
|
rstats: { caption: 'rStats update (ms)', average: true, avgMs: 100 },
|
||||||
|
texture: { caption: 'GenTex', average: true, avgMs: 100 }
|
||||||
|
},
|
||||||
|
groups: [
|
||||||
|
{ caption: 'Framerate', values: [ 'fps', 'raf' ] },
|
||||||
|
{ caption: 'Frame Budget', values: [ 'frame', 'texture', 'setup', 'render' ] }
|
||||||
|
],
|
||||||
|
fractions: [
|
||||||
|
{ base: 'frame', steps: [ 'texture', 'setup', 'render' ] }
|
||||||
|
],
|
||||||
|
plugins: [bS, tS, glS]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.texture = new Texture();
|
||||||
|
// Start loading the textures
|
||||||
|
this.texture.load().then(() => {
|
||||||
|
this.manager = new THREE.LoadingManager();
|
||||||
|
// Textures loaded, load main model
|
||||||
|
this.model = new Model(this.scene, this.manager, this.texture.textures);
|
||||||
|
this.model.load();
|
||||||
|
|
||||||
|
// onProgress
|
||||||
|
this.manager.onProgress = (item, loaded, total) => {
|
||||||
|
console.log(`${item}: ${loaded} ${total}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// All loaders done
|
||||||
|
this.manager.onLoad = () => {
|
||||||
|
// Set up interaction with app
|
||||||
|
new Interaction(this.renderer.threeRenderer, this.scene, this.camera.threeCamera, this.controls.threeControls);
|
||||||
|
|
||||||
|
if(Config.isDev) {
|
||||||
|
new GUI(this, this.model.obj);
|
||||||
|
}
|
||||||
|
|
||||||
|
Config.isLoaded = true;
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const delta = this.clock.getDelta();
|
||||||
|
|
||||||
|
if(Config.isDev) {
|
||||||
|
rS('frame').start();
|
||||||
|
glS.start();
|
||||||
|
|
||||||
|
rS('rAF').tick();
|
||||||
|
rS('FPS').frame();
|
||||||
|
|
||||||
|
rS('render').start();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clear renderer
|
||||||
|
this.renderer.threeRenderer.clear();
|
||||||
|
this.renderer.render(this.scene, this.camera.threeCamera);
|
||||||
|
|
||||||
|
if(Config.isDev) {
|
||||||
|
rS('render').end();
|
||||||
|
rS('frame').end();
|
||||||
|
|
||||||
|
rS('rStats').start();
|
||||||
|
rS().update();
|
||||||
|
rS('rStats').end();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Updates
|
||||||
|
TWEEN.update();
|
||||||
|
this.controls.threeControls.update();
|
||||||
|
|
||||||
|
// raf
|
||||||
|
requestAnimationFrame(this.render.bind(this));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
import THREE from 'three';
|
||||||
|
|
||||||
|
import Config from './../data/config';
|
||||||
|
|
||||||
|
export default class Material {
|
||||||
|
constructor() {
|
||||||
|
this.emissive = new THREE.MeshBasicMaterial({
|
||||||
|
color: 0xeeeeee,
|
||||||
|
side: THREE.DoubleSide,
|
||||||
|
fog: false
|
||||||
|
});
|
||||||
|
|
||||||
|
this.standard = new THREE.MeshStandardMaterial({
|
||||||
|
shading: THREE.FlatShading,
|
||||||
|
roughness: 1,
|
||||||
|
metalness: 0,
|
||||||
|
side: THREE.DoubleSide,
|
||||||
|
fog: false
|
||||||
|
});
|
||||||
|
|
||||||
|
this.wire = new THREE.MeshBasicMaterial({wireframe: true});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
import THREE from 'three';
|
||||||
|
|
||||||
|
import Material from './material';
|
||||||
|
import Helper from './helper';
|
||||||
|
import Config from './../data/config';
|
||||||
|
|
||||||
|
export default class Model {
|
||||||
|
constructor(scene, manager, textures) {
|
||||||
|
this.scene = scene;
|
||||||
|
this.textures = textures;
|
||||||
|
|
||||||
|
this.loader = new THREE.ObjectLoader(manager);
|
||||||
|
this.obj = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
load() {
|
||||||
|
// load a resource
|
||||||
|
this.loader.load(Config.model.path, (obj) => {
|
||||||
|
obj.traverse((child) => {
|
||||||
|
if(child instanceof THREE.Mesh) {
|
||||||
|
let material = new Material().standard;
|
||||||
|
material.map = this.textures.UV;
|
||||||
|
child.material = material;
|
||||||
|
|
||||||
|
if(Config.shadow.enabled) {
|
||||||
|
child.receiveShadow = true;
|
||||||
|
child.castShadow = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if(Config.isDev && Config.mesh.enableHelper) {
|
||||||
|
new Helper(this.scene, obj);
|
||||||
|
}
|
||||||
|
|
||||||
|
// set prop to obj
|
||||||
|
this.obj = obj;
|
||||||
|
|
||||||
|
obj.scale.multiplyScalar(Config.model.scale);
|
||||||
|
|
||||||
|
// add object to scene
|
||||||
|
this.scene.add(obj);
|
||||||
|
}, Model.onProgress, Model.onError);
|
||||||
|
}
|
||||||
|
|
||||||
|
static onProgress(xhr) {
|
||||||
|
if(xhr.lengthComputable) {
|
||||||
|
let percentComplete = xhr.loaded / xhr.total * 100;
|
||||||
|
|
||||||
|
console.log(Math.round(percentComplete, 2) + '% downloaded');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
static onError(xhr) {
|
||||||
|
console.error(xhr);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
import THREE from 'three';
|
||||||
|
|
||||||
|
import Config from './../data/config';
|
||||||
|
|
||||||
|
export default class Renderer {
|
||||||
|
constructor(container, scene) {
|
||||||
|
this.container = container;
|
||||||
|
this.scene = scene;
|
||||||
|
|
||||||
|
this.threeRenderer = new THREE.WebGLRenderer({antialias: true});
|
||||||
|
|
||||||
|
//this.renderer.setClearColor(0x000000, 0);
|
||||||
|
this.threeRenderer.setClearColor(scene.fog.color);
|
||||||
|
this.threeRenderer.setPixelRatio(window.devicePixelRatio);
|
||||||
|
|
||||||
|
container.appendChild(this.threeRenderer.domElement);
|
||||||
|
|
||||||
|
this.threeRenderer.gammaInput = true;
|
||||||
|
this.threeRenderer.gammaOutput = true;
|
||||||
|
|
||||||
|
// shadow
|
||||||
|
this.threeRenderer.shadowMap.enabled = true;
|
||||||
|
this.threeRenderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
||||||
|
this.threeRenderer.shadowMapSoft = true;
|
||||||
|
|
||||||
|
this.threeRenderer.autoClear = false;
|
||||||
|
|
||||||
|
Config.maxAnisotropy = this.threeRenderer.getMaxAnisotropy();
|
||||||
|
|
||||||
|
this.updateSize();
|
||||||
|
|
||||||
|
// Listeners
|
||||||
|
document.addEventListener('DOMContentLoaded', () => this.updateSize(), false);
|
||||||
|
window.addEventListener('resize', () => this.updateSize(), false);
|
||||||
|
}
|
||||||
|
|
||||||
|
updateSize() {
|
||||||
|
this.threeRenderer.setSize(this.container.offsetWidth, this.container.offsetHeight);
|
||||||
|
}
|
||||||
|
|
||||||
|
render(scene, camera) {
|
||||||
|
this.threeRenderer.render(scene, camera);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
import THREE from 'three';
|
||||||
|
import { Promise } from 'es6-promise';
|
||||||
|
|
||||||
|
import Config from './../data/config';
|
||||||
|
|
||||||
|
export default class Texture {
|
||||||
|
constructor() {
|
||||||
|
this.textures = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
load() {
|
||||||
|
const loader = new THREE.TextureLoader();
|
||||||
|
const maxAnisotropy = Config.maxAnisotropy;
|
||||||
|
const imageFiles = Config.texture.imageFiles;
|
||||||
|
|
||||||
|
let promiseArray = [];
|
||||||
|
|
||||||
|
loader.setPath(Config.texture.path);
|
||||||
|
|
||||||
|
imageFiles.forEach((imageFile) => {
|
||||||
|
promiseArray.push(new Promise((resolve, reject) => {
|
||||||
|
loader.load(imageFile.image,
|
||||||
|
|
||||||
|
function(texture) {
|
||||||
|
texture.anisotropy = maxAnisotropy;
|
||||||
|
|
||||||
|
var modelOBJ = {};
|
||||||
|
modelOBJ[imageFile.name] = texture;
|
||||||
|
if(modelOBJ[imageFile.name] instanceof THREE.Texture)
|
||||||
|
resolve(modelOBJ);
|
||||||
|
},
|
||||||
|
function(xhr) {
|
||||||
|
console.log(( xhr.loaded / xhr.total * 100 ) + '% loaded');
|
||||||
|
},
|
||||||
|
function(xhr) {
|
||||||
|
reject(new Error(xhr + 'An error occurred loading while loading ' + imageFile.image));
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
return Promise.all(promiseArray).then((textures) => {
|
||||||
|
for(var i = 0; i < textures.length; i++) {
|
||||||
|
this.textures[Object.keys(textures[i])[0]] = textures[i][Object.keys(textures[i])[0]];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
import TWEEN from 'tween.js';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
isDev: false,
|
||||||
|
isLoaded: false,
|
||||||
|
isTweening: false,
|
||||||
|
isRotating: true,
|
||||||
|
isMouseMoving: false,
|
||||||
|
isMouseOver: false,
|
||||||
|
maxAnisotropy: 1,
|
||||||
|
dpr: 1,
|
||||||
|
easing: TWEEN.Easing.Quadratic.InOut,
|
||||||
|
duration: 500,
|
||||||
|
model: {
|
||||||
|
path: '/assets/models/teapot-claraio.json',
|
||||||
|
scale: 20
|
||||||
|
},
|
||||||
|
texture: {
|
||||||
|
path: '/assets/textures/',
|
||||||
|
imageFiles: [
|
||||||
|
{name: 'UV', image: 'UV_Grid_Sm.jpg'}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
mesh: {
|
||||||
|
enableHelper: false,
|
||||||
|
wireframe: false,
|
||||||
|
translucent: false,
|
||||||
|
material: {
|
||||||
|
color: 0xffffff,
|
||||||
|
emissive: 0xffffff
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fog: {
|
||||||
|
color: 0xffffff,
|
||||||
|
near: 0.0008
|
||||||
|
},
|
||||||
|
camera: {
|
||||||
|
fov: 40,
|
||||||
|
near: 2,
|
||||||
|
far: 1000,
|
||||||
|
aspect: 1,
|
||||||
|
posX: 0,
|
||||||
|
posY: 30,
|
||||||
|
posZ: 40
|
||||||
|
},
|
||||||
|
controls: {
|
||||||
|
autoRotate: true,
|
||||||
|
autoRotateSpeed: -0.5,
|
||||||
|
rotateSpeed: 0.5,
|
||||||
|
zoomSpeed: 0.8,
|
||||||
|
minDistance: 200,
|
||||||
|
maxDistance: 600,
|
||||||
|
minPolarAngle: Math.PI / 5,
|
||||||
|
maxPolarAngle: Math.PI / 2,
|
||||||
|
minAzimuthAngle: -Infinity,
|
||||||
|
maxAzimuthAngle: Infinity,
|
||||||
|
enableDamping: true,
|
||||||
|
dampingFactor: 0.5,
|
||||||
|
enableZoom: true,
|
||||||
|
target: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
z: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
ambientLight: {
|
||||||
|
enabled: false,
|
||||||
|
color: 0x141414
|
||||||
|
},
|
||||||
|
directionalLight: {
|
||||||
|
enabled: true,
|
||||||
|
color: 0xf0f0f0,
|
||||||
|
intensity: 0.4,
|
||||||
|
x: -75,
|
||||||
|
y: 280,
|
||||||
|
z: 150
|
||||||
|
},
|
||||||
|
shadow: {
|
||||||
|
enabled: true,
|
||||||
|
helperEnabled: true,
|
||||||
|
bias: -0.00025,
|
||||||
|
mapWidth: 1024,
|
||||||
|
mapHeight: 1024,
|
||||||
|
near: 200,
|
||||||
|
far: 400,
|
||||||
|
top: 150,
|
||||||
|
right: 150,
|
||||||
|
bottom: -150,
|
||||||
|
left: -150
|
||||||
|
},
|
||||||
|
pointLight: {
|
||||||
|
enabled: true,
|
||||||
|
color: 0xffffff,
|
||||||
|
intensity: 0.34,
|
||||||
|
distance: 115,
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
z: 0
|
||||||
|
},
|
||||||
|
hemiLight: {
|
||||||
|
enabled: true,
|
||||||
|
color: 0xc8c8c8,
|
||||||
|
groundColor: 0xffffff,
|
||||||
|
intensity: 0.3,
|
||||||
|
x: -275,
|
||||||
|
y: 145,
|
||||||
|
z: 0
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
/**
|
||||||
|
* @author alteredq / http://alteredqualia.com/
|
||||||
|
* @author mr.doob / http://mrdoob.com/
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
|
||||||
|
canvas: !!window.CanvasRenderingContext2D,
|
||||||
|
webgl: (function() {
|
||||||
|
|
||||||
|
try {
|
||||||
|
|
||||||
|
var canvas = document.createElement('canvas');
|
||||||
|
return !!( window.WebGLRenderingContext && ( canvas.getContext('webgl') || canvas.getContext('experimental-webgl') ) );
|
||||||
|
|
||||||
|
} catch(e) {
|
||||||
|
|
||||||
|
return false;
|
||||||
|
|
||||||
|
}
|
||||||
|
})(),
|
||||||
|
workers: !!window.Worker,
|
||||||
|
fileapi: window.File && window.FileReader && window.FileList && window.Blob,
|
||||||
|
|
||||||
|
getWebGLErrorMessage: function() {
|
||||||
|
|
||||||
|
var element = document.createElement('div');
|
||||||
|
element.id = 'webgl-error-message';
|
||||||
|
element.style.fontFamily = 'monospace';
|
||||||
|
element.style.fontSize = '13px';
|
||||||
|
element.style.fontWeight = 'normal';
|
||||||
|
element.style.textAlign = 'center';
|
||||||
|
element.style.background = '#fff';
|
||||||
|
element.style.color = '#000';
|
||||||
|
element.style.padding = '1.5em';
|
||||||
|
element.style.width = '400px';
|
||||||
|
element.style.margin = '5em auto 0';
|
||||||
|
|
||||||
|
if(!this.webgl) {
|
||||||
|
|
||||||
|
element.innerHTML = window.WebGLRenderingContext ? [
|
||||||
|
'Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000000">WebGL</a>.<br />',
|
||||||
|
'Find out how to get it <a href="http://get.webgl.org/" style="color:#000000">here</a>.'
|
||||||
|
].join('\n') : [
|
||||||
|
'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000000">WebGL</a>.<br/>',
|
||||||
|
'Find out how to get it <a href="http://get.webgl.org/" style="color:#000000">here</a>.'
|
||||||
|
].join('\n');
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return element;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
addGetWebGLMessage: function(parameters) {
|
||||||
|
|
||||||
|
var parent, id, element;
|
||||||
|
|
||||||
|
parameters = parameters || {};
|
||||||
|
|
||||||
|
parent = parameters.parent !== undefined ? parameters.parent : document.body;
|
||||||
|
id = parameters.id !== undefined ? parameters.id : 'oldie';
|
||||||
|
|
||||||
|
element = this.getWebGLErrorMessage();
|
||||||
|
element.id = id;
|
||||||
|
|
||||||
|
parent.appendChild(element);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
export default class Helpers {
|
||||||
|
static throttle(fn, threshhold, scope) {
|
||||||
|
threshhold || (threshhold = 250);
|
||||||
|
var last, deferTimer;
|
||||||
|
|
||||||
|
return function() {
|
||||||
|
var context = scope || this;
|
||||||
|
|
||||||
|
var now = +new Date,
|
||||||
|
args = arguments;
|
||||||
|
|
||||||
|
if(last && now < last + threshhold) {
|
||||||
|
// hold on to it
|
||||||
|
clearTimeout(deferTimer);
|
||||||
|
deferTimer = setTimeout(function() {
|
||||||
|
last = now;
|
||||||
|
fn.apply(context, args);
|
||||||
|
}, threshhold);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
last = now;
|
||||||
|
fn.apply(context, args);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
const ALIAS = {
|
||||||
|
'left' : 37,
|
||||||
|
'up' : 38,
|
||||||
|
'right' : 39,
|
||||||
|
'down' : 40,
|
||||||
|
'space' : 32,
|
||||||
|
'pageup' : 33,
|
||||||
|
'pagedown': 34,
|
||||||
|
'tab' : 9,
|
||||||
|
'escape' : 27
|
||||||
|
};
|
||||||
|
|
||||||
|
export default class Keyboard {
|
||||||
|
constructor(domElement) {
|
||||||
|
this.domElement = domElement || document;
|
||||||
|
this.keyCodes = {};
|
||||||
|
|
||||||
|
// bind keyEvents
|
||||||
|
this.domElement.addEventListener('keydown', () => this.onKeyChange(event), false);
|
||||||
|
this.domElement.addEventListener('keyup', () => this.onKeyChange(event), false);
|
||||||
|
|
||||||
|
// bind window blur
|
||||||
|
window.addEventListener('blur', () => this.onBlur, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
this.domElement.removeEventListener('keydown', () => this.onKeyChange(event), false);
|
||||||
|
this.domElement.removeEventListener('keyup', () => this.onKeyChange(event), false);
|
||||||
|
|
||||||
|
// unbind window blur event
|
||||||
|
window.removeEventListener('blur', () => this.onBlur, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
onBlur() {
|
||||||
|
for(let prop in this.keyCodes)
|
||||||
|
this.keyCodes[prop] = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
onKeyChange(event) {
|
||||||
|
// log to debug
|
||||||
|
//console.log('onKeyChange', event, event.keyCode, event.shiftKey, event.ctrlKey, event.altKey, event.metaKey)
|
||||||
|
|
||||||
|
// update this.keyCodes
|
||||||
|
let keyCode = event.keyCode;
|
||||||
|
this.keyCodes[keyCode] = event.type === 'keydown';
|
||||||
|
}
|
||||||
|
|
||||||
|
pressed(keyDesc) {
|
||||||
|
let keys = keyDesc.split('+');
|
||||||
|
for(let i = 0; i < keys.length; i++) {
|
||||||
|
let key = keys[i];
|
||||||
|
let pressed = false;
|
||||||
|
if(Object.keys(ALIAS).indexOf(key) != -1) {
|
||||||
|
pressed = this.keyCodes[ALIAS[key]];
|
||||||
|
} else {
|
||||||
|
pressed = this.keyCodes[key.toUpperCase().charCodeAt(0)];
|
||||||
|
}
|
||||||
|
if(!pressed)
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
eventMatches(event, keyDesc) {
|
||||||
|
let aliases = ALIAS;
|
||||||
|
let aliasKeys = Object.keys(aliases);
|
||||||
|
let keys = keyDesc.split('+');
|
||||||
|
// log to debug
|
||||||
|
// console.log('eventMatches', event, event.keyCode, event.shiftKey, event.ctrlKey, event.altKey, event.metaKey)
|
||||||
|
for(let i = 0; i < keys.length; i++) {
|
||||||
|
let key = keys[i];
|
||||||
|
let pressed = false;
|
||||||
|
if(key === 'shift') {
|
||||||
|
pressed = (event.shiftKey ? true : false);
|
||||||
|
} else if(key === 'ctrl') {
|
||||||
|
pressed = (event.ctrlKey ? true : false);
|
||||||
|
} else if(key === 'alt') {
|
||||||
|
pressed = (event.altKey ? true : false);
|
||||||
|
} else if(key === 'meta') {
|
||||||
|
pressed = (event.metaKey ? true : false);
|
||||||
|
} else if(aliasKeys.indexOf(key) !== -1) {
|
||||||
|
pressed = (event.keyCode === aliases[key]);
|
||||||
|
} else if(event.keyCode === key.toUpperCase().charCodeAt(0)) {
|
||||||
|
pressed = true;
|
||||||
|
}
|
||||||
|
if(!pressed)
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,4 @@
|
||||||
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
.rs-base{
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10000;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #222;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 1.2em;
|
||||||
|
width: 350px;
|
||||||
|
font-family: 'Roboto Condensed', tahoma, sans-serif;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rs-base h1{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1.4em;
|
||||||
|
color: #fff;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rs-base div.rs-group{
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rs-base div.rs-group.hidden{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rs-base div.rs-fraction{
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rs-base div.rs-fraction p{
|
||||||
|
width: 120px;
|
||||||
|
text-align: right;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rs-base div.rs-legend{
|
||||||
|
position: absolute;
|
||||||
|
line-height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rs-base div.rs-counter-base{
|
||||||
|
position: relative;
|
||||||
|
margin: 2px 0;
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rs-base span.rs-counter-id{
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rs-base div.rs-counter-value{
|
||||||
|
position: absolute;
|
||||||
|
left: 90px;
|
||||||
|
width: 30px;
|
||||||
|
height: 1em;
|
||||||
|
top: 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rs-base canvas.rs-canvas{
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,719 @@
|
||||||
|
// performance.now() polyfill from https://gist.github.com/paulirish/5438650
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
( function () {
|
||||||
|
|
||||||
|
// prepare base perf object
|
||||||
|
if ( typeof window.performance === 'undefined' ) {
|
||||||
|
window.performance = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( !window.performance.now ) {
|
||||||
|
|
||||||
|
var nowOffset = Date.now();
|
||||||
|
|
||||||
|
if ( performance.timing && performance.timing.navigationStart ) {
|
||||||
|
nowOffset = performance.timing.navigationStart;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.performance.now = function now () {
|
||||||
|
return Date.now() - nowOffset;
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if( !window.performance.mark ) {
|
||||||
|
window.performance.mark = function(){}
|
||||||
|
}
|
||||||
|
|
||||||
|
if( !window.performance.measure ) {
|
||||||
|
window.performance.measure = function(){}
|
||||||
|
}
|
||||||
|
|
||||||
|
} )();
|
||||||
|
|
||||||
|
window.rStats = function rStats ( settings ) {
|
||||||
|
|
||||||
|
function iterateKeys ( array, callback ) {
|
||||||
|
var keys = Object.keys( array );
|
||||||
|
for ( var j = 0, l = keys.length; j < l; j++ ) {
|
||||||
|
callback( keys[ j ] );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function importCSS ( url ) {
|
||||||
|
|
||||||
|
var element = document.createElement( 'link' );
|
||||||
|
element.href = url;
|
||||||
|
element.rel = 'stylesheet';
|
||||||
|
element.type = 'text/css';
|
||||||
|
document.getElementsByTagName( 'head' )[ 0 ].appendChild( element );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
var _settings = settings || {};
|
||||||
|
var _colours = _settings.colours || [ '#850700', '#c74900', '#fcb300', '#284280', '#4c7c0c' ];
|
||||||
|
|
||||||
|
var _cssFont = 'https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300';
|
||||||
|
var _cssRStats = ( _settings.CSSPath ? _settings.CSSPath : '' ) + 'rStats.css';
|
||||||
|
|
||||||
|
var _css = _settings.css || [ _cssFont, _cssRStats ];
|
||||||
|
_css.forEach(function (uri) {
|
||||||
|
importCSS( uri );
|
||||||
|
});
|
||||||
|
|
||||||
|
if ( !_settings.values ) _settings.values = {};
|
||||||
|
|
||||||
|
var _base, _div, _elHeight = 10, _elWidth = 200;
|
||||||
|
var _perfCounters = {};
|
||||||
|
|
||||||
|
|
||||||
|
function Graph ( _dom, _id, _defArg ) {
|
||||||
|
|
||||||
|
var _def = _defArg || {};
|
||||||
|
var _canvas = document.createElement( 'canvas' ),
|
||||||
|
_ctx = _canvas.getContext( '2d' ),
|
||||||
|
_max = 0,
|
||||||
|
_current = 0;
|
||||||
|
|
||||||
|
var c = _def.color ? _def.color : '#666666';
|
||||||
|
|
||||||
|
var _dotCanvas = document.createElement( 'canvas' ),
|
||||||
|
_dotCtx = _dotCanvas.getContext( '2d' );
|
||||||
|
_dotCanvas.width = 1;
|
||||||
|
_dotCanvas.height = 2 * _elHeight;
|
||||||
|
_dotCtx.fillStyle = '#444444';
|
||||||
|
_dotCtx.fillRect( 0, 0, 1, 2 * _elHeight );
|
||||||
|
_dotCtx.fillStyle = c;
|
||||||
|
_dotCtx.fillRect( 0, _elHeight, 1, _elHeight );
|
||||||
|
_dotCtx.fillStyle = '#ffffff';
|
||||||
|
_dotCtx.globalAlpha = 0.5;
|
||||||
|
_dotCtx.fillRect( 0, _elHeight, 1, 1 );
|
||||||
|
_dotCtx.globalAlpha = 1;
|
||||||
|
|
||||||
|
var _alarmCanvas = document.createElement( 'canvas' ),
|
||||||
|
_alarmCtx = _alarmCanvas.getContext( '2d' );
|
||||||
|
_alarmCanvas.width = 1;
|
||||||
|
_alarmCanvas.height = 2 * _elHeight;
|
||||||
|
_alarmCtx.fillStyle = '#444444';
|
||||||
|
_alarmCtx.fillRect( 0, 0, 1, 2 * _elHeight );
|
||||||
|
_alarmCtx.fillStyle = '#b70000';
|
||||||
|
_alarmCtx.fillRect( 0, _elHeight, 1, _elHeight );
|
||||||
|
_alarmCtx.globalAlpha = 0.5;
|
||||||
|
_alarmCtx.fillStyle = '#ffffff';
|
||||||
|
_alarmCtx.fillRect( 0, _elHeight, 1, 1 );
|
||||||
|
_alarmCtx.globalAlpha = 1;
|
||||||
|
|
||||||
|
function _init () {
|
||||||
|
|
||||||
|
_canvas.width = _elWidth;
|
||||||
|
_canvas.height = _elHeight;
|
||||||
|
_canvas.style.width = _canvas.width + 'px';
|
||||||
|
_canvas.style.height = _canvas.height + 'px';
|
||||||
|
_canvas.className = 'rs-canvas';
|
||||||
|
_dom.appendChild( _canvas );
|
||||||
|
|
||||||
|
_ctx.fillStyle = '#444444';
|
||||||
|
_ctx.fillRect( 0, 0, _canvas.width, _canvas.height );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function _draw ( v, alarm ) {
|
||||||
|
_current += ( v - _current ) * 0.1;
|
||||||
|
_max *= 0.99;
|
||||||
|
if ( _current > _max ) _max = _current;
|
||||||
|
_ctx.drawImage( _canvas, 1, 0, _canvas.width - 1, _canvas.height, 0, 0, _canvas.width - 1, _canvas.height );
|
||||||
|
if ( alarm ) {
|
||||||
|
_ctx.drawImage( _alarmCanvas, _canvas.width - 1, _canvas.height - _current * _canvas.height / _max - _elHeight );
|
||||||
|
} else {
|
||||||
|
_ctx.drawImage( _dotCanvas, _canvas.width - 1, _canvas.height - _current * _canvas.height / _max - _elHeight );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_init();
|
||||||
|
|
||||||
|
return {
|
||||||
|
draw: _draw
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function StackGraph ( _dom, _num ) {
|
||||||
|
|
||||||
|
var _canvas = document.createElement( 'canvas' ),
|
||||||
|
_ctx = _canvas.getContext( '2d' );
|
||||||
|
|
||||||
|
function _init () {
|
||||||
|
|
||||||
|
_canvas.width = _elWidth;
|
||||||
|
_canvas.height = _elHeight * _num;
|
||||||
|
_canvas.style.width = _canvas.width + 'px';
|
||||||
|
_canvas.style.height = _canvas.height + 'px';
|
||||||
|
_canvas.className = 'rs-canvas';
|
||||||
|
_dom.appendChild( _canvas );
|
||||||
|
|
||||||
|
_ctx.fillStyle = '#444444';
|
||||||
|
_ctx.fillRect( 0, 0, _canvas.width, _canvas.height );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function _draw ( v ) {
|
||||||
|
_ctx.drawImage( _canvas, 1, 0, _canvas.width - 1, _canvas.height, 0, 0, _canvas.width - 1, _canvas.height );
|
||||||
|
var th = 0;
|
||||||
|
iterateKeys( v, function ( j ) {
|
||||||
|
var h = v[ j ] * _canvas.height;
|
||||||
|
_ctx.fillStyle = _colours[ j ];
|
||||||
|
_ctx.fillRect( _canvas.width - 1, th, 1, h );
|
||||||
|
th += h;
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
_init();
|
||||||
|
|
||||||
|
return {
|
||||||
|
draw: _draw
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function PerfCounter ( id, group ) {
|
||||||
|
|
||||||
|
var _id = id,
|
||||||
|
_time,
|
||||||
|
_value = 0,
|
||||||
|
_total = 0,
|
||||||
|
_averageValue = 0,
|
||||||
|
_accumValue = 0,
|
||||||
|
_accumStart = performance.now(),
|
||||||
|
_accumSamples = 0,
|
||||||
|
_dom = document.createElement( 'div' ),
|
||||||
|
_spanId = document.createElement( 'span' ),
|
||||||
|
_spanValue = document.createElement( 'div' ),
|
||||||
|
_spanValueText = document.createTextNode( '' ),
|
||||||
|
_def = _settings ? _settings.values[ _id.toLowerCase() ] : null,
|
||||||
|
_graph = new Graph( _dom, _id, _def ),
|
||||||
|
_started = false;
|
||||||
|
|
||||||
|
_dom.className = 'rs-counter-base';
|
||||||
|
|
||||||
|
_spanId.className = 'rs-counter-id';
|
||||||
|
_spanId.textContent = ( _def && _def.caption ) ? _def.caption : _id;
|
||||||
|
|
||||||
|
_spanValue.className = 'rs-counter-value';
|
||||||
|
_spanValue.appendChild( _spanValueText );
|
||||||
|
|
||||||
|
_dom.appendChild( _spanId );
|
||||||
|
_dom.appendChild( _spanValue );
|
||||||
|
if ( group ) group.div.appendChild( _dom );
|
||||||
|
else _div.appendChild( _dom );
|
||||||
|
|
||||||
|
_time = performance.now();
|
||||||
|
|
||||||
|
function _average ( v ) {
|
||||||
|
if ( _def && _def.average ) {
|
||||||
|
_accumValue += v;
|
||||||
|
_accumSamples++;
|
||||||
|
var t = performance.now();
|
||||||
|
if ( t - _accumStart >= ( _def.avgMs || 1000 ) ) {
|
||||||
|
_averageValue = _accumValue / _accumSamples;
|
||||||
|
_accumValue = 0;
|
||||||
|
_accumStart = t;
|
||||||
|
_accumSamples = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function _start () {
|
||||||
|
_time = performance.now();
|
||||||
|
if( _settings.userTimingAPI ) performance.mark( _id + '-start' );
|
||||||
|
_started = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _end () {
|
||||||
|
_value = performance.now() - _time;
|
||||||
|
if( _settings.userTimingAPI ) {
|
||||||
|
performance.mark( _id + '-end' );
|
||||||
|
if( _started ) {
|
||||||
|
performance.measure( _id, _id + '-start', _id + '-end' );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
_average( _value );
|
||||||
|
}
|
||||||
|
|
||||||
|
function _tick () {
|
||||||
|
_end();
|
||||||
|
_start();
|
||||||
|
}
|
||||||
|
|
||||||
|
function _draw () {
|
||||||
|
var v = ( _def && _def.average ) ? _averageValue : _value;
|
||||||
|
_spanValueText.nodeValue = Math.round( v * 100 ) / 100;
|
||||||
|
var a = ( _def && ( ( _def.below && _value < _def.below ) || ( _def.over && _value > _def.over ) ) );
|
||||||
|
_graph.draw( _value, a );
|
||||||
|
_dom.style.color = a ? '#b70000' : '#ffffff';
|
||||||
|
}
|
||||||
|
|
||||||
|
function _frame () {
|
||||||
|
var t = performance.now();
|
||||||
|
var e = t - _time;
|
||||||
|
_total++;
|
||||||
|
if ( e > 1000 ) {
|
||||||
|
if ( _def && _def.interpolate === false ) {
|
||||||
|
_value = _total;
|
||||||
|
} else {
|
||||||
|
_value = _total * 1000 / e;
|
||||||
|
}
|
||||||
|
_total = 0;
|
||||||
|
_time = t;
|
||||||
|
_average( _value );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function _set ( v ) {
|
||||||
|
_value = v;
|
||||||
|
_average( _value );
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
set: _set,
|
||||||
|
start: _start,
|
||||||
|
tick: _tick,
|
||||||
|
end: _end,
|
||||||
|
frame: _frame,
|
||||||
|
value: function () {
|
||||||
|
return _value;
|
||||||
|
},
|
||||||
|
draw: _draw
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function sample () {
|
||||||
|
|
||||||
|
var _value = 0;
|
||||||
|
|
||||||
|
function _set ( v ) {
|
||||||
|
_value = v;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
set: _set,
|
||||||
|
value: function () {
|
||||||
|
return _value;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function _perf ( idArg ) {
|
||||||
|
|
||||||
|
var id = idArg.toLowerCase();
|
||||||
|
if ( id === undefined ) id = 'default';
|
||||||
|
if ( _perfCounters[ id ] ) return _perfCounters[ id ];
|
||||||
|
|
||||||
|
var group = null;
|
||||||
|
if ( _settings && _settings.groups ) {
|
||||||
|
iterateKeys( _settings.groups, function ( j ) {
|
||||||
|
var g = _settings.groups[ parseInt( j, 10 ) ];
|
||||||
|
if ( !group && g.values.indexOf( id.toLowerCase() ) !== -1 ) {
|
||||||
|
group = g;
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
var p = new PerfCounter( id, group );
|
||||||
|
_perfCounters[ id ] = p;
|
||||||
|
return p;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function _init () {
|
||||||
|
|
||||||
|
if ( _settings.plugins ) {
|
||||||
|
if ( !_settings.values ) _settings.values = {};
|
||||||
|
if ( !_settings.groups ) _settings.groups = [];
|
||||||
|
if ( !_settings.fractions ) _settings.fractions = [];
|
||||||
|
for ( var j = 0; j < _settings.plugins.length; j++ ) {
|
||||||
|
_settings.plugins[ j ].attach( _perf );
|
||||||
|
iterateKeys( _settings.plugins[ j ].values, function ( k ) {
|
||||||
|
_settings.values[ k ] = _settings.plugins[ j ].values[ k ];
|
||||||
|
} );
|
||||||
|
_settings.groups = _settings.groups.concat( _settings.plugins[ j ].groups );
|
||||||
|
_settings.fractions = _settings.fractions.concat( _settings.plugins[ j ].fractions );
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
_settings.plugins = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
_base = document.createElement( 'div' );
|
||||||
|
_base.className = 'rs-base';
|
||||||
|
_div = document.createElement( 'div' );
|
||||||
|
_div.className = 'rs-container';
|
||||||
|
_div.style.height = 'auto';
|
||||||
|
_base.appendChild( _div );
|
||||||
|
document.body.appendChild( _base );
|
||||||
|
|
||||||
|
if ( !_settings ) return;
|
||||||
|
|
||||||
|
if ( _settings.groups ) {
|
||||||
|
iterateKeys( _settings.groups, function ( j ) {
|
||||||
|
var g = _settings.groups[ parseInt( j, 10 ) ];
|
||||||
|
var div = document.createElement( 'div' );
|
||||||
|
div.className = 'rs-group';
|
||||||
|
g.div = div;
|
||||||
|
var h1 = document.createElement( 'h1' );
|
||||||
|
h1.textContent = g.caption;
|
||||||
|
h1.addEventListener( 'click', function ( e ) {
|
||||||
|
this.classList.toggle( 'hidden' );
|
||||||
|
e.preventDefault();
|
||||||
|
}.bind( div ) );
|
||||||
|
_div.appendChild( h1 );
|
||||||
|
_div.appendChild( div );
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( _settings.fractions ) {
|
||||||
|
iterateKeys( _settings.fractions, function ( j ) {
|
||||||
|
var f = _settings.fractions[ parseInt( j, 10 ) ];
|
||||||
|
var div = document.createElement( 'div' );
|
||||||
|
div.className = 'rs-fraction';
|
||||||
|
var legend = document.createElement( 'div' );
|
||||||
|
legend.className = 'rs-legend';
|
||||||
|
|
||||||
|
var h = 0;
|
||||||
|
iterateKeys( _settings.fractions[ j ].steps, function ( k ) {
|
||||||
|
var p = document.createElement( 'p' );
|
||||||
|
p.textContent = _settings.fractions[ j ].steps[ k ];
|
||||||
|
p.style.color = _colours[ h ];
|
||||||
|
legend.appendChild( p );
|
||||||
|
h++;
|
||||||
|
} );
|
||||||
|
div.appendChild( legend );
|
||||||
|
div.style.height = h * _elHeight + 'px';
|
||||||
|
f.div = div;
|
||||||
|
var graph = new StackGraph( div, h );
|
||||||
|
f.graph = graph;
|
||||||
|
_div.appendChild( div );
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function _update () {
|
||||||
|
|
||||||
|
iterateKeys( _settings.plugins, function ( j ) {
|
||||||
|
_settings.plugins[ j ].update();
|
||||||
|
} );
|
||||||
|
|
||||||
|
iterateKeys( _perfCounters, function ( j ) {
|
||||||
|
_perfCounters[ j ].draw();
|
||||||
|
} );
|
||||||
|
|
||||||
|
if ( _settings && _settings.fractions ) {
|
||||||
|
iterateKeys( _settings.fractions, function ( j ) {
|
||||||
|
var f = _settings.fractions[ parseInt( j, 10 ) ];
|
||||||
|
var v = [];
|
||||||
|
var base = _perfCounters[ f.base.toLowerCase() ];
|
||||||
|
if ( base ) {
|
||||||
|
base = base.value();
|
||||||
|
iterateKeys( _settings.fractions[ j ].steps, function ( k ) {
|
||||||
|
var s = _settings.fractions[ j ].steps[ parseInt( k, 10 ) ].toLowerCase();
|
||||||
|
var val = _perfCounters[ s ];
|
||||||
|
if ( val ) {
|
||||||
|
v.push( val.value() / base );
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
f.graph.draw( v );
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
/*if( _height != _div.clientHeight ) {
|
||||||
|
_height = _div.clientHeight;
|
||||||
|
_base.style.height = _height + 2 * _elHeight + 'px';
|
||||||
|
console.log( _base.clientHeight );
|
||||||
|
}*/
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
_init();
|
||||||
|
|
||||||
|
return function ( id ) {
|
||||||
|
if ( id ) return _perf( id );
|
||||||
|
return {
|
||||||
|
element: _base,
|
||||||
|
update: _update
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof module === 'object') {
|
||||||
|
module.exports = window.rStats;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.glStats = function () {
|
||||||
|
|
||||||
|
var _rS = null;
|
||||||
|
|
||||||
|
var _totalDrawArraysCalls = 0,
|
||||||
|
_totalDrawElementsCalls = 0,
|
||||||
|
_totalUseProgramCalls = 0,
|
||||||
|
_totalFaces = 0,
|
||||||
|
_totalVertices = 0,
|
||||||
|
_totalPoints = 0,
|
||||||
|
_totalBindTexures = 0;
|
||||||
|
|
||||||
|
function _h ( f, c ) {
|
||||||
|
return function () {
|
||||||
|
c.apply( this, arguments );
|
||||||
|
f.apply( this, arguments );
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
WebGLRenderingContext.prototype.drawArrays = _h( WebGLRenderingContext.prototype.drawArrays, function () {
|
||||||
|
_totalDrawArraysCalls++;
|
||||||
|
if ( arguments[ 0 ] == this.POINTS ) _totalPoints += arguments[ 2 ];
|
||||||
|
else _totalVertices += arguments[ 2 ];
|
||||||
|
} );
|
||||||
|
|
||||||
|
WebGLRenderingContext.prototype.drawElements = _h( WebGLRenderingContext.prototype.drawElements, function () {
|
||||||
|
_totalDrawElementsCalls++;
|
||||||
|
_totalFaces += arguments[ 1 ] / 3;
|
||||||
|
_totalVertices += arguments[ 1 ];
|
||||||
|
} );
|
||||||
|
|
||||||
|
WebGLRenderingContext.prototype.useProgram = _h( WebGLRenderingContext.prototype.useProgram, function () {
|
||||||
|
_totalUseProgramCalls++;
|
||||||
|
} );
|
||||||
|
|
||||||
|
WebGLRenderingContext.prototype.bindTexture = _h( WebGLRenderingContext.prototype.bindTexture, function () {
|
||||||
|
_totalBindTexures++;
|
||||||
|
} );
|
||||||
|
|
||||||
|
var _values = {
|
||||||
|
allcalls: {
|
||||||
|
over: 3000,
|
||||||
|
caption: 'Calls (hook)'
|
||||||
|
},
|
||||||
|
drawelements: {
|
||||||
|
caption: 'drawElements (hook)'
|
||||||
|
},
|
||||||
|
drawarrays: {
|
||||||
|
caption: 'drawArrays (hook)'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var _groups = [ {
|
||||||
|
caption: 'WebGL',
|
||||||
|
values: [ 'allcalls', 'drawelements', 'drawarrays', 'useprogram', 'bindtexture', 'glfaces', 'glvertices', 'glpoints' ]
|
||||||
|
} ];
|
||||||
|
|
||||||
|
var _fractions = [ {
|
||||||
|
base: 'allcalls',
|
||||||
|
steps: [ 'drawelements', 'drawarrays' ]
|
||||||
|
} ];
|
||||||
|
|
||||||
|
function _update () {
|
||||||
|
_rS( 'allcalls' ).set( _totalDrawArraysCalls + _totalDrawElementsCalls );
|
||||||
|
_rS( 'drawElements' ).set( _totalDrawElementsCalls );
|
||||||
|
_rS( 'drawArrays' ).set( _totalDrawArraysCalls );
|
||||||
|
_rS( 'bindTexture' ).set( _totalBindTexures );
|
||||||
|
_rS( 'useProgram' ).set( _totalUseProgramCalls );
|
||||||
|
_rS( 'glfaces' ).set( _totalFaces );
|
||||||
|
_rS( 'glvertices' ).set( _totalVertices );
|
||||||
|
_rS( 'glpoints' ).set( _totalPoints );
|
||||||
|
}
|
||||||
|
|
||||||
|
function _start () {
|
||||||
|
_totalDrawArraysCalls = 0;
|
||||||
|
_totalDrawElementsCalls = 0;
|
||||||
|
_totalUseProgramCalls = 0;
|
||||||
|
_totalFaces = 0;
|
||||||
|
_totalVertices = 0;
|
||||||
|
_totalPoints = 0;
|
||||||
|
_totalBindTexures = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _end () {}
|
||||||
|
|
||||||
|
function _attach ( r ) {
|
||||||
|
_rS = r;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
update: _update,
|
||||||
|
start: _start,
|
||||||
|
end: _end,
|
||||||
|
attach: _attach,
|
||||||
|
values: _values,
|
||||||
|
groups: _groups,
|
||||||
|
fractions: _fractions
|
||||||
|
};
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
window.threeStats = function ( renderer ) {
|
||||||
|
|
||||||
|
var _rS = null;
|
||||||
|
|
||||||
|
var _values = {
|
||||||
|
'renderer.info.memory.geometries': {
|
||||||
|
caption: 'Geometries'
|
||||||
|
},
|
||||||
|
'renderer.info.memory.textures': {
|
||||||
|
caption: 'Textures'
|
||||||
|
},
|
||||||
|
'renderer.info.programs': {
|
||||||
|
caption: 'Programs'
|
||||||
|
},
|
||||||
|
'renderer.info.render.calls': {
|
||||||
|
caption: 'Calls'
|
||||||
|
},
|
||||||
|
'renderer.info.render.faces': {
|
||||||
|
caption: 'Faces',
|
||||||
|
over: 1000
|
||||||
|
},
|
||||||
|
'renderer.info.render.points': {
|
||||||
|
caption: 'Points'
|
||||||
|
},
|
||||||
|
'renderer.info.render.vertices': {
|
||||||
|
caption: 'Vertices'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var _groups = [ {
|
||||||
|
caption: 'Three.js - Memory',
|
||||||
|
values: [ 'renderer.info.memory.geometries', 'renderer.info.programs', 'renderer.info.memory.textures' ]
|
||||||
|
}, {
|
||||||
|
caption: 'Three.js - Render',
|
||||||
|
values: [ 'renderer.info.render.calls', 'renderer.info.render.faces', 'renderer.info.render.points', 'renderer.info.render.vertices' ]
|
||||||
|
} ];
|
||||||
|
|
||||||
|
var _fractions = [];
|
||||||
|
|
||||||
|
function _update () {
|
||||||
|
|
||||||
|
_rS( 'renderer.info.memory.geometries' ).set( renderer.info.memory.geometries );
|
||||||
|
//_rS( 'renderer.info.programs' ).set( renderer.info.programs.length );
|
||||||
|
_rS( 'renderer.info.memory.textures' ).set( renderer.info.memory.textures );
|
||||||
|
_rS( 'renderer.info.render.calls' ).set( renderer.info.render.calls );
|
||||||
|
_rS( 'renderer.info.render.faces' ).set( renderer.info.render.faces );
|
||||||
|
_rS( 'renderer.info.render.points' ).set( renderer.info.render.points );
|
||||||
|
_rS( 'renderer.info.render.vertices' ).set( renderer.info.render.vertices );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function _start () {}
|
||||||
|
|
||||||
|
function _end () {}
|
||||||
|
|
||||||
|
function _attach ( r ) {
|
||||||
|
_rS = r;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
update: _update,
|
||||||
|
start: _start,
|
||||||
|
end: _end,
|
||||||
|
attach: _attach,
|
||||||
|
values: _values,
|
||||||
|
groups: _groups,
|
||||||
|
fractions: _fractions
|
||||||
|
};
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* From https://github.com/paulirish/memory-stats.js
|
||||||
|
*/
|
||||||
|
|
||||||
|
window.BrowserStats = function () {
|
||||||
|
|
||||||
|
var _rS = null;
|
||||||
|
|
||||||
|
var _usedJSHeapSize = 0,
|
||||||
|
_totalJSHeapSize = 0;
|
||||||
|
|
||||||
|
var memory = {
|
||||||
|
usedJSHeapSize: 0,
|
||||||
|
totalJSHeapSize: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
if ( window.performance && performance.memory )
|
||||||
|
memory = performance.memory;
|
||||||
|
|
||||||
|
if ( memory.totalJSHeapSize === 0 ) {
|
||||||
|
console.warn( 'totalJSHeapSize === 0... performance.memory is only available in Chrome .' );
|
||||||
|
}
|
||||||
|
|
||||||
|
var _values = {
|
||||||
|
memory: {
|
||||||
|
caption: 'Used Memory',
|
||||||
|
average: true,
|
||||||
|
avgMs: 1000,
|
||||||
|
over: 22
|
||||||
|
},
|
||||||
|
total: {
|
||||||
|
caption: 'Total Memory'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var _groups = [ {
|
||||||
|
caption: 'Browser',
|
||||||
|
values: [ 'memory', 'total' ]
|
||||||
|
} ];
|
||||||
|
|
||||||
|
var _fractions = [ {
|
||||||
|
base: 'total',
|
||||||
|
steps: [ 'memory' ]
|
||||||
|
} ];
|
||||||
|
|
||||||
|
var log1024 = Math.log( 1024 );
|
||||||
|
|
||||||
|
function _size ( v ) {
|
||||||
|
|
||||||
|
var precision = 100; //Math.pow(10, 2);
|
||||||
|
var i = Math.floor( Math.log( v ) / log1024 );
|
||||||
|
if( v === 0 ) i = 1;
|
||||||
|
return Math.round( v * precision / Math.pow( 1024, i ) ) / precision; // + ' ' + sizes[i];
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function _update () {
|
||||||
|
_usedJSHeapSize = _size( memory.usedJSHeapSize );
|
||||||
|
_totalJSHeapSize = _size( memory.totalJSHeapSize );
|
||||||
|
|
||||||
|
_rS( 'memory' ).set( _usedJSHeapSize );
|
||||||
|
_rS( 'total' ).set( _totalJSHeapSize );
|
||||||
|
}
|
||||||
|
|
||||||
|
function _start () {
|
||||||
|
_usedJSHeapSize = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _end () {}
|
||||||
|
|
||||||
|
function _attach ( r ) {
|
||||||
|
_rS = r;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
update: _update,
|
||||||
|
start: _start,
|
||||||
|
end: _end,
|
||||||
|
attach: _attach,
|
||||||
|
values: _values,
|
||||||
|
groups: _groups,
|
||||||
|
fractions: _fractions
|
||||||
|
};
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof module === 'object') {
|
||||||
|
module.exports = {
|
||||||
|
glStats: window.glStats,
|
||||||
|
threeStats: window.threeStats,
|
||||||
|
BrowserStats: window.BrowserStats
|
||||||
|
};
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 636 KiB |
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Three.js Webpack ES6 Boilerplate</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="/assets/css/app.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="content">
|
||||||
|
<div id="appContainer" class="main">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="/assets/js/rStats.js"></script>
|
||||||
|
<script src="/assets/js/dat.gui.min.js"></script>
|
||||||
|
<script src="/assets/js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,95 @@
|
||||||
|
var webpack = require('webpack'),
|
||||||
|
path = require('path');
|
||||||
|
|
||||||
|
var entry = './src/js/app.js',
|
||||||
|
includePath = path.join(__dirname, 'src/js'),
|
||||||
|
nodeModulesPath = path.join(__dirname, 'node_modules'),
|
||||||
|
outputPath = path.join(__dirname, 'src/public/assets/js');
|
||||||
|
|
||||||
|
var PROD = JSON.parse(process.env.NODE_ENV || 0);
|
||||||
|
|
||||||
|
var env = 'dev',
|
||||||
|
time = Date.now(),
|
||||||
|
devtool = 'eval',
|
||||||
|
debug = true,
|
||||||
|
plugins = [
|
||||||
|
new webpack.NoErrorsPlugin(),
|
||||||
|
new webpack.DefinePlugin({
|
||||||
|
__ENV__: JSON.stringify(env),
|
||||||
|
___BUILD_TIME___: time
|
||||||
|
})
|
||||||
|
];
|
||||||
|
|
||||||
|
if(PROD) {
|
||||||
|
env = 'prod';
|
||||||
|
devtool = 'hidden-source-map';
|
||||||
|
debug = false;
|
||||||
|
outputPath = __dirname + '/build/public/assets/js';
|
||||||
|
|
||||||
|
uglifyOptions = {
|
||||||
|
sourceMap: false,
|
||||||
|
mangle: true,
|
||||||
|
compress: {
|
||||||
|
drop_console: true
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
comments: false
|
||||||
|
}
|
||||||
|
};
|
||||||
|
plugins.push(new webpack.optimize.UglifyJsPlugin(uglifyOptions));
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('Webpack build - ENV: ' + env + ' V: ' + time);
|
||||||
|
console.log(' - outputPath ', outputPath);
|
||||||
|
console.log(' - includePath ', includePath);
|
||||||
|
console.log(' - nodeModulesPath ', nodeModulesPath);
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
stats: {
|
||||||
|
colors: true
|
||||||
|
},
|
||||||
|
|
||||||
|
debug: debug,
|
||||||
|
|
||||||
|
devtool: devtool,
|
||||||
|
|
||||||
|
devServer: {
|
||||||
|
contentBase: 'src/public'
|
||||||
|
},
|
||||||
|
|
||||||
|
entry: [
|
||||||
|
entry
|
||||||
|
],
|
||||||
|
|
||||||
|
output: {
|
||||||
|
path: outputPath,
|
||||||
|
publicPath: 'assets/js',
|
||||||
|
filename: 'app.js'
|
||||||
|
},
|
||||||
|
|
||||||
|
module: {
|
||||||
|
loaders: [
|
||||||
|
{
|
||||||
|
test: /\.js?$/,
|
||||||
|
loader: 'babel-loader',
|
||||||
|
query: {
|
||||||
|
presets: ['es2015']
|
||||||
|
},
|
||||||
|
include: [
|
||||||
|
includePath, nodeModulesPath
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
sassLoader: {
|
||||||
|
outputStyle: 'compressed',
|
||||||
|
outFile: __dirname + '/src/public/assets/css'
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: plugins,
|
||||||
|
|
||||||
|
resolve: {
|
||||||
|
alias: {}
|
||||||
|
}
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue