forked from ppfun/pixelplanet
Remove old static globe files,
include recaptcha just in html if specifically required
This commit is contained in:
parent
eb98167825
commit
297c70f6b0
14
package.json
14
package.json
|
@ -38,7 +38,6 @@
|
||||||
"express-session": "^1.15.2",
|
"express-session": "^1.15.2",
|
||||||
"express-validator": "^3.2.0",
|
"express-validator": "^3.2.0",
|
||||||
"global": "^4.3.2",
|
"global": "^4.3.2",
|
||||||
"hammerjs": "^2.0.8",
|
|
||||||
"http-proxy-agent": "^2.1.0",
|
"http-proxy-agent": "^2.1.0",
|
||||||
"ip": "^1.1.5",
|
"ip": "^1.1.5",
|
||||||
"ip-address": "^5.8.9",
|
"ip-address": "^5.8.9",
|
||||||
|
@ -57,7 +56,6 @@
|
||||||
"passport-json": "^1.2.0",
|
"passport-json": "^1.2.0",
|
||||||
"passport-reddit": "^0.2.4",
|
"passport-reddit": "^0.2.4",
|
||||||
"passport-vkontakte": "^0.3.2",
|
"passport-vkontakte": "^0.3.2",
|
||||||
"push.js": "1.0.9",
|
|
||||||
"react": "^16.9.0",
|
"react": "^16.9.0",
|
||||||
"react-dom": "^16.9.0",
|
"react-dom": "^16.9.0",
|
||||||
"react-file-download": "^0.3.4",
|
"react-file-download": "^0.3.4",
|
||||||
|
@ -73,14 +71,9 @@
|
||||||
"redux-logger": "^3.0.6",
|
"redux-logger": "^3.0.6",
|
||||||
"redux-persist": "^6.0.0",
|
"redux-persist": "^6.0.0",
|
||||||
"redux-thunk": "^2.2.0",
|
"redux-thunk": "^2.2.0",
|
||||||
"rimraf": "^2.6.1",
|
|
||||||
"sendmail": "^1.6.1",
|
"sendmail": "^1.6.1",
|
||||||
"sequelize": "^5.19.2",
|
"sequelize": "^5.19.2",
|
||||||
"sharp": "^0.21.3",
|
"sharp": "^0.21.3",
|
||||||
"startaudiocontext": "^1.2.1",
|
|
||||||
"sweetalert2": "^6.6.6",
|
|
||||||
"three": "^0.112.1",
|
|
||||||
"three-trackballcontrols-ts": "^0.1.2",
|
|
||||||
"url-search-params-polyfill": "^7.0.0",
|
"url-search-params-polyfill": "^7.0.0",
|
||||||
"validator": "^7.0.0",
|
"validator": "^7.0.0",
|
||||||
"visibilityjs": "^1.2.4",
|
"visibilityjs": "^1.2.4",
|
||||||
|
@ -88,6 +81,13 @@
|
||||||
"ws": "^7.1.2"
|
"ws": "^7.1.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"three": "^0.112.1",
|
||||||
|
"three-trackballcontrols-ts": "^0.1.2",
|
||||||
|
"hammerjs": "^2.0.8",
|
||||||
|
"push.js": "1.0.9",
|
||||||
|
"startaudiocontext": "^1.2.1",
|
||||||
|
"sweetalert2": "^6.6.6",
|
||||||
|
"rimraf": "^2.6.1",
|
||||||
"@babel/core": "^7.0.0",
|
"@babel/core": "^7.0.0",
|
||||||
"@babel/node": "^7.0.0",
|
"@babel/node": "^7.0.0",
|
||||||
"@babel/plugin-proposal-class-properties": "^7.0.0",
|
"@babel/plugin-proposal-class-properties": "^7.0.0",
|
||||||
|
|
|
@ -1,40 +0,0 @@
|
||||||
/**
|
|
||||||
* @author alteredq / http://alteredqualia.com/
|
|
||||||
* @author mr.doob / http://mrdoob.com/
|
|
||||||
*/
|
|
||||||
|
|
||||||
var Detector = {
|
|
||||||
|
|
||||||
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.className = 'webgl-error';
|
|
||||||
|
|
||||||
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">WebGL</a>.<br />',
|
|
||||||
'Find out how to get it <a href="http://get.webgl.org/">here</a>.'
|
|
||||||
].join( '\n' ) : [
|
|
||||||
'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>.<br/>',
|
|
||||||
'Find out how to get it <a href="http://get.webgl.org/">here</a>.'
|
|
||||||
].join( '\n' );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
return element;
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
addGetWebGLMessage: function (parent ) {
|
|
||||||
|
|
||||||
parent.appendChild( Detector.getWebGLErrorMessage() );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
|
@ -1,537 +0,0 @@
|
||||||
/**
|
|
||||||
* @author Eberhard Graether / http://egraether.com/
|
|
||||||
*/
|
|
||||||
|
|
||||||
THREE.TrackballControls = function ( object, domElement ) {
|
|
||||||
|
|
||||||
var _this = this;
|
|
||||||
var STATE = { NONE: -1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM: 4, TOUCH_PAN: 5 };
|
|
||||||
|
|
||||||
this.object = object;
|
|
||||||
this.domElement = ( domElement !== undefined ) ? domElement : document;
|
|
||||||
|
|
||||||
// API
|
|
||||||
|
|
||||||
this.enabled = true;
|
|
||||||
|
|
||||||
this.screen = { width: 0, height: 0, offsetLeft: 0, offsetTop: 0 };
|
|
||||||
this.radius = ( this.screen.width + this.screen.height ) / 4;
|
|
||||||
|
|
||||||
this.rotateSpeed = 1.0;
|
|
||||||
this.zoomSpeed = 1.2;
|
|
||||||
this.panSpeed = 0.3;
|
|
||||||
|
|
||||||
this.noRotate = false;
|
|
||||||
this.noZoom = false;
|
|
||||||
this.noPan = false;
|
|
||||||
|
|
||||||
this.staticMoving = false;
|
|
||||||
this.dynamicDampingFactor = 0.2;
|
|
||||||
|
|
||||||
this.minDistance = 1.6;
|
|
||||||
this.maxDistance = 118.32;
|
|
||||||
|
|
||||||
this.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];
|
|
||||||
|
|
||||||
// internals
|
|
||||||
|
|
||||||
this.target = new THREE.Vector3();
|
|
||||||
|
|
||||||
var lastPosition = new THREE.Vector3();
|
|
||||||
|
|
||||||
var _state = STATE.NONE,
|
|
||||||
_prevState = STATE.NONE,
|
|
||||||
|
|
||||||
_eye = new THREE.Vector3(),
|
|
||||||
|
|
||||||
_rotateStart = new THREE.Vector3(),
|
|
||||||
_rotateEnd = new THREE.Vector3(),
|
|
||||||
|
|
||||||
_zoomStart = new THREE.Vector2(),
|
|
||||||
_zoomEnd = new THREE.Vector2(),
|
|
||||||
|
|
||||||
_touchZoomDistanceStart = 0,
|
|
||||||
_touchZoomDistanceEnd = 0,
|
|
||||||
|
|
||||||
_panStart = new THREE.Vector2(),
|
|
||||||
_panEnd = new THREE.Vector2();
|
|
||||||
|
|
||||||
// for reset
|
|
||||||
|
|
||||||
this.target0 = this.target.clone();
|
|
||||||
this.position0 = this.object.position.clone();
|
|
||||||
this.up0 = this.object.up.clone();
|
|
||||||
|
|
||||||
// events
|
|
||||||
|
|
||||||
var changeEvent = { type: 'change' };
|
|
||||||
|
|
||||||
|
|
||||||
// methods
|
|
||||||
|
|
||||||
this.handleResize = function () {
|
|
||||||
|
|
||||||
this.screen.width = window.innerWidth;
|
|
||||||
this.screen.height = window.innerHeight;
|
|
||||||
|
|
||||||
this.screen.offsetLeft = 0;
|
|
||||||
this.screen.offsetTop = 0;
|
|
||||||
|
|
||||||
this.radius = ( this.screen.width + this.screen.height ) / 4;
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.handleEvent = function ( event ) {
|
|
||||||
|
|
||||||
if ( typeof this[ event.type ] == 'function' ) {
|
|
||||||
|
|
||||||
this[ event.type ]( event );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.getMouseOnScreen = function ( clientX, clientY ) {
|
|
||||||
|
|
||||||
return new THREE.Vector2(
|
|
||||||
( clientX - _this.screen.offsetLeft ) / _this.radius * 0.5,
|
|
||||||
( clientY - _this.screen.offsetTop ) / _this.radius * 0.5
|
|
||||||
);
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.getMouseProjectionOnBall = function ( clientX, clientY ) {
|
|
||||||
|
|
||||||
var mouseOnBall = new THREE.Vector3(
|
|
||||||
( clientX - _this.screen.width * 0.5 - _this.screen.offsetLeft ) / _this.radius,
|
|
||||||
( _this.screen.height * 0.5 + _this.screen.offsetTop - clientY ) / _this.radius,
|
|
||||||
0.0
|
|
||||||
);
|
|
||||||
|
|
||||||
var length = mouseOnBall.length();
|
|
||||||
|
|
||||||
if ( length > 1.0 ) {
|
|
||||||
|
|
||||||
mouseOnBall.normalize();
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
mouseOnBall.z = Math.sqrt( 1.0 - length * length );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
_eye.copy( _this.object.position ).sub( _this.target );
|
|
||||||
|
|
||||||
var projection = _this.object.up.clone().setLength( mouseOnBall.y );
|
|
||||||
projection.add( _this.object.up.clone().cross( _eye ).setLength( mouseOnBall.x ) );
|
|
||||||
projection.add( _eye.setLength( mouseOnBall.z ) );
|
|
||||||
|
|
||||||
return projection;
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.rotateCamera = function () {
|
|
||||||
|
|
||||||
var angle = Math.acos( _rotateStart.dot( _rotateEnd ) / _rotateStart.length() / _rotateEnd.length() );
|
|
||||||
|
|
||||||
if ( angle ) {
|
|
||||||
|
|
||||||
var axis = ( new THREE.Vector3() ).crossVectors( _rotateStart, _rotateEnd ).normalize();
|
|
||||||
quaternion = new THREE.Quaternion();
|
|
||||||
|
|
||||||
angle *= _this.rotateSpeed;
|
|
||||||
|
|
||||||
quaternion.setFromAxisAngle( axis, -angle );
|
|
||||||
|
|
||||||
_eye.applyQuaternion( quaternion );
|
|
||||||
_this.object.up.applyQuaternion( quaternion );
|
|
||||||
|
|
||||||
_rotateEnd.applyQuaternion( quaternion );
|
|
||||||
|
|
||||||
if ( _this.staticMoving ) {
|
|
||||||
|
|
||||||
_rotateStart.copy( _rotateEnd );
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
quaternion.setFromAxisAngle( axis, angle * ( _this.dynamicDampingFactor - 1.0 ) );
|
|
||||||
_rotateStart.applyQuaternion( quaternion );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.zoomCamera = function () {
|
|
||||||
|
|
||||||
if ( _state === STATE.TOUCH_ZOOM ) {
|
|
||||||
|
|
||||||
var factor = _touchZoomDistanceStart / _touchZoomDistanceEnd;
|
|
||||||
_touchZoomDistanceStart = _touchZoomDistanceEnd;
|
|
||||||
_eye.multiplyScalar( factor );
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
var factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * _this.zoomSpeed;
|
|
||||||
|
|
||||||
if ( factor !== 1.0 && factor > 0.0 ) {
|
|
||||||
|
|
||||||
_eye.multiplyScalar( factor );
|
|
||||||
|
|
||||||
if ( _this.staticMoving ) {
|
|
||||||
|
|
||||||
_zoomStart.copy( _zoomEnd );
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
_zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.panCamera = function () {
|
|
||||||
|
|
||||||
var mouseChange = _panEnd.clone().sub( _panStart );
|
|
||||||
|
|
||||||
if ( mouseChange.lengthSq() ) {
|
|
||||||
|
|
||||||
mouseChange.multiplyScalar( _eye.length() * _this.panSpeed );
|
|
||||||
|
|
||||||
var pan = _eye.clone().cross( _this.object.up ).setLength( mouseChange.x );
|
|
||||||
pan.add( _this.object.up.clone().setLength( mouseChange.y ) );
|
|
||||||
|
|
||||||
_this.object.position.add( pan );
|
|
||||||
_this.target.add( pan );
|
|
||||||
|
|
||||||
if ( _this.staticMoving ) {
|
|
||||||
|
|
||||||
_panStart = _panEnd;
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
_panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( _this.dynamicDampingFactor ) );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.checkDistances = function () {
|
|
||||||
|
|
||||||
if ( !_this.noZoom || !_this.noPan ) {
|
|
||||||
|
|
||||||
if ( _this.object.position.lengthSq() > _this.maxDistance * _this.maxDistance ) {
|
|
||||||
|
|
||||||
_this.object.position.setLength( _this.maxDistance );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( _eye.lengthSq() < _this.minDistance * _this.minDistance ) {
|
|
||||||
|
|
||||||
_this.object.position.addVectors( _this.target, _eye.setLength( _this.minDistance ) );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.update = function () {
|
|
||||||
|
|
||||||
_eye.subVectors( _this.object.position, _this.target );
|
|
||||||
|
|
||||||
if ( !_this.noRotate ) {
|
|
||||||
|
|
||||||
_this.rotateCamera();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( !_this.noZoom ) {
|
|
||||||
|
|
||||||
_this.zoomCamera();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( !_this.noPan ) {
|
|
||||||
|
|
||||||
_this.panCamera();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
_this.object.position.addVectors( _this.target, _eye );
|
|
||||||
|
|
||||||
_this.checkDistances();
|
|
||||||
|
|
||||||
_this.object.lookAt( _this.target );
|
|
||||||
|
|
||||||
if ( lastPosition.distanceToSquared( _this.object.position ) > 0 ) {
|
|
||||||
|
|
||||||
_this.dispatchEvent( changeEvent );
|
|
||||||
|
|
||||||
lastPosition.copy( _this.object.position );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.reset = function () {
|
|
||||||
|
|
||||||
_state = STATE.NONE;
|
|
||||||
_prevState = STATE.NONE;
|
|
||||||
|
|
||||||
_this.target.copy( _this.target0 );
|
|
||||||
_this.object.position.copy( _this.position0 );
|
|
||||||
_this.object.up.copy( _this.up0 );
|
|
||||||
|
|
||||||
_eye.subVectors( _this.object.position, _this.target );
|
|
||||||
|
|
||||||
_this.object.lookAt( _this.target );
|
|
||||||
|
|
||||||
_this.dispatchEvent( changeEvent );
|
|
||||||
|
|
||||||
lastPosition.copy( _this.object.position );
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
// listeners
|
|
||||||
|
|
||||||
function keydown( event ) {
|
|
||||||
|
|
||||||
if ( _this.enabled === false ) return;
|
|
||||||
|
|
||||||
window.removeEventListener( 'keydown', keydown );
|
|
||||||
|
|
||||||
_prevState = _state;
|
|
||||||
|
|
||||||
if ( _state !== STATE.NONE ) {
|
|
||||||
|
|
||||||
return;
|
|
||||||
|
|
||||||
} else if ( event.keyCode === _this.keys[ STATE.ROTATE ] && !_this.noRotate ) {
|
|
||||||
|
|
||||||
_state = STATE.ROTATE;
|
|
||||||
|
|
||||||
} else if ( event.keyCode === _this.keys[ STATE.ZOOM ] && !_this.noZoom ) {
|
|
||||||
|
|
||||||
_state = STATE.ZOOM;
|
|
||||||
|
|
||||||
} else if ( event.keyCode === _this.keys[ STATE.PAN ] && !_this.noPan ) {
|
|
||||||
|
|
||||||
_state = STATE.PAN;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function keyup( event ) {
|
|
||||||
|
|
||||||
if ( _this.enabled === false ) return;
|
|
||||||
|
|
||||||
_state = _prevState;
|
|
||||||
|
|
||||||
window.addEventListener( 'keydown', keydown, false );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function mousedown( event ) {
|
|
||||||
|
|
||||||
if ( _this.enabled === false ) return;
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
if ( _state === STATE.NONE ) {
|
|
||||||
|
|
||||||
_state = event.button;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( _state === STATE.ROTATE && !_this.noRotate ) {
|
|
||||||
|
|
||||||
_rotateStart = _rotateEnd = _this.getMouseProjectionOnBall( event.clientX, event.clientY );
|
|
||||||
|
|
||||||
} else if ( _state === STATE.ZOOM && !_this.noZoom ) {
|
|
||||||
|
|
||||||
_zoomStart = _zoomEnd = _this.getMouseOnScreen( event.clientX, event.clientY );
|
|
||||||
|
|
||||||
} else if ( _state === STATE.PAN && !_this.noPan ) {
|
|
||||||
|
|
||||||
_panStart = _panEnd = _this.getMouseOnScreen( event.clientX, event.clientY );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener( 'mousemove', mousemove, false );
|
|
||||||
document.addEventListener( 'mouseup', mouseup, false );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function mousemove( event ) {
|
|
||||||
|
|
||||||
if ( _this.enabled === false ) return;
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
if ( _state === STATE.ROTATE && !_this.noRotate ) {
|
|
||||||
|
|
||||||
_rotateEnd = _this.getMouseProjectionOnBall( event.clientX, event.clientY );
|
|
||||||
|
|
||||||
} else if ( _state === STATE.ZOOM && !_this.noZoom ) {
|
|
||||||
|
|
||||||
_zoomEnd = _this.getMouseOnScreen( event.clientX, event.clientY );
|
|
||||||
|
|
||||||
} else if ( _state === STATE.PAN && !_this.noPan ) {
|
|
||||||
|
|
||||||
_panEnd = _this.getMouseOnScreen( event.clientX, event.clientY );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function mouseup( event ) {
|
|
||||||
|
|
||||||
if ( _this.enabled === false ) return;
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
_state = STATE.NONE;
|
|
||||||
|
|
||||||
document.removeEventListener( 'mousemove', mousemove );
|
|
||||||
document.removeEventListener( 'mouseup', mouseup );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function mousewheel( event ) {
|
|
||||||
|
|
||||||
if ( _this.enabled === false ) return;
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
var delta = 0;
|
|
||||||
|
|
||||||
if ( event.wheelDelta ) { // WebKit / Opera / Explorer 9
|
|
||||||
|
|
||||||
delta = event.wheelDelta / 40;
|
|
||||||
|
|
||||||
} else if ( event.detail ) { // Firefox
|
|
||||||
|
|
||||||
delta = - event.detail / 3;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
_zoomStart.y += delta * 0.01;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function touchstart( event ) {
|
|
||||||
|
|
||||||
if ( _this.enabled === false ) return;
|
|
||||||
|
|
||||||
switch ( event.touches.length ) {
|
|
||||||
|
|
||||||
case 1:
|
|
||||||
_state = STATE.TOUCH_ROTATE;
|
|
||||||
_rotateStart = _rotateEnd = _this.getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 2:
|
|
||||||
_state = STATE.TOUCH_ZOOM;
|
|
||||||
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
|
|
||||||
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
|
|
||||||
_touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy );
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 3:
|
|
||||||
_state = STATE.TOUCH_PAN;
|
|
||||||
_panStart = _panEnd = _this.getMouseOnScreen( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
|
||||||
_state = STATE.NONE;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function touchmove( event ) {
|
|
||||||
|
|
||||||
if ( _this.enabled === false ) return;
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
switch ( event.touches.length ) {
|
|
||||||
|
|
||||||
case 1:
|
|
||||||
_rotateEnd = _this.getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 2:
|
|
||||||
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
|
|
||||||
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
|
|
||||||
_touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy )
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 3:
|
|
||||||
_panEnd = _this.getMouseOnScreen( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
|
||||||
_state = STATE.NONE;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function touchend( event ) {
|
|
||||||
|
|
||||||
if ( _this.enabled === false ) return;
|
|
||||||
|
|
||||||
switch ( event.touches.length ) {
|
|
||||||
|
|
||||||
case 1:
|
|
||||||
_rotateStart = _rotateEnd = _this.getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 2:
|
|
||||||
_touchZoomDistanceStart = _touchZoomDistanceEnd = 0;
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 3:
|
|
||||||
_panStart = _panEnd = _this.getMouseOnScreen( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
|
|
||||||
break;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
_state = STATE.NONE;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
this.domElement.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
|
|
||||||
|
|
||||||
this.domElement.addEventListener( 'mousedown', mousedown, false );
|
|
||||||
|
|
||||||
this.domElement.addEventListener( 'mousewheel', mousewheel, false );
|
|
||||||
this.domElement.addEventListener( 'DOMMouseScroll', mousewheel, false ); // firefox
|
|
||||||
|
|
||||||
this.domElement.addEventListener( 'touchstart', touchstart, false );
|
|
||||||
this.domElement.addEventListener( 'touchend', touchend, false );
|
|
||||||
this.domElement.addEventListener( 'touchmove', touchmove, false );
|
|
||||||
|
|
||||||
window.addEventListener( 'keydown', keydown, false );
|
|
||||||
window.addEventListener( 'keyup', keyup, false );
|
|
||||||
|
|
||||||
this.handleResize();
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
THREE.TrackballControls.prototype = Object.create( THREE.EventDispatcher.prototype );
|
|
|
@ -1,26 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>PixelPlanet.fun</title>
|
|
||||||
<style>
|
|
||||||
body { margin: 0; overflow: hidden; background-color: #000; font-size: 16px; font-family: Montserrat,sans-serif; }
|
|
||||||
.tm { position: absolute; top: 10px; right: 10px; }
|
|
||||||
.webgl-error { font: 15px/30px monospace; text-align: center; color: #fff; margin: 50px; }
|
|
||||||
.webgl-error a { color: #fff; }
|
|
||||||
#coorbox { position: absolute; background-color: hsla(0,0%,89%,.8); color: #000; text-align: center; vertical-align: middle; line-height: 36px; width: auto; height: 36px; padding: 0 24px; border: solid #000; border-width: thin; left: 16px; bottom: 16px}
|
|
||||||
#info { font-size: 13px; position: absolute; background-color: hsla(0,0%,89%,.8); color: #000; text-align: center; vertical-align: middle; line-height: 36px; width: auto; height: 36px; padding: 0 24px; border: solid #000; border-width: thin; left: 16px; top: 16px}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="webgl"></div>
|
|
||||||
<div id="coorbox">(0, 0)</div>
|
|
||||||
<div id="info">Double click on globe to go back.</div>
|
|
||||||
<script src="https://unpkg.com/three@0.91.0/build/three.min.js"></script>
|
|
||||||
<script src="https://unpkg.com/three@0.91.0/examples/js/loaders/GLTFLoader.js"></script>
|
|
||||||
<script src="Detector.js"></script>
|
|
||||||
<script src="TrackballControls.js"></script>
|
|
||||||
<script src="space.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
|
@ -1,178 +0,0 @@
|
||||||
(function () {
|
|
||||||
function checkMaterial(object) {
|
|
||||||
if (object.material) {
|
|
||||||
const materialName = object.material.name;
|
|
||||||
if (materialName == "canvas") {
|
|
||||||
console.log("Found material");
|
|
||||||
object.material = canvasTexture;
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function parseHashCoords() {
|
|
||||||
try {
|
|
||||||
const hash = window.location.hash;
|
|
||||||
const array = hash.substring(1).split(',');
|
|
||||||
const ident = array.shift();
|
|
||||||
const [id, size, x, y] = array.map((z) => parseInt(z));
|
|
||||||
if (!ident || isNaN(x) || isNaN(y) || isNaN(id) || isNaN(size)) {
|
|
||||||
throw "NaN";
|
|
||||||
}
|
|
||||||
return [ident, id, size, x, y];
|
|
||||||
} catch (error) {
|
|
||||||
return ['d', 0, 65536, 0, 0];
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function rotateToCoords(canvasSize, object, coords) {
|
|
||||||
console.log("Rotate to", coords);
|
|
||||||
const [x, y] = coords;
|
|
||||||
const rotOffsetX = 0;
|
|
||||||
const rotOffsetY = 3 * Math.PI / 2;
|
|
||||||
const rotX = -y * Math.PI / canvasSize;
|
|
||||||
const rotY = -x * 2 * Math.PI / canvasSize;
|
|
||||||
object.rotation.x += rotOffsetX + rotX;
|
|
||||||
object.rotation.y += rotOffsetY + rotY;
|
|
||||||
}
|
|
||||||
|
|
||||||
var webglEl = document.getElementById('webgl');
|
|
||||||
|
|
||||||
if (!Detector.webgl) {
|
|
||||||
Detector.addGetWebGLMessage(webglEl);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const [canvasIdent, canvasId, canvasSize, x, y] = parseHashCoords();
|
|
||||||
|
|
||||||
const canvasTexture = new THREE.MeshPhongMaterial({
|
|
||||||
map: new THREE.TextureLoader().load(`../tiles/${canvasId}/texture.png`),
|
|
||||||
bumpMap: new THREE.TextureLoader().load((canvasId == 0) ? 'normal.jpg' : 'normalm.jpg'),
|
|
||||||
bumpScale: 0.02,
|
|
||||||
specularMap: new THREE.TextureLoader().load((canvasId == 0) ? 'specular.jpg' : 'specularm.jpg'),
|
|
||||||
specular: new THREE.Color('grey')
|
|
||||||
});
|
|
||||||
|
|
||||||
var width = window.innerWidth,
|
|
||||||
height = window.innerHeight;
|
|
||||||
|
|
||||||
var scene = new THREE.Scene();
|
|
||||||
|
|
||||||
var camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);
|
|
||||||
camera.position.z = 4.0;
|
|
||||||
|
|
||||||
var renderer = new THREE.WebGLRenderer();
|
|
||||||
renderer.setSize(width, height);
|
|
||||||
|
|
||||||
scene.add(new THREE.AmbientLight(0x333333));
|
|
||||||
|
|
||||||
var light = new THREE.DirectionalLight(0xffffff, 0.7);
|
|
||||||
light.position.set(10,6,10);
|
|
||||||
scene.add(light);
|
|
||||||
|
|
||||||
var object = null;
|
|
||||||
var loader = new THREE.GLTFLoader();
|
|
||||||
loader.load('globe.glb', function (glb) {
|
|
||||||
scene.add(glb.scene);
|
|
||||||
const children = glb.scene.children;
|
|
||||||
for (let cnt = 0; cnt < children.length; cnt++) {
|
|
||||||
//children[cnt].scale.x *= -1;
|
|
||||||
//children[cnt].scale.y *= -1;
|
|
||||||
if (checkMaterial(children[cnt]))
|
|
||||||
object = children[cnt];
|
|
||||||
const grandchildren = children[cnt].children;
|
|
||||||
for (let xnt = 0; xnt < grandchildren.length; xnt++) {
|
|
||||||
if (checkMaterial(grandchildren[xnt]))
|
|
||||||
object = children[cnt];
|
|
||||||
//children[cnt].material.side = THREE.DoubleSide;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
rotateToCoords(canvasSize, object, [x, y]);
|
|
||||||
}, function (xhr) {console.log((xhr.loaded / xhr.total * 100) + '% loaded');
|
|
||||||
}, function (error) {console.log('An error happened', error);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// Earth params
|
|
||||||
var radius = 0.5,
|
|
||||||
segments = 32,
|
|
||||||
rotation = 6;
|
|
||||||
|
|
||||||
|
|
||||||
var stars = createStars(90, 64);
|
|
||||||
scene.add(stars);
|
|
||||||
|
|
||||||
var controls = new THREE.TrackballControls(camera);
|
|
||||||
|
|
||||||
webglEl.appendChild(renderer.domElement);
|
|
||||||
|
|
||||||
render();
|
|
||||||
|
|
||||||
function render() {
|
|
||||||
controls.update();
|
|
||||||
if (object) object.rotation.y += 0.0005;
|
|
||||||
requestAnimationFrame(render);
|
|
||||||
renderer.render(scene, camera);
|
|
||||||
}
|
|
||||||
|
|
||||||
function createStars(radius, segments) {
|
|
||||||
return new THREE.Mesh(
|
|
||||||
new THREE.SphereGeometry(radius, segments, segments),
|
|
||||||
new THREE.MeshBasicMaterial({
|
|
||||||
map: THREE.ImageUtils.loadTexture('starfield.png'),
|
|
||||||
side: THREE.BackSide
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
setInterval(onDocumentMouseMove, 1000);
|
|
||||||
|
|
||||||
var raycaster = new THREE.Raycaster();
|
|
||||||
var mouse = new THREE.Vector2();
|
|
||||||
var lastView = [0, 0];
|
|
||||||
const coorbox = document.getElementById("coorbox");
|
|
||||||
function onDocumentMouseMove(event) {
|
|
||||||
if (event) {
|
|
||||||
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
|
|
||||||
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
|
|
||||||
} else {
|
|
||||||
mouse.x = 0.0;
|
|
||||||
mouse.y = 0.0;
|
|
||||||
}
|
|
||||||
|
|
||||||
raycaster.setFromCamera( mouse, camera );
|
|
||||||
var intersects = raycaster.intersectObject( object );
|
|
||||||
|
|
||||||
const elem = document.getElementsByTagName("BODY")[0];
|
|
||||||
if(intersects.length > 0) {
|
|
||||||
const { x, y } = intersects[0].uv;
|
|
||||||
const xabs = Math.floor((x - 0.5) * canvasSize);
|
|
||||||
const yabs = Math.floor((0.5 - y) * canvasSize);
|
|
||||||
//console.log(`On ${xabs} / ${yabs} cam: ${camera.position.z}`);
|
|
||||||
coorbox.innerHTML = `(${xabs}, ${yabs})`;
|
|
||||||
elem.style.cursor = 'move';
|
|
||||||
} else {
|
|
||||||
elem.style.cursor = 'default';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function onDocumentDblClick(event) {
|
|
||||||
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
|
|
||||||
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
|
|
||||||
|
|
||||||
raycaster.setFromCamera( mouse, camera );
|
|
||||||
var intersects = raycaster.intersectObject( object );
|
|
||||||
|
|
||||||
if(intersects.length > 0) {
|
|
||||||
const { x, y } = intersects[0].uv;
|
|
||||||
const xabs = Math.round((x - 0.5) * canvasSize);
|
|
||||||
const yabs = Math.round((0.5 - y) * canvasSize);
|
|
||||||
window.location.href = `../#${canvasIdent},${xabs},${yabs},0`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('mousemove', onDocumentMouseMove, false);
|
|
||||||
document.addEventListener('dblclick', onDocumentDblClick, false);
|
|
||||||
|
|
||||||
}());
|
|
|
@ -1,40 +0,0 @@
|
||||||
/**
|
|
||||||
* @author alteredq / http://alteredqualia.com/
|
|
||||||
* @author mr.doob / http://mrdoob.com/
|
|
||||||
*/
|
|
||||||
|
|
||||||
var Detector = {
|
|
||||||
|
|
||||||
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.className = 'webgl-error';
|
|
||||||
|
|
||||||
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">WebGL</a>.<br />',
|
|
||||||
'Find out how to get it <a href="http://get.webgl.org/">here</a>.'
|
|
||||||
].join( '\n' ) : [
|
|
||||||
'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>.<br/>',
|
|
||||||
'Find out how to get it <a href="http://get.webgl.org/">here</a>.'
|
|
||||||
].join( '\n' );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
return element;
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
addGetWebGLMessage: function (parent ) {
|
|
||||||
|
|
||||||
parent.appendChild( Detector.getWebGLErrorMessage() );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
|
@ -1,537 +0,0 @@
|
||||||
/**
|
|
||||||
* @author Eberhard Graether / http://egraether.com/
|
|
||||||
*/
|
|
||||||
|
|
||||||
THREE.TrackballControls = function ( object, domElement ) {
|
|
||||||
|
|
||||||
var _this = this;
|
|
||||||
var STATE = { NONE: -1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM: 4, TOUCH_PAN: 5 };
|
|
||||||
|
|
||||||
this.object = object;
|
|
||||||
this.domElement = ( domElement !== undefined ) ? domElement : document;
|
|
||||||
|
|
||||||
// API
|
|
||||||
|
|
||||||
this.enabled = true;
|
|
||||||
|
|
||||||
this.screen = { width: 0, height: 0, offsetLeft: 0, offsetTop: 0 };
|
|
||||||
this.radius = ( this.screen.width + this.screen.height ) / 4;
|
|
||||||
|
|
||||||
this.rotateSpeed = 1.0;
|
|
||||||
this.zoomSpeed = 1.2;
|
|
||||||
this.panSpeed = 0.3;
|
|
||||||
|
|
||||||
this.noRotate = false;
|
|
||||||
this.noZoom = false;
|
|
||||||
this.noPan = false;
|
|
||||||
|
|
||||||
this.staticMoving = false;
|
|
||||||
this.dynamicDampingFactor = 0.2;
|
|
||||||
|
|
||||||
this.minDistance = 0;
|
|
||||||
this.maxDistance = Infinity;
|
|
||||||
|
|
||||||
this.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];
|
|
||||||
|
|
||||||
// internals
|
|
||||||
|
|
||||||
this.target = new THREE.Vector3();
|
|
||||||
|
|
||||||
var lastPosition = new THREE.Vector3();
|
|
||||||
|
|
||||||
var _state = STATE.NONE,
|
|
||||||
_prevState = STATE.NONE,
|
|
||||||
|
|
||||||
_eye = new THREE.Vector3(),
|
|
||||||
|
|
||||||
_rotateStart = new THREE.Vector3(),
|
|
||||||
_rotateEnd = new THREE.Vector3(),
|
|
||||||
|
|
||||||
_zoomStart = new THREE.Vector2(),
|
|
||||||
_zoomEnd = new THREE.Vector2(),
|
|
||||||
|
|
||||||
_touchZoomDistanceStart = 0,
|
|
||||||
_touchZoomDistanceEnd = 0,
|
|
||||||
|
|
||||||
_panStart = new THREE.Vector2(),
|
|
||||||
_panEnd = new THREE.Vector2();
|
|
||||||
|
|
||||||
// for reset
|
|
||||||
|
|
||||||
this.target0 = this.target.clone();
|
|
||||||
this.position0 = this.object.position.clone();
|
|
||||||
this.up0 = this.object.up.clone();
|
|
||||||
|
|
||||||
// events
|
|
||||||
|
|
||||||
var changeEvent = { type: 'change' };
|
|
||||||
|
|
||||||
|
|
||||||
// methods
|
|
||||||
|
|
||||||
this.handleResize = function () {
|
|
||||||
|
|
||||||
this.screen.width = window.innerWidth;
|
|
||||||
this.screen.height = window.innerHeight;
|
|
||||||
|
|
||||||
this.screen.offsetLeft = 0;
|
|
||||||
this.screen.offsetTop = 0;
|
|
||||||
|
|
||||||
this.radius = ( this.screen.width + this.screen.height ) / 4;
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.handleEvent = function ( event ) {
|
|
||||||
|
|
||||||
if ( typeof this[ event.type ] == 'function' ) {
|
|
||||||
|
|
||||||
this[ event.type ]( event );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.getMouseOnScreen = function ( clientX, clientY ) {
|
|
||||||
|
|
||||||
return new THREE.Vector2(
|
|
||||||
( clientX - _this.screen.offsetLeft ) / _this.radius * 0.5,
|
|
||||||
( clientY - _this.screen.offsetTop ) / _this.radius * 0.5
|
|
||||||
);
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.getMouseProjectionOnBall = function ( clientX, clientY ) {
|
|
||||||
|
|
||||||
var mouseOnBall = new THREE.Vector3(
|
|
||||||
( clientX - _this.screen.width * 0.5 - _this.screen.offsetLeft ) / _this.radius,
|
|
||||||
( _this.screen.height * 0.5 + _this.screen.offsetTop - clientY ) / _this.radius,
|
|
||||||
0.0
|
|
||||||
);
|
|
||||||
|
|
||||||
var length = mouseOnBall.length();
|
|
||||||
|
|
||||||
if ( length > 1.0 ) {
|
|
||||||
|
|
||||||
mouseOnBall.normalize();
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
mouseOnBall.z = Math.sqrt( 1.0 - length * length );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
_eye.copy( _this.object.position ).sub( _this.target );
|
|
||||||
|
|
||||||
var projection = _this.object.up.clone().setLength( mouseOnBall.y );
|
|
||||||
projection.add( _this.object.up.clone().cross( _eye ).setLength( mouseOnBall.x ) );
|
|
||||||
projection.add( _eye.setLength( mouseOnBall.z ) );
|
|
||||||
|
|
||||||
return projection;
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.rotateCamera = function () {
|
|
||||||
|
|
||||||
var angle = Math.acos( _rotateStart.dot( _rotateEnd ) / _rotateStart.length() / _rotateEnd.length() );
|
|
||||||
|
|
||||||
if ( angle ) {
|
|
||||||
|
|
||||||
var axis = ( new THREE.Vector3() ).crossVectors( _rotateStart, _rotateEnd ).normalize();
|
|
||||||
quaternion = new THREE.Quaternion();
|
|
||||||
|
|
||||||
angle *= _this.rotateSpeed;
|
|
||||||
|
|
||||||
quaternion.setFromAxisAngle( axis, -angle );
|
|
||||||
|
|
||||||
_eye.applyQuaternion( quaternion );
|
|
||||||
_this.object.up.applyQuaternion( quaternion );
|
|
||||||
|
|
||||||
_rotateEnd.applyQuaternion( quaternion );
|
|
||||||
|
|
||||||
if ( _this.staticMoving ) {
|
|
||||||
|
|
||||||
_rotateStart.copy( _rotateEnd );
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
quaternion.setFromAxisAngle( axis, angle * ( _this.dynamicDampingFactor - 1.0 ) );
|
|
||||||
_rotateStart.applyQuaternion( quaternion );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.zoomCamera = function () {
|
|
||||||
|
|
||||||
if ( _state === STATE.TOUCH_ZOOM ) {
|
|
||||||
|
|
||||||
var factor = _touchZoomDistanceStart / _touchZoomDistanceEnd;
|
|
||||||
_touchZoomDistanceStart = _touchZoomDistanceEnd;
|
|
||||||
_eye.multiplyScalar( factor );
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
var factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * _this.zoomSpeed;
|
|
||||||
|
|
||||||
if ( factor !== 1.0 && factor > 0.0 ) {
|
|
||||||
|
|
||||||
_eye.multiplyScalar( factor );
|
|
||||||
|
|
||||||
if ( _this.staticMoving ) {
|
|
||||||
|
|
||||||
_zoomStart.copy( _zoomEnd );
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
_zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.panCamera = function () {
|
|
||||||
|
|
||||||
var mouseChange = _panEnd.clone().sub( _panStart );
|
|
||||||
|
|
||||||
if ( mouseChange.lengthSq() ) {
|
|
||||||
|
|
||||||
mouseChange.multiplyScalar( _eye.length() * _this.panSpeed );
|
|
||||||
|
|
||||||
var pan = _eye.clone().cross( _this.object.up ).setLength( mouseChange.x );
|
|
||||||
pan.add( _this.object.up.clone().setLength( mouseChange.y ) );
|
|
||||||
|
|
||||||
_this.object.position.add( pan );
|
|
||||||
_this.target.add( pan );
|
|
||||||
|
|
||||||
if ( _this.staticMoving ) {
|
|
||||||
|
|
||||||
_panStart = _panEnd;
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
_panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( _this.dynamicDampingFactor ) );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.checkDistances = function () {
|
|
||||||
|
|
||||||
if ( !_this.noZoom || !_this.noPan ) {
|
|
||||||
|
|
||||||
if ( _this.object.position.lengthSq() > _this.maxDistance * _this.maxDistance ) {
|
|
||||||
|
|
||||||
_this.object.position.setLength( _this.maxDistance );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( _eye.lengthSq() < _this.minDistance * _this.minDistance ) {
|
|
||||||
|
|
||||||
_this.object.position.addVectors( _this.target, _eye.setLength( _this.minDistance ) );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.update = function () {
|
|
||||||
|
|
||||||
_eye.subVectors( _this.object.position, _this.target );
|
|
||||||
|
|
||||||
if ( !_this.noRotate ) {
|
|
||||||
|
|
||||||
_this.rotateCamera();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( !_this.noZoom ) {
|
|
||||||
|
|
||||||
_this.zoomCamera();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( !_this.noPan ) {
|
|
||||||
|
|
||||||
_this.panCamera();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
_this.object.position.addVectors( _this.target, _eye );
|
|
||||||
|
|
||||||
_this.checkDistances();
|
|
||||||
|
|
||||||
_this.object.lookAt( _this.target );
|
|
||||||
|
|
||||||
if ( lastPosition.distanceToSquared( _this.object.position ) > 0 ) {
|
|
||||||
|
|
||||||
_this.dispatchEvent( changeEvent );
|
|
||||||
|
|
||||||
lastPosition.copy( _this.object.position );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.reset = function () {
|
|
||||||
|
|
||||||
_state = STATE.NONE;
|
|
||||||
_prevState = STATE.NONE;
|
|
||||||
|
|
||||||
_this.target.copy( _this.target0 );
|
|
||||||
_this.object.position.copy( _this.position0 );
|
|
||||||
_this.object.up.copy( _this.up0 );
|
|
||||||
|
|
||||||
_eye.subVectors( _this.object.position, _this.target );
|
|
||||||
|
|
||||||
_this.object.lookAt( _this.target );
|
|
||||||
|
|
||||||
_this.dispatchEvent( changeEvent );
|
|
||||||
|
|
||||||
lastPosition.copy( _this.object.position );
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
// listeners
|
|
||||||
|
|
||||||
function keydown( event ) {
|
|
||||||
|
|
||||||
if ( _this.enabled === false ) return;
|
|
||||||
|
|
||||||
window.removeEventListener( 'keydown', keydown );
|
|
||||||
|
|
||||||
_prevState = _state;
|
|
||||||
|
|
||||||
if ( _state !== STATE.NONE ) {
|
|
||||||
|
|
||||||
return;
|
|
||||||
|
|
||||||
} else if ( event.keyCode === _this.keys[ STATE.ROTATE ] && !_this.noRotate ) {
|
|
||||||
|
|
||||||
_state = STATE.ROTATE;
|
|
||||||
|
|
||||||
} else if ( event.keyCode === _this.keys[ STATE.ZOOM ] && !_this.noZoom ) {
|
|
||||||
|
|
||||||
_state = STATE.ZOOM;
|
|
||||||
|
|
||||||
} else if ( event.keyCode === _this.keys[ STATE.PAN ] && !_this.noPan ) {
|
|
||||||
|
|
||||||
_state = STATE.PAN;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function keyup( event ) {
|
|
||||||
|
|
||||||
if ( _this.enabled === false ) return;
|
|
||||||
|
|
||||||
_state = _prevState;
|
|
||||||
|
|
||||||
window.addEventListener( 'keydown', keydown, false );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function mousedown( event ) {
|
|
||||||
|
|
||||||
if ( _this.enabled === false ) return;
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
if ( _state === STATE.NONE ) {
|
|
||||||
|
|
||||||
_state = event.button;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( _state === STATE.ROTATE && !_this.noRotate ) {
|
|
||||||
|
|
||||||
_rotateStart = _rotateEnd = _this.getMouseProjectionOnBall( event.clientX, event.clientY );
|
|
||||||
|
|
||||||
} else if ( _state === STATE.ZOOM && !_this.noZoom ) {
|
|
||||||
|
|
||||||
_zoomStart = _zoomEnd = _this.getMouseOnScreen( event.clientX, event.clientY );
|
|
||||||
|
|
||||||
} else if ( _state === STATE.PAN && !_this.noPan ) {
|
|
||||||
|
|
||||||
_panStart = _panEnd = _this.getMouseOnScreen( event.clientX, event.clientY );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener( 'mousemove', mousemove, false );
|
|
||||||
document.addEventListener( 'mouseup', mouseup, false );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function mousemove( event ) {
|
|
||||||
|
|
||||||
if ( _this.enabled === false ) return;
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
if ( _state === STATE.ROTATE && !_this.noRotate ) {
|
|
||||||
|
|
||||||
_rotateEnd = _this.getMouseProjectionOnBall( event.clientX, event.clientY );
|
|
||||||
|
|
||||||
} else if ( _state === STATE.ZOOM && !_this.noZoom ) {
|
|
||||||
|
|
||||||
_zoomEnd = _this.getMouseOnScreen( event.clientX, event.clientY );
|
|
||||||
|
|
||||||
} else if ( _state === STATE.PAN && !_this.noPan ) {
|
|
||||||
|
|
||||||
_panEnd = _this.getMouseOnScreen( event.clientX, event.clientY );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function mouseup( event ) {
|
|
||||||
|
|
||||||
if ( _this.enabled === false ) return;
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
_state = STATE.NONE;
|
|
||||||
|
|
||||||
document.removeEventListener( 'mousemove', mousemove );
|
|
||||||
document.removeEventListener( 'mouseup', mouseup );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function mousewheel( event ) {
|
|
||||||
|
|
||||||
if ( _this.enabled === false ) return;
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
var delta = 0;
|
|
||||||
|
|
||||||
if ( event.wheelDelta ) { // WebKit / Opera / Explorer 9
|
|
||||||
|
|
||||||
delta = event.wheelDelta / 40;
|
|
||||||
|
|
||||||
} else if ( event.detail ) { // Firefox
|
|
||||||
|
|
||||||
delta = - event.detail / 3;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
_zoomStart.y += delta * 0.01;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function touchstart( event ) {
|
|
||||||
|
|
||||||
if ( _this.enabled === false ) return;
|
|
||||||
|
|
||||||
switch ( event.touches.length ) {
|
|
||||||
|
|
||||||
case 1:
|
|
||||||
_state = STATE.TOUCH_ROTATE;
|
|
||||||
_rotateStart = _rotateEnd = _this.getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 2:
|
|
||||||
_state = STATE.TOUCH_ZOOM;
|
|
||||||
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
|
|
||||||
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
|
|
||||||
_touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy );
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 3:
|
|
||||||
_state = STATE.TOUCH_PAN;
|
|
||||||
_panStart = _panEnd = _this.getMouseOnScreen( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
|
||||||
_state = STATE.NONE;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function touchmove( event ) {
|
|
||||||
|
|
||||||
if ( _this.enabled === false ) return;
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
switch ( event.touches.length ) {
|
|
||||||
|
|
||||||
case 1:
|
|
||||||
_rotateEnd = _this.getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 2:
|
|
||||||
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
|
|
||||||
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
|
|
||||||
_touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy )
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 3:
|
|
||||||
_panEnd = _this.getMouseOnScreen( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
|
||||||
_state = STATE.NONE;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function touchend( event ) {
|
|
||||||
|
|
||||||
if ( _this.enabled === false ) return;
|
|
||||||
|
|
||||||
switch ( event.touches.length ) {
|
|
||||||
|
|
||||||
case 1:
|
|
||||||
_rotateStart = _rotateEnd = _this.getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 2:
|
|
||||||
_touchZoomDistanceStart = _touchZoomDistanceEnd = 0;
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 3:
|
|
||||||
_panStart = _panEnd = _this.getMouseOnScreen( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
|
|
||||||
break;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
_state = STATE.NONE;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
this.domElement.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
|
|
||||||
|
|
||||||
this.domElement.addEventListener( 'mousedown', mousedown, false );
|
|
||||||
|
|
||||||
this.domElement.addEventListener( 'mousewheel', mousewheel, false );
|
|
||||||
this.domElement.addEventListener( 'DOMMouseScroll', mousewheel, false ); // firefox
|
|
||||||
|
|
||||||
this.domElement.addEventListener( 'touchstart', touchstart, false );
|
|
||||||
this.domElement.addEventListener( 'touchend', touchend, false );
|
|
||||||
this.domElement.addEventListener( 'touchmove', touchmove, false );
|
|
||||||
|
|
||||||
window.addEventListener( 'keydown', keydown, false );
|
|
||||||
window.addEventListener( 'keyup', keyup, false );
|
|
||||||
|
|
||||||
this.handleResize();
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
THREE.TrackballControls.prototype = Object.create( THREE.EventDispatcher.prototype );
|
|
|
@ -1,22 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>WebGL PixelPlace TechDemo Globe</title>
|
|
||||||
<style>
|
|
||||||
body { margin: 0; overflow: hidden; background-color: #000; }
|
|
||||||
.tm { position: absolute; top: 10px; right: 10px; }
|
|
||||||
.webgl-error { font: 15px/30px monospace; text-align: center; color: #fff; margin: 50px; }
|
|
||||||
.webgl-error a { color: #fff; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="webgl"></div>
|
|
||||||
<script src="https://unpkg.com/three@0.91.0/build/three.min.js"></script>
|
|
||||||
<script src="https://unpkg.com/three@0.91.0/examples/js/loaders/GLTFLoader.js"></script>
|
|
||||||
<script src="Detector.js"></script>
|
|
||||||
<script src="TrackballControls.js"></script>
|
|
||||||
<script src="space.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
|
@ -1,137 +0,0 @@
|
||||||
// Created by Bjorn Sandvik - thematicmapping.org
|
|
||||||
(function () {
|
|
||||||
|
|
||||||
var webglEl = document.getElementById('webgl');
|
|
||||||
|
|
||||||
if (!Detector.webgl) {
|
|
||||||
Detector.addGetWebGLMessage(webglEl);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var width = window.innerWidth,
|
|
||||||
height = window.innerHeight;
|
|
||||||
|
|
||||||
// Earth params
|
|
||||||
var radius = 0.5,
|
|
||||||
segments = 32,
|
|
||||||
rotation = 6;
|
|
||||||
|
|
||||||
var scene = new THREE.Scene();
|
|
||||||
|
|
||||||
var camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);
|
|
||||||
camera.position.z = 20.0;
|
|
||||||
|
|
||||||
var renderer = new THREE.WebGLRenderer();
|
|
||||||
renderer.setSize(width, height);
|
|
||||||
|
|
||||||
scene.add(new THREE.AmbientLight(0x333333));
|
|
||||||
|
|
||||||
var light = new THREE.DirectionalLight(0xffffff, 1);
|
|
||||||
light.position.set(5,3,5);
|
|
||||||
scene.add(light);
|
|
||||||
|
|
||||||
var loader = new THREE.GLTFLoader();
|
|
||||||
loader.load('turtle.glb', function (glb) {
|
|
||||||
window.test2 = glb.scene;
|
|
||||||
scene.add(glb.scene);
|
|
||||||
window.test = scene;
|
|
||||||
const children = glb.scene.children;
|
|
||||||
for (let cnt = 0; cnt < children.length; cnt++) {
|
|
||||||
//children[cnt].scale.x *= -1;
|
|
||||||
//children[cnt].scale.y *= -1;
|
|
||||||
const child = children[cnt].children;
|
|
||||||
if (children[cnt].material) {
|
|
||||||
const material = children[cnt].material.name;
|
|
||||||
console.log(material);
|
|
||||||
if (material == "canvas") {
|
|
||||||
console.log("Found material");
|
|
||||||
children[cnt].material = new THREE.MeshPhongMaterial({
|
|
||||||
map: new THREE.TextureLoader().load('../tiles/texture.png?a=b'),
|
|
||||||
bumpMap: new THREE.TextureLoader().load('../images/elev_bump_4k2.jpg'),
|
|
||||||
bumpScale: 0.04,
|
|
||||||
});
|
|
||||||
//children[cnt].material.side = THREE.DoubleSide;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
for (let xnt = 0; xnt < child.length; xnt++) {
|
|
||||||
const material = child[xnt].material.name;
|
|
||||||
console.log(material);
|
|
||||||
if (material == "canvas") {
|
|
||||||
console.log("Found material");
|
|
||||||
child[xnt].material = new THREE.MeshPhongMaterial({
|
|
||||||
map: new THREE.TextureLoader().load('../tiles/texture.png?a=b'),
|
|
||||||
bumpMap: new THREE.TextureLoader().load('../images/elev_bump_4k2.jpg'),
|
|
||||||
bumpScale: 0.04,
|
|
||||||
});
|
|
||||||
//children[cnt].material.side = THREE.DoubleSide;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//glb.animations;
|
|
||||||
//glb.scene;
|
|
||||||
//glb.scenes;
|
|
||||||
//glb.cameras;
|
|
||||||
//glb.asset;
|
|
||||||
}, function (xhr) {console.log((xhr.loaded / xhr.total * 100) + '% loaded');
|
|
||||||
}, function (error) {console.log('An error happened', error);
|
|
||||||
});
|
|
||||||
|
|
||||||
//var sphere = createSphere(radius, segments);
|
|
||||||
//sphere.rotation.y = rotation;
|
|
||||||
//scene.add(sphere)
|
|
||||||
|
|
||||||
//var clouds = createClouds(radius, segments);
|
|
||||||
//clouds.rotation.y = rotation * 10;
|
|
||||||
//scene.add(clouds)
|
|
||||||
|
|
||||||
var stars = createStars(90, 64);
|
|
||||||
scene.add(stars);
|
|
||||||
|
|
||||||
var controls = new THREE.TrackballControls(camera);
|
|
||||||
|
|
||||||
webglEl.appendChild(renderer.domElement);
|
|
||||||
|
|
||||||
render();
|
|
||||||
|
|
||||||
function render() {
|
|
||||||
controls.update();
|
|
||||||
//sphere.rotation.y += 0.0005;
|
|
||||||
//clouds.rotation.y += 0.005;
|
|
||||||
requestAnimationFrame(render);
|
|
||||||
renderer.render(scene, camera);
|
|
||||||
}
|
|
||||||
|
|
||||||
function createSphere(radius, segments) {
|
|
||||||
return new THREE.Mesh(
|
|
||||||
new THREE.SphereGeometry(radius, segments, segments),
|
|
||||||
new THREE.MeshPhongMaterial({
|
|
||||||
map: THREE.ImageUtils.loadTexture('../tiles/texture.png'),
|
|
||||||
bumpMap: THREE.ImageUtils.loadTexture('../images/elev_bump_4k.jpg'),
|
|
||||||
bumpScale: 0.004,
|
|
||||||
//specularMap: THREE.ImageUtils.loadTexture('images/water_4k.png'),
|
|
||||||
//specular: new THREE.Color('grey')
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function createClouds(radius, segments) {
|
|
||||||
return new THREE.Mesh(
|
|
||||||
new THREE.SphereGeometry(radius + 0.005, segments, segments),
|
|
||||||
new THREE.MeshPhongMaterial({
|
|
||||||
map: THREE.ImageUtils.loadTexture('../images/fair_clouds_dark_4k.png'),
|
|
||||||
transparent: true
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function createStars(radius, segments) {
|
|
||||||
return new THREE.Mesh(
|
|
||||||
new THREE.SphereGeometry(radius, segments, segments),
|
|
||||||
new THREE.MeshBasicMaterial({
|
|
||||||
map: THREE.ImageUtils.loadTexture('../images/galaxy_starfield.png'),
|
|
||||||
side: THREE.BackSide
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}());
|
|
Binary file not shown.
|
@ -27,10 +27,11 @@ class Html extends React.Component {
|
||||||
scripts: Array<string>,
|
scripts: Array<string>,
|
||||||
body: string,
|
body: string,
|
||||||
code: string,
|
code: string,
|
||||||
|
useRecaptcha: boolean,
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { title, description, styles, scripts, body, code } = this.props;
|
const { title, description, styles, scripts, body, code, useRecaptcha } = this.props;
|
||||||
return (
|
return (
|
||||||
<html className="no-js" lang="en">
|
<html className="no-js" lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
@ -52,8 +53,8 @@ class Html extends React.Component {
|
||||||
dangerouslySetInnerHTML={{ __html: style.cssText }}
|
dangerouslySetInnerHTML={{ __html: style.cssText }}
|
||||||
/>),
|
/>),
|
||||||
)}
|
)}
|
||||||
{RECAPTCHA_SITEKEY && <script dangerouslySetInnerHTML={{ __html: `window.sitekey="${RECAPTCHA_SITEKEY}"` }} />}
|
{RECAPTCHA_SITEKEY && useRecaptcha && <script dangerouslySetInnerHTML={{ __html: `window.sitekey="${RECAPTCHA_SITEKEY}"` }} />}
|
||||||
{RECAPTCHA_SITEKEY && <script src="https://www.google.com/recaptcha/api.js" async defer />}
|
{RECAPTCHA_SITEKEY && useRecaptcha && <script src="https://www.google.com/recaptcha/api.js" async defer />}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
|
|
259
src/globe.js
259
src/globe.js
|
@ -3,137 +3,104 @@ import * as THREE from 'three';
|
||||||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
|
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
|
||||||
import { TrackballControls } from 'three-trackballcontrols-ts';
|
import { TrackballControls } from 'three-trackballcontrols-ts';
|
||||||
|
|
||||||
var Detector = {
|
|
||||||
|
|
||||||
canvas: !! window.CanvasRenderingContext2D,
|
function checkMaterial(object) {
|
||||||
webgl: ( function () { try { var canvas = document.createElement( 'canvas' ); return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ); } catch( e ) { return false; } } )(),
|
if (object.material) {
|
||||||
workers: !! window.Worker,
|
const materialName = object.material.name;
|
||||||
fileapi: window.File && window.FileReader && window.FileList && window.Blob,
|
if (materialName == "canvas") {
|
||||||
|
console.log("Found material for canvas texture");
|
||||||
getWebGLErrorMessage: function () {
|
return true;
|
||||||
|
}
|
||||||
var element = document.createElement( 'div' );
|
|
||||||
element.className = 'webgl-error';
|
|
||||||
|
|
||||||
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">WebGL</a>.<br />',
|
|
||||||
'Find out how to get it <a href="http://get.webgl.org/">here</a>.'
|
|
||||||
].join( '\n' ) : [
|
|
||||||
'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>.<br/>',
|
|
||||||
'Find out how to get it <a href="http://get.webgl.org/">here</a>.'
|
|
||||||
].join( '\n' );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
return element;
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
addGetWebGLMessage: function (parent ) {
|
|
||||||
|
|
||||||
parent.appendChild( Detector.getWebGLErrorMessage() );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
(function () {
|
|
||||||
function checkMaterial(object) {
|
|
||||||
if (object.material) {
|
|
||||||
const materialName = object.material.name;
|
|
||||||
if (materialName == "canvas") {
|
|
||||||
console.log("Found material");
|
|
||||||
object.material = canvasTexture;
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
function parseHashCoords() {
|
function parseHashCoords() {
|
||||||
try {
|
try {
|
||||||
const hash = window.location.hash;
|
const hash = window.location.hash;
|
||||||
const array = hash.substring(1).split(',');
|
const array = hash.substring(1).split(',');
|
||||||
const ident = array.shift();
|
const ident = array.shift();
|
||||||
const [id, size, x, y] = array.map((z) => parseInt(z));
|
const [id, size, x, y] = array.map((z) => parseInt(z));
|
||||||
if (!ident || isNaN(x) || isNaN(y) || isNaN(id) || isNaN(size)) {
|
if (!ident || isNaN(x) || isNaN(y) || isNaN(id) || isNaN(size)) {
|
||||||
throw "NaN";
|
throw "NaN";
|
||||||
}
|
}
|
||||||
return [ident, id, size, x, y];
|
return [ident, id, size, x, y];
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
return ['d', 0, 65536, 0, 0];
|
return ['d', 0, 65536, 0, 0];
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function rotateToCoords(canvasSize, object, coords) {
|
function rotateToCoords(canvasSize, object, coords) {
|
||||||
console.log("Rotate to", coords);
|
console.log("Rotate to", coords);
|
||||||
const [x, y] = coords;
|
const [x, y] = coords;
|
||||||
const rotOffsetX = 0;
|
const rotOffsetX = 0;
|
||||||
const rotOffsetY = 3 * Math.PI / 2;
|
const rotOffsetY = 3 * Math.PI / 2;
|
||||||
const rotX = -y * Math.PI / canvasSize;
|
const rotX = -y * Math.PI / canvasSize;
|
||||||
const rotY = -x * 2 * Math.PI / canvasSize;
|
const rotY = -x * 2 * Math.PI / canvasSize;
|
||||||
object.rotation.x += rotOffsetX + rotX;
|
object.rotation.x += rotOffsetX + rotX;
|
||||||
object.rotation.y += rotOffsetY + rotY;
|
object.rotation.y += rotOffsetY + rotY;
|
||||||
}
|
}
|
||||||
|
|
||||||
var webglEl = document.getElementById('webgl');
|
|
||||||
|
|
||||||
if (!Detector.webgl) {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
Detector.addGetWebGLMessage(webglEl);
|
var webglEl = document.getElementById('webgl');
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const [canvasIdent, canvasId, canvasSize, x, y] = parseHashCoords();
|
const [canvasIdent, canvasId, canvasSize, x, y] = parseHashCoords();
|
||||||
|
|
||||||
const canvasTexture = new THREE.MeshPhongMaterial({
|
var canvasTexture = new THREE.MeshPhongMaterial({
|
||||||
map: new THREE.TextureLoader().load(`./tiles/${canvasId}/texture.png`),
|
map: new THREE.TextureLoader().load(`./tiles/${canvasId}/texture.png`),
|
||||||
bumpMap: new THREE.TextureLoader().load(`./assets3d/normal${canvasId}.jpg`),
|
bumpMap: new THREE.TextureLoader().load(`./assets3d/normal${canvasId}.jpg`),
|
||||||
bumpScale: 0.02,
|
bumpScale: 0.02,
|
||||||
specularMap: new THREE.TextureLoader().load(`./assets3d/specular${canvasId}.jpg`),
|
specularMap: new THREE.TextureLoader().load(`./assets3d/specular${canvasId}.jpg`),
|
||||||
specular: new THREE.Color('grey')
|
specular: new THREE.Color('grey')
|
||||||
});
|
});
|
||||||
|
|
||||||
var width = window.innerWidth,
|
var width = window.innerWidth,
|
||||||
height = window.innerHeight;
|
height = window.innerHeight;
|
||||||
|
|
||||||
var scene = new THREE.Scene();
|
var scene = new THREE.Scene();
|
||||||
|
|
||||||
var camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);
|
var camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);
|
||||||
camera.position.z = 4.0;
|
camera.position.z = 4.0;
|
||||||
|
|
||||||
var renderer = new THREE.WebGLRenderer();
|
var renderer = new THREE.WebGLRenderer();
|
||||||
renderer.setSize(width, height);
|
renderer.setSize(width, height);
|
||||||
|
|
||||||
scene.add(new THREE.AmbientLight(0x333333));
|
scene.add(new THREE.AmbientLight(0x333333));
|
||||||
|
|
||||||
var light = new THREE.DirectionalLight(0xffffff, 0.7);
|
var light = new THREE.DirectionalLight(0xffffff, 0.7);
|
||||||
light.position.set(10,6,10);
|
light.position.set(10,6,10);
|
||||||
scene.add(light);
|
scene.add(light);
|
||||||
|
|
||||||
var object = null;
|
var controls = null;
|
||||||
var loader = new GLTFLoader();
|
|
||||||
loader.load('./assets3d/globe.glb', function (glb) {
|
var object = null;
|
||||||
scene.add(glb.scene);
|
var loader = new GLTFLoader();
|
||||||
const children = glb.scene.children;
|
loader.load('./assets3d/globe.glb', function (glb) {
|
||||||
for (let cnt = 0; cnt < children.length; cnt++) {
|
scene.add(glb.scene);
|
||||||
//children[cnt].scale.x *= -1;
|
const children = glb.scene.children;
|
||||||
//children[cnt].scale.y *= -1;
|
for (let cnt = 0; cnt < children.length; cnt++) {
|
||||||
if (checkMaterial(children[cnt]))
|
if (checkMaterial(children[cnt])) {
|
||||||
object = children[cnt];
|
object = children[cnt];
|
||||||
const grandchildren = children[cnt].children;
|
}
|
||||||
for (let xnt = 0; xnt < grandchildren.length; xnt++) {
|
const grandchildren = children[cnt].children;
|
||||||
if (checkMaterial(grandchildren[xnt]))
|
for (let xnt = 0; xnt < grandchildren.length; xnt++) {
|
||||||
object = children[cnt];
|
if (checkMaterial(grandchildren[xnt])) {
|
||||||
//children[cnt].material.side = THREE.DoubleSide;
|
object = children[cnt];
|
||||||
}
|
|
||||||
}
|
}
|
||||||
rotateToCoords(canvasSize, object, [x, y]);
|
}
|
||||||
}, function (xhr) {console.log(`${xhr.loaded} / ${xhr.total}% loaded`);
|
}
|
||||||
}, function (error) {console.log('An error happened', error);
|
if (object) {
|
||||||
});
|
object.material = canvasTexture;
|
||||||
|
}
|
||||||
|
rotateToCoords(canvasSize, object, [x, y]);
|
||||||
|
controls = createControls(camera);
|
||||||
|
render();
|
||||||
|
}, function (xhr) {
|
||||||
|
console.log(`${xhr.loaded} loaded`);
|
||||||
|
}, function (error) {
|
||||||
|
console.log('An error happened', error);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
// Earth params
|
// Earth params
|
||||||
|
@ -142,42 +109,51 @@ var Detector = {
|
||||||
rotation = 6;
|
rotation = 6;
|
||||||
|
|
||||||
|
|
||||||
var stars = createStars(90, 64);
|
function createControls(camera) {
|
||||||
scene.add(stars);
|
const controls = new TrackballControls(camera, renderer.domElement);
|
||||||
|
controls.rotateSpeed = 1.8;
|
||||||
var controls = new TrackballControls(camera, renderer.domElement);
|
controls.zoomSpeed = 1.0;
|
||||||
controls.rotateSpeed = 1.0;
|
controls.panSpeed = 0.3;
|
||||||
controls.zoomSpeed = 1.2;
|
controls.minDistance = 1.5;
|
||||||
controls.panSpeed = 0.3;
|
controls.maxDistance = 70.00;
|
||||||
controls.minDistance = 1.6;
|
controls.keys = [65, 83, 68]; // ASD
|
||||||
controls.maxDistance = 118.32;
|
controls.dynamicDampingFactor = 0.2;
|
||||||
controls.keys = [65, 83, 68]; // ASD
|
return controls;
|
||||||
controls.dynamicDampingFactor = 0.2;
|
}
|
||||||
|
|
||||||
|
|
||||||
webglEl.appendChild(renderer.domElement);
|
webglEl.appendChild(renderer.domElement);
|
||||||
|
|
||||||
render();
|
|
||||||
|
|
||||||
function render() {
|
function render() {
|
||||||
controls.update();
|
controls.update();
|
||||||
if (object) object.rotation.y += 0.0005;
|
if (object) object.rotation.y += 0.0005;
|
||||||
requestAnimationFrame(render);
|
requestAnimationFrame(render);
|
||||||
renderer.render(scene, camera);
|
renderer.render(scene, camera);
|
||||||
}
|
}
|
||||||
|
|
||||||
function createStars(radius, segments) {
|
var stars = new THREE.Mesh(
|
||||||
return new THREE.Mesh(
|
new THREE.SphereGeometry(90, 64, 64),
|
||||||
new THREE.SphereGeometry(radius, segments, segments),
|
new THREE.MeshBasicMaterial({
|
||||||
new THREE.MeshBasicMaterial({
|
map: new THREE.TextureLoader().load('./assets3d/starfield.png'),
|
||||||
map: new THREE.TextureLoader().load('./assets3d/starfield'),
|
side: THREE.BackSide
|
||||||
side: THREE.BackSide
|
})
|
||||||
})
|
);
|
||||||
);
|
scene.add(stars);
|
||||||
}
|
|
||||||
|
|
||||||
setInterval(onDocumentMouseMove, 1000);
|
setInterval(onDocumentMouseMove, 1000);
|
||||||
|
|
||||||
|
|
||||||
|
function onWindowResize() {
|
||||||
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||||
|
const aspect = window.innerWidth / window.innerHeight;
|
||||||
|
camera.aspect = aspect;
|
||||||
|
camera.updateProjectionMatrix();
|
||||||
|
if (controls) controls.handleResize();
|
||||||
|
}
|
||||||
|
window.addEventListener('resize', onWindowResize,false);
|
||||||
|
|
||||||
|
|
||||||
var raycaster = new THREE.Raycaster();
|
var raycaster = new THREE.Raycaster();
|
||||||
var mouse = new THREE.Vector2();
|
var mouse = new THREE.Vector2();
|
||||||
var lastView = [0, 0];
|
var lastView = [0, 0];
|
||||||
|
@ -210,7 +186,11 @@ var Detector = {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function onDocumentDblClick(event) {
|
function onDocumentDblClick(event) {
|
||||||
|
if (!object) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
|
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
|
||||||
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
|
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
|
||||||
|
|
||||||
|
@ -224,7 +204,8 @@ var Detector = {
|
||||||
window.location.href = `./#${canvasIdent},${xabs},${yabs},0`;
|
window.location.href = `./#${canvasIdent},${xabs},${yabs},0`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener('mousemove', onDocumentMouseMove, false);
|
document.addEventListener('mousemove', onDocumentMouseMove, false);
|
||||||
document.addEventListener('dblclick', onDocumentDblClick, false);
|
document.addEventListener('dblclick', onDocumentDblClick, false);
|
||||||
}());
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
|
@ -153,6 +153,7 @@ const data = {
|
||||||
ASSET_SERVER + assets.vendor.js,
|
ASSET_SERVER + assets.vendor.js,
|
||||||
ASSET_SERVER + assets.client.js,
|
ASSET_SERVER + assets.client.js,
|
||||||
],
|
],
|
||||||
|
useRecaptcha: true,
|
||||||
};
|
};
|
||||||
const indexEtag = etag(
|
const indexEtag = etag(
|
||||||
`${assets.vendor.js},${assets.client.js}`,
|
`${assets.vendor.js},${assets.client.js}`,
|
||||||
|
|
Loading…
Reference in New Issue
Block a user