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-validator": "^3.2.0",
|
||||
"global": "^4.3.2",
|
||||
"hammerjs": "^2.0.8",
|
||||
"http-proxy-agent": "^2.1.0",
|
||||
"ip": "^1.1.5",
|
||||
"ip-address": "^5.8.9",
|
||||
|
|
@ -57,7 +56,6 @@
|
|||
"passport-json": "^1.2.0",
|
||||
"passport-reddit": "^0.2.4",
|
||||
"passport-vkontakte": "^0.3.2",
|
||||
"push.js": "1.0.9",
|
||||
"react": "^16.9.0",
|
||||
"react-dom": "^16.9.0",
|
||||
"react-file-download": "^0.3.4",
|
||||
|
|
@ -73,14 +71,9 @@
|
|||
"redux-logger": "^3.0.6",
|
||||
"redux-persist": "^6.0.0",
|
||||
"redux-thunk": "^2.2.0",
|
||||
"rimraf": "^2.6.1",
|
||||
"sendmail": "^1.6.1",
|
||||
"sequelize": "^5.19.2",
|
||||
"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",
|
||||
"validator": "^7.0.0",
|
||||
"visibilityjs": "^1.2.4",
|
||||
|
|
@ -88,6 +81,13 @@
|
|||
"ws": "^7.1.2"
|
||||
},
|
||||
"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/node": "^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>,
|
||||
body: string,
|
||||
code: string,
|
||||
useRecaptcha: boolean,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { title, description, styles, scripts, body, code } = this.props;
|
||||
const { title, description, styles, scripts, body, code, useRecaptcha } = this.props;
|
||||
return (
|
||||
<html className="no-js" lang="en">
|
||||
<head>
|
||||
|
|
@ -52,8 +53,8 @@ class Html extends React.Component {
|
|||
dangerouslySetInnerHTML={{ __html: style.cssText }}
|
||||
/>),
|
||||
)}
|
||||
{RECAPTCHA_SITEKEY && <script dangerouslySetInnerHTML={{ __html: `window.sitekey="${RECAPTCHA_SITEKEY}"` }} />}
|
||||
{RECAPTCHA_SITEKEY && <script src="https://www.google.com/recaptcha/api.js" async defer />}
|
||||
{RECAPTCHA_SITEKEY && useRecaptcha && <script dangerouslySetInnerHTML={{ __html: `window.sitekey="${RECAPTCHA_SITEKEY}"` }} />}
|
||||
{RECAPTCHA_SITEKEY && useRecaptcha && <script src="https://www.google.com/recaptcha/api.js" async defer />}
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
|
|
|
|||
261
src/globe.js
261
src/globe.js
|
|
@ -3,137 +3,104 @@ import * as THREE from 'three';
|
|||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
|
||||
import { TrackballControls } from 'three-trackballcontrols-ts';
|
||||
|
||||
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() );
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
(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 checkMaterial(object) {
|
||||
if (object.material) {
|
||||
const materialName = object.material.name;
|
||||
if (materialName == "canvas") {
|
||||
console.log("Found material for canvas texture");
|
||||
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 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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
var webglEl = document.getElementById('webgl');
|
||||
|
||||
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(`./assets3d/normal${canvasId}.jpg`),
|
||||
bumpScale: 0.02,
|
||||
specularMap: new THREE.TextureLoader().load(`./assets3d/specular${canvasId}.jpg`),
|
||||
specular: new THREE.Color('grey')
|
||||
var canvasTexture = new THREE.MeshPhongMaterial({
|
||||
map: new THREE.TextureLoader().load(`./tiles/${canvasId}/texture.png`),
|
||||
bumpMap: new THREE.TextureLoader().load(`./assets3d/normal${canvasId}.jpg`),
|
||||
bumpScale: 0.02,
|
||||
specularMap: new THREE.TextureLoader().load(`./assets3d/specular${canvasId}.jpg`),
|
||||
specular: new THREE.Color('grey')
|
||||
});
|
||||
|
||||
var width = window.innerWidth,
|
||||
height = window.innerHeight;
|
||||
var width = window.innerWidth,
|
||||
height = window.innerHeight;
|
||||
|
||||
var scene = new THREE.Scene();
|
||||
var scene = new THREE.Scene();
|
||||
|
||||
var camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);
|
||||
camera.position.z = 4.0;
|
||||
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);
|
||||
var renderer = new THREE.WebGLRenderer();
|
||||
renderer.setSize(width, height);
|
||||
|
||||
scene.add(new THREE.AmbientLight(0x333333));
|
||||
scene.add(new THREE.AmbientLight(0x333333));
|
||||
|
||||
var light = new THREE.DirectionalLight(0xffffff, 0.7);
|
||||
light.position.set(10,6,10);
|
||||
scene.add(light);
|
||||
var light = new THREE.DirectionalLight(0xffffff, 0.7);
|
||||
light.position.set(10,6,10);
|
||||
scene.add(light);
|
||||
|
||||
var object = null;
|
||||
var loader = new GLTFLoader();
|
||||
loader.load('./assets3d/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}% loaded`);
|
||||
}, function (error) {console.log('An error happened', error);
|
||||
});
|
||||
var controls = null;
|
||||
|
||||
var object = null;
|
||||
var loader = new GLTFLoader();
|
||||
loader.load('./assets3d/globe.glb', function (glb) {
|
||||
scene.add(glb.scene);
|
||||
const children = glb.scene.children;
|
||||
for (let cnt = 0; cnt < children.length; cnt++) {
|
||||
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];
|
||||
}
|
||||
}
|
||||
}
|
||||
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
|
||||
|
|
@ -142,42 +109,51 @@ var Detector = {
|
|||
rotation = 6;
|
||||
|
||||
|
||||
var stars = createStars(90, 64);
|
||||
scene.add(stars);
|
||||
|
||||
var controls = new TrackballControls(camera, renderer.domElement);
|
||||
controls.rotateSpeed = 1.0;
|
||||
controls.zoomSpeed = 1.2;
|
||||
controls.panSpeed = 0.3;
|
||||
controls.minDistance = 1.6;
|
||||
controls.maxDistance = 118.32;
|
||||
controls.keys = [65, 83, 68]; // ASD
|
||||
controls.dynamicDampingFactor = 0.2;
|
||||
function createControls(camera) {
|
||||
const controls = new TrackballControls(camera, renderer.domElement);
|
||||
controls.rotateSpeed = 1.8;
|
||||
controls.zoomSpeed = 1.0;
|
||||
controls.panSpeed = 0.3;
|
||||
controls.minDistance = 1.5;
|
||||
controls.maxDistance = 70.00;
|
||||
controls.keys = [65, 83, 68]; // ASD
|
||||
controls.dynamicDampingFactor = 0.2;
|
||||
return controls;
|
||||
}
|
||||
|
||||
|
||||
webglEl.appendChild(renderer.domElement);
|
||||
|
||||
render();
|
||||
|
||||
function render() {
|
||||
controls.update();
|
||||
if (object) object.rotation.y += 0.0005;
|
||||
requestAnimationFrame(render);
|
||||
renderer.render(scene, camera);
|
||||
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: new THREE.TextureLoader().load('./assets3d/starfield'),
|
||||
side: THREE.BackSide
|
||||
})
|
||||
);
|
||||
}
|
||||
var stars = new THREE.Mesh(
|
||||
new THREE.SphereGeometry(90, 64, 64),
|
||||
new THREE.MeshBasicMaterial({
|
||||
map: new THREE.TextureLoader().load('./assets3d/starfield.png'),
|
||||
side: THREE.BackSide
|
||||
})
|
||||
);
|
||||
scene.add(stars);
|
||||
|
||||
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 mouse = new THREE.Vector2();
|
||||
var lastView = [0, 0];
|
||||
|
|
@ -210,7 +186,11 @@ var Detector = {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
function onDocumentDblClick(event) {
|
||||
if (!object) {
|
||||
return;
|
||||
}
|
||||
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
|
||||
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
|
||||
|
||||
|
|
@ -224,7 +204,8 @@ var Detector = {
|
|||
window.location.href = `./#${canvasIdent},${xabs},${yabs},0`;
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove', onDocumentMouseMove, false);
|
||||
document.addEventListener('dblclick', onDocumentDblClick, false);
|
||||
}());
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -153,6 +153,7 @@ const data = {
|
|||
ASSET_SERVER + assets.vendor.js,
|
||||
ASSET_SERVER + assets.client.js,
|
||||
],
|
||||
useRecaptcha: true,
|
||||
};
|
||||
const indexEtag = etag(
|
||||
`${assets.vendor.js},${assets.client.js}`,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user