Make actually functional away from codepen
This commit is contained in:
parent
d7b167e8aa
commit
dd97e1466b
66
js/Detector.js
Normal file
66
js/Detector.js
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
/**
|
||||||
|
* @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.id = 'webgl-error-message';
|
||||||
|
element.style.fontFamily = 'monospace';
|
||||||
|
element.style.fontSize = '13px';
|
||||||
|
element.style.fontWeight = 'normal';
|
||||||
|
element.style.textAlign = 'center';
|
||||||
|
element.style.background = '#fff';
|
||||||
|
element.style.color = '#000';
|
||||||
|
element.style.padding = '1.5em';
|
||||||
|
element.style.width = '400px';
|
||||||
|
element.style.margin = '5em auto 0';
|
||||||
|
|
||||||
|
if ( ! this.webgl ) {
|
||||||
|
|
||||||
|
element.innerHTML = window.WebGLRenderingContext ? [
|
||||||
|
'Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br />',
|
||||||
|
'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'
|
||||||
|
].join( '\n' ) : [
|
||||||
|
'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br/>',
|
||||||
|
'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'
|
||||||
|
].join( '\n' );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return element;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
addGetWebGLMessage: function ( parameters ) {
|
||||||
|
|
||||||
|
var parent, id, element;
|
||||||
|
|
||||||
|
parameters = parameters || {};
|
||||||
|
|
||||||
|
parent = parameters.parent !== undefined ? parameters.parent : document.body;
|
||||||
|
id = parameters.id !== undefined ? parameters.id : 'oldie';
|
||||||
|
|
||||||
|
element = Detector.getWebGLErrorMessage();
|
||||||
|
element.id = id;
|
||||||
|
|
||||||
|
parent.appendChild( element );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// browserify support
|
||||||
|
if ( typeof module === 'object' ) {
|
||||||
|
|
||||||
|
module.exports = Detector;
|
||||||
|
|
||||||
|
}
|
1037
js/OrbitControls.js
Normal file
1037
js/OrbitControls.js
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"CU": {
|
"CU": {
|
||||||
"name": "Cardasian Union",
|
"name": "Cardasian Union",
|
||||||
"color": 0xCC9933,
|
"color": "#CC9933",
|
||||||
"cenx": -9337.944,
|
"cenx": -9337.944,
|
||||||
"ceny": 310,
|
"ceny": 310,
|
||||||
"cenz": 20,
|
"cenz": 20,
|
||||||
@ -76,11 +76,11 @@
|
|||||||
"Z": 23.2
|
"Z": 23.2
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"UFP": {
|
"UFP": {
|
||||||
"name": "United Federation Of Planets",
|
"name": "United Federation Of Planets",
|
||||||
"color": 0x0000FF,
|
"color": "#0000FF",
|
||||||
"cenx": -9197.944,
|
"cenx": -9197.944,
|
||||||
"ceny": 0,
|
"ceny": 0,
|
||||||
"cenz": 0,
|
"cenz": 0,
|
||||||
@ -232,7 +232,7 @@
|
|||||||
"Y": 60,
|
"Y": 60,
|
||||||
"Z": -0.6
|
"Z": -0.6
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"bases": {
|
"bases": {
|
||||||
"Phoenix City": {
|
"Phoenix City": {
|
||||||
"X": -8977.944,
|
"X": -8977.944,
|
||||||
@ -243,14 +243,14 @@
|
|||||||
},
|
},
|
||||||
"BFN": {
|
"BFN": {
|
||||||
"name": "Bajoran Free Nation",
|
"name": "Bajoran Free Nation",
|
||||||
"color": 0xffaaaa,
|
"color": "#ffaaaa",
|
||||||
"cenx": -9325.944,
|
"cenx": -9325.944,
|
||||||
"ceny": 221.7,
|
"ceny": 221.7,
|
||||||
"cenz": -45.1,
|
"cenz": -45.1,
|
||||||
"rad": 5,
|
"rad": 5,
|
||||||
"bordervis": true,
|
"bordervis": true,
|
||||||
"planets": {
|
"planets": {
|
||||||
"Bajor/Jeraddo" : {
|
"Bajor/Jeraddo": {
|
||||||
"X": -9325.944078,
|
"X": -9325.944078,
|
||||||
"Y": 221.7,
|
"Y": 221.7,
|
||||||
"Z": -45.281517
|
"Z": -45.281517
|
||||||
@ -258,7 +258,7 @@
|
|||||||
|
|
||||||
},
|
},
|
||||||
"bases": {
|
"bases": {
|
||||||
"Kainon Station" : {
|
"Kainon Station": {
|
||||||
"X": 6316.800,
|
"X": 6316.800,
|
||||||
"Y": 6324.7,
|
"Y": 6324.7,
|
||||||
"Z": 10.50
|
"Z": 10.50
|
||||||
@ -267,8 +267,8 @@
|
|||||||
},
|
},
|
||||||
"BC": {
|
"BC": {
|
||||||
"name": "Breen Confederacy",
|
"name": "Breen Confederacy",
|
||||||
"color": 0x00AAAA,
|
"color": "#00AAAA",
|
||||||
"cenx": 09376.050179,
|
"cenx": 9376.050179,
|
||||||
"ceny": 203.150816,
|
"ceny": 203.150816,
|
||||||
"cenz": -46.281517,
|
"cenz": -46.281517,
|
||||||
"rad": 0,
|
"rad": 0,
|
||||||
@ -289,12 +289,12 @@
|
|||||||
"Y": 231.877,
|
"Y": 231.877,
|
||||||
"Z": 42.479
|
"Z": 42.479
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"bases": {}
|
"bases": {}
|
||||||
},
|
},
|
||||||
"KE": {
|
"KE": {
|
||||||
"name": "Klingon Empire",
|
"name": "Klingon Empire",
|
||||||
"color": 0xFF0000,
|
"color": "#FF0000",
|
||||||
"cenx": -9577.944,
|
"cenx": -9577.944,
|
||||||
"ceny": 120,
|
"ceny": 120,
|
||||||
"cenz": -90.160,
|
"cenz": -90.160,
|
||||||
@ -366,12 +366,12 @@
|
|||||||
"Y": 123.7,
|
"Y": 123.7,
|
||||||
"Z": 34.706
|
"Z": 34.706
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"bases": {}
|
"bases": {}
|
||||||
},
|
},
|
||||||
"RSE": {
|
"RSE": {
|
||||||
"name": "Romulan Star Empire",
|
"name": "Romulan Star Empire",
|
||||||
"color": 0x00ff00,
|
"color": "#00ff00",
|
||||||
"cenx": -9477.00,
|
"cenx": -9477.00,
|
||||||
"ceny": -230.00,
|
"ceny": -230.00,
|
||||||
"cenz": 10.00,
|
"cenz": 10.00,
|
||||||
@ -443,7 +443,7 @@
|
|||||||
},
|
},
|
||||||
"GFA": {
|
"GFA": {
|
||||||
"name": "Galactic Ferengal Alliance",
|
"name": "Galactic Ferengal Alliance",
|
||||||
"color": 0xFFFF00,
|
"color": "#FFFF00",
|
||||||
"cenx": -8977.944,
|
"cenx": -8977.944,
|
||||||
"ceny": 260.00,
|
"ceny": 260.00,
|
||||||
"cenz": -50.00,
|
"cenz": -50.00,
|
||||||
@ -510,7 +510,7 @@
|
|||||||
},
|
},
|
||||||
"OA": {
|
"OA": {
|
||||||
"name": "Orion Alliance",
|
"name": "Orion Alliance",
|
||||||
"color": 0x00FFFF,
|
"color": "#00FFFF",
|
||||||
"cenx": 0,
|
"cenx": 0,
|
||||||
"ceny": 0,
|
"ceny": 0,
|
||||||
"cenz": 0,
|
"cenz": 0,
|
||||||
@ -542,7 +542,7 @@
|
|||||||
},
|
},
|
||||||
"DOM": {
|
"DOM": {
|
||||||
"name": "Dominion",
|
"name": "Dominion",
|
||||||
"color": 0xA9FFEE,
|
"color": "#A9FFEE",
|
||||||
"cenx": 0,
|
"cenx": 0,
|
||||||
"ceny": 0,
|
"ceny": 0,
|
||||||
"cenz": 0,
|
"cenz": 0,
|
||||||
@ -624,7 +624,7 @@
|
|||||||
},
|
},
|
||||||
"UNITY": {
|
"UNITY": {
|
||||||
"name": "The Unity",
|
"name": "The Unity",
|
||||||
"color": 0xFFA9EE,
|
"color": "#FFA9EE",
|
||||||
"cenx": 0,
|
"cenx": 0,
|
||||||
"ceny": 0,
|
"ceny": 0,
|
||||||
"cenz": 0,
|
"cenz": 0,
|
||||||
@ -712,7 +712,7 @@
|
|||||||
},
|
},
|
||||||
"TA": {
|
"TA": {
|
||||||
"name": "Tholian Assembly",
|
"name": "Tholian Assembly",
|
||||||
"color": 0xFEA901,
|
"color": "#FEA901",
|
||||||
"cenx": -9107.944,
|
"cenx": -9107.944,
|
||||||
"ceny": -290.00,
|
"ceny": -290.00,
|
||||||
"cenz": -10.00,
|
"cenz": -10.00,
|
||||||
@ -744,7 +744,7 @@
|
|||||||
},
|
},
|
||||||
"UQS": {
|
"UQS": {
|
||||||
"name": "Unified Qvarne Systems",
|
"name": "Unified Qvarne Systems",
|
||||||
"color": 0x990103,
|
"color": "#990103",
|
||||||
"cenx": -9109.941,
|
"cenx": -9109.941,
|
||||||
"ceny": 228.477,
|
"ceny": 228.477,
|
||||||
"cenz": -135.785,
|
"cenz": -135.785,
|
||||||
@ -797,7 +797,7 @@
|
|||||||
},
|
},
|
||||||
"GORN": {
|
"GORN": {
|
||||||
"name": "Gorn",
|
"name": "Gorn",
|
||||||
"color": 0xFF02FF,
|
"color": "#FF02FF",
|
||||||
"cenx": -9267.944,
|
"cenx": -9267.944,
|
||||||
"ceny": -330.00,
|
"ceny": -330.00,
|
||||||
"cenz": 80.00,
|
"cenz": 80.00,
|
||||||
@ -844,7 +844,7 @@
|
|||||||
},
|
},
|
||||||
"20": {
|
"20": {
|
||||||
"abr": "UNK",
|
"abr": "UNK",
|
||||||
"color": 0xB3B3B3,
|
"color": "#B3B3B3",
|
||||||
"cenx": 0,
|
"cenx": 0,
|
||||||
"ceny": 0,
|
"ceny": 0,
|
||||||
"cenz": 0,
|
"cenz": 0,
|
||||||
@ -1059,4 +1059,4 @@
|
|||||||
},
|
},
|
||||||
"bases": {}
|
"bases": {}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
@ -1,26 +1,36 @@
|
|||||||
// Load Data
|
|
||||||
var xmlhttp = new XMLHttpRequest();
|
|
||||||
var url = "empiredata.json";
|
|
||||||
var jsonEmpire;
|
|
||||||
|
|
||||||
xmlhttp.onreadystatechange = function() {
|
|
||||||
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
|
|
||||||
jsonEmpire = JSON.parse(xmlhttp.responseText);
|
|
||||||
|
|
||||||
}
|
|
||||||
};
|
|
||||||
xmlhttp.open("GET", url, true);
|
|
||||||
xmlhttp.send();
|
|
||||||
|
|
||||||
|
|
||||||
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
||||||
|
|
||||||
var camera, controls, scene, renderer;
|
var camera, controls, scene, renderer;
|
||||||
var canvas_t=[];
|
var canvas_t=[];
|
||||||
var context_t=[];
|
var context_t=[];
|
||||||
var clock = new THREE.Clock();
|
var clock = new THREE.Clock();
|
||||||
var WIDTH = window.innerWidth , HEIGHT = window.innerHeight
|
var WIDTH = window.innerWidth , HEIGHT = window.innerHeight
|
||||||
|
|
||||||
|
window.onload = function() {
|
||||||
|
loadData(function() {
|
||||||
init();
|
init();
|
||||||
animate();
|
animate();
|
||||||
|
render();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadData(_callback) {
|
||||||
|
// Load Data (hopefully) before the rest of the place loads.
|
||||||
|
var xmlhttp = new XMLHttpRequest();
|
||||||
|
var url = "js/empiredata.json";
|
||||||
|
|
||||||
|
xmlhttp.onreadystatechange = function() {
|
||||||
|
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
|
||||||
|
jsonEmpire = JSON.parse(xmlhttp.responseText);
|
||||||
|
_callback();
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xmlhttp.open("GET", url, true);
|
||||||
|
xmlhttp.send();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
scene = new THREE.Scene();
|
scene = new THREE.Scene();
|
||||||
@ -123,14 +133,14 @@ for (var key in jsonEmpire) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Initial Target spot. UFP for convinence.
|
// Initial Target spot. UFP for convinence.
|
||||||
controls.target.x = borders['UFP'].position.x;
|
controls.target.x = jsonEmpire['UFP'].cenx;
|
||||||
controls.target.y = borders['UFP'].position.y;
|
controls.target.y = jsonEmpire['UFP'].ceny;
|
||||||
controls.target.z = borders['UFP'].position.z;
|
controls.target.z = jsonEmpire['UFP'].cenz;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function onWindowResize() {
|
window.onresize = function() {
|
||||||
|
|
||||||
camera.aspect = window.innerWidth / window.innerHeight;
|
camera.aspect = window.innerWidth / window.innerHeight;
|
||||||
camera.updateProjectionMatrix();
|
camera.updateProjectionMatrix();
|
||||||
@ -158,7 +168,6 @@ function render () {
|
|||||||
renderer.render( scene, camera );
|
renderer.render( scene, camera );
|
||||||
|
|
||||||
}
|
}
|
||||||
render();
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
383
js/three-text2d.js
Normal file
383
js/three-text2d.js
Normal file
@ -0,0 +1,383 @@
|
|||||||
|
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.THREE_Text = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
|
||||||
|
|
||||||
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||||
|
|
||||||
|
var fontHeightCache = {};
|
||||||
|
|
||||||
|
var CanvasText = (function () {
|
||||||
|
function CanvasText() {
|
||||||
|
_classCallCheck(this, CanvasText);
|
||||||
|
|
||||||
|
this.textWidth = null;
|
||||||
|
this.textHeight = null;
|
||||||
|
|
||||||
|
this.canvas = document.createElement('canvas');
|
||||||
|
this.ctx = this.canvas.getContext('2d');
|
||||||
|
}
|
||||||
|
|
||||||
|
_createClass(CanvasText, [{
|
||||||
|
key: 'drawText',
|
||||||
|
value: function drawText(text, ctxOptions) {
|
||||||
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||||
|
|
||||||
|
this.ctx.font = ctxOptions.font;
|
||||||
|
|
||||||
|
this.textWidth = Math.ceil(this.ctx.measureText(text).width);
|
||||||
|
this.textHeight = getFontHeight(this.ctx.font);
|
||||||
|
|
||||||
|
this.canvas.width = THREE.Math.nextPowerOfTwo(this.textWidth);
|
||||||
|
this.canvas.height = THREE.Math.nextPowerOfTwo(this.textHeight);
|
||||||
|
|
||||||
|
this.ctx.font = ctxOptions.font;
|
||||||
|
this.ctx.fillStyle = ctxOptions.fillStyle;
|
||||||
|
this.ctx.textAlign = 'left';
|
||||||
|
this.ctx.textBaseline = 'top';
|
||||||
|
|
||||||
|
this.ctx.fillText(text, 0, 0);
|
||||||
|
|
||||||
|
return this.canvas;
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'width',
|
||||||
|
get: function get() {
|
||||||
|
return this.canvas.width;
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'height',
|
||||||
|
get: function get() {
|
||||||
|
return this.canvas.height;
|
||||||
|
}
|
||||||
|
}]);
|
||||||
|
|
||||||
|
return CanvasText;
|
||||||
|
})();
|
||||||
|
|
||||||
|
function getFontHeight(fontStyle) {
|
||||||
|
var result = fontHeightCache[fontStyle];
|
||||||
|
|
||||||
|
if (!result) {
|
||||||
|
var body = document.getElementsByTagName('body')[0];
|
||||||
|
var dummy = document.createElement('div');
|
||||||
|
|
||||||
|
var dummyText = document.createTextNode('MÉq');
|
||||||
|
dummy.appendChild(dummyText);
|
||||||
|
dummy.setAttribute('style', 'font:' + fontStyle + ';position:absolute;top:0;left:0');
|
||||||
|
body.appendChild(dummy);
|
||||||
|
result = dummy.offsetHeight;
|
||||||
|
|
||||||
|
fontHeightCache[fontStyle] = result;
|
||||||
|
body.removeChild(dummy);
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = CanvasText;
|
||||||
|
|
||||||
|
},{}],2:[function(require,module,exports){
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
|
||||||
|
|
||||||
|
function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj; }
|
||||||
|
|
||||||
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||||
|
|
||||||
|
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||||
|
|
||||||
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||||
|
|
||||||
|
var textAlign = require('./textAlign'),
|
||||||
|
CanvasText = require('./CanvasText');
|
||||||
|
|
||||||
|
var SpriteText2D = (function (_THREE$Object3D) {
|
||||||
|
_inherits(SpriteText2D, _THREE$Object3D);
|
||||||
|
|
||||||
|
function SpriteText2D() {
|
||||||
|
var text = arguments.length <= 0 || arguments[0] === undefined ? '' : arguments[0];
|
||||||
|
var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
|
||||||
|
|
||||||
|
_classCallCheck(this, SpriteText2D);
|
||||||
|
|
||||||
|
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(SpriteText2D).call(this));
|
||||||
|
|
||||||
|
_this._font = options.font || '30px Arial';
|
||||||
|
_this._fillStyle = options.fillStyle || '#FFFFFF';
|
||||||
|
|
||||||
|
_this.canvas = new CanvasText();
|
||||||
|
|
||||||
|
_this.align = options.align || textAlign.center;
|
||||||
|
|
||||||
|
// this._textAlign = options.align || "center"
|
||||||
|
// this.anchor = Label.fontAlignAnchor[ this._textAlign ]
|
||||||
|
_this.antialias = _typeof(options.antialias === "undefined") ? true : options.antialias;
|
||||||
|
_this.text = text;
|
||||||
|
return _this;
|
||||||
|
}
|
||||||
|
|
||||||
|
_createClass(SpriteText2D, [{
|
||||||
|
key: 'updateText',
|
||||||
|
value: function updateText() {
|
||||||
|
this.canvas.drawText(this._text, {
|
||||||
|
font: this._font,
|
||||||
|
fillStyle: this._fillStyle
|
||||||
|
});
|
||||||
|
|
||||||
|
// cleanup previous texture
|
||||||
|
this.cleanUp();
|
||||||
|
|
||||||
|
this.texture = new THREE.Texture(this.canvas.canvas);
|
||||||
|
this.texture.needsUpdate = true;
|
||||||
|
this.applyAntiAlias();
|
||||||
|
|
||||||
|
if (!this.material) {
|
||||||
|
this.material = new THREE.SpriteMaterial({ map: this.texture });
|
||||||
|
} else {
|
||||||
|
this.material.map = this.texture;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.sprite) {
|
||||||
|
this.sprite = new THREE.Sprite(this.material);
|
||||||
|
this.geometry = this.sprite.geometry;
|
||||||
|
this.add(this.sprite);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.sprite.scale.set(this.canvas.width, this.canvas.height, 1);
|
||||||
|
|
||||||
|
this.sprite.position.x = this.canvas.width / 2 - this.canvas.textWidth / 2 + this.canvas.textWidth / 2 * this.align.x;
|
||||||
|
this.sprite.position.y = -this.canvas.height / 2 + this.canvas.textHeight / 2 * this.align.y;
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'cleanUp',
|
||||||
|
value: function cleanUp() {
|
||||||
|
if (this.texture) {
|
||||||
|
this.texture.dispose();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'applyAntiAlias',
|
||||||
|
value: function applyAntiAlias() {
|
||||||
|
if (this.antialias === false) {
|
||||||
|
this.texture.magFilter = THREE.NearestFilter;
|
||||||
|
this.texture.minFilter = THREE.LinearMipMapLinearFilter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'width',
|
||||||
|
get: function get() {
|
||||||
|
return this.canvas.textWidth;
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'height',
|
||||||
|
get: function get() {
|
||||||
|
return this.canvas.textHeight;
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'text',
|
||||||
|
get: function get() {
|
||||||
|
return this._text;
|
||||||
|
},
|
||||||
|
set: function set(value) {
|
||||||
|
if (this._text !== value) {
|
||||||
|
this._text = value;
|
||||||
|
this.updateText();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'font',
|
||||||
|
get: function get() {
|
||||||
|
return this._font;
|
||||||
|
},
|
||||||
|
set: function set(value) {
|
||||||
|
if (this._font !== value) {
|
||||||
|
this._font = value;
|
||||||
|
this.updateText();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'fillStyle',
|
||||||
|
get: function get() {
|
||||||
|
return this._fillStyle;
|
||||||
|
},
|
||||||
|
set: function set(value) {
|
||||||
|
if (this._fillStyle !== value) {
|
||||||
|
this._fillStyle = value;
|
||||||
|
this.updateText();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}]);
|
||||||
|
|
||||||
|
return SpriteText2D;
|
||||||
|
})(THREE.Object3D);
|
||||||
|
|
||||||
|
module.exports = SpriteText2D;
|
||||||
|
|
||||||
|
},{"./CanvasText":1,"./textAlign":5}],3:[function(require,module,exports){
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
|
||||||
|
|
||||||
|
function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj; }
|
||||||
|
|
||||||
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||||
|
|
||||||
|
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||||
|
|
||||||
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||||
|
|
||||||
|
var textAlign = require('./textAlign'),
|
||||||
|
CanvasText = require('./CanvasText');
|
||||||
|
|
||||||
|
var Text2D = (function (_THREE$Object3D) {
|
||||||
|
_inherits(Text2D, _THREE$Object3D);
|
||||||
|
|
||||||
|
function Text2D() {
|
||||||
|
var text = arguments.length <= 0 || arguments[0] === undefined ? '' : arguments[0];
|
||||||
|
var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
|
||||||
|
|
||||||
|
_classCallCheck(this, Text2D);
|
||||||
|
|
||||||
|
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Text2D).call(this));
|
||||||
|
|
||||||
|
_this._font = options.font || '30px Arial';
|
||||||
|
_this._fillStyle = options.fillStyle || '#FFFFFF';
|
||||||
|
|
||||||
|
_this.canvas = new CanvasText();
|
||||||
|
|
||||||
|
_this.align = options.align || textAlign.center;
|
||||||
|
_this.side = options.side || THREE.DoubleSide;
|
||||||
|
|
||||||
|
// this._textAlign = options.align || "center"
|
||||||
|
// this.anchor = Label.fontAlignAnchor[ this._textAlign ]
|
||||||
|
_this.antialias = _typeof(options.antialias === "undefined") ? true : options.antialias;
|
||||||
|
_this.text = text;
|
||||||
|
return _this;
|
||||||
|
}
|
||||||
|
|
||||||
|
_createClass(Text2D, [{
|
||||||
|
key: 'updateText',
|
||||||
|
value: function updateText() {
|
||||||
|
this.cleanUp(); // cleanup previous texture
|
||||||
|
|
||||||
|
this.canvas.drawText(this._text, {
|
||||||
|
font: this._font,
|
||||||
|
fillStyle: this._fillStyle
|
||||||
|
});
|
||||||
|
|
||||||
|
this.texture = new THREE.Texture(this.canvas.canvas);
|
||||||
|
this.texture.needsUpdate = true;
|
||||||
|
this.applyAntiAlias();
|
||||||
|
|
||||||
|
if (!this.material) {
|
||||||
|
this.material = new THREE.MeshBasicMaterial({ map: this.texture, side: this.side });
|
||||||
|
this.material.transparent = true;
|
||||||
|
} else {
|
||||||
|
this.material.map = this.texture;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.mesh) {
|
||||||
|
this.mesh = new THREE.Mesh(new THREE.PlaneGeometry(this.canvas.width, this.canvas.height), this.material);
|
||||||
|
this.geometry = this.mesh.geometry;
|
||||||
|
this.add(this.mesh);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.mesh.position.x = this.canvas.width / 2 - this.canvas.textWidth / 2 + this.canvas.textWidth / 2 * this.align.x;
|
||||||
|
this.mesh.position.y = -this.canvas.height / 2 + this.canvas.textHeight / 2 * this.align.y;
|
||||||
|
|
||||||
|
// manually update geometry vertices
|
||||||
|
this.geometry.vertices[0].x = this.geometry.vertices[2].x = -this.canvas.width / 2;
|
||||||
|
this.geometry.vertices[1].x = this.geometry.vertices[3].x = this.canvas.width / 2;
|
||||||
|
this.geometry.vertices[0].y = this.geometry.vertices[1].y = this.canvas.height / 2;
|
||||||
|
this.geometry.vertices[2].y = this.geometry.vertices[3].y = -this.canvas.height / 2;
|
||||||
|
this.geometry.verticesNeedUpdate = true;
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'cleanUp',
|
||||||
|
value: function cleanUp() {
|
||||||
|
if (this.texture) {
|
||||||
|
this.texture.dispose();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'applyAntiAlias',
|
||||||
|
value: function applyAntiAlias() {
|
||||||
|
if (this.antialias === false) {
|
||||||
|
this.texture.magFilter = THREE.NearestFilter;
|
||||||
|
this.texture.minFilter = THREE.LinearMipMapLinearFilter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'width',
|
||||||
|
get: function get() {
|
||||||
|
return this.canvas.textWidth;
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'height',
|
||||||
|
get: function get() {
|
||||||
|
return this.canvas.textHeight;
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'text',
|
||||||
|
get: function get() {
|
||||||
|
return this._text;
|
||||||
|
},
|
||||||
|
set: function set(value) {
|
||||||
|
if (this._text !== value) {
|
||||||
|
this._text = value;
|
||||||
|
this.updateText();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'font',
|
||||||
|
get: function get() {
|
||||||
|
return this._font;
|
||||||
|
},
|
||||||
|
set: function set(value) {
|
||||||
|
if (this._font !== value) {
|
||||||
|
this._font = value;
|
||||||
|
this.updateText();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'fillStyle',
|
||||||
|
get: function get() {
|
||||||
|
return this._fillStyle;
|
||||||
|
},
|
||||||
|
set: function set(value) {
|
||||||
|
if (this._fillStyle !== value) {
|
||||||
|
this._fillStyle = value;
|
||||||
|
this.updateText();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}]);
|
||||||
|
|
||||||
|
return Text2D;
|
||||||
|
})(THREE.Object3D);
|
||||||
|
|
||||||
|
module.exports = Text2D;
|
||||||
|
|
||||||
|
},{"./CanvasText":1,"./textAlign":5}],4:[function(require,module,exports){
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
module.exports.SpriteText2D = require('./SpriteText2D');
|
||||||
|
module.exports.Text2D = require('./Text2D');
|
||||||
|
module.exports.textAlign = require('./textAlign');
|
||||||
|
|
||||||
|
},{"./SpriteText2D":2,"./Text2D":3,"./textAlign":5}],5:[function(require,module,exports){
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
center: new THREE.Vector2(0, 0),
|
||||||
|
left: new THREE.Vector2(1, 0),
|
||||||
|
topLeft: new THREE.Vector2(1, -1),
|
||||||
|
topRight: new THREE.Vector2(-1, -1),
|
||||||
|
right: new THREE.Vector2(-1, 0),
|
||||||
|
bottomLeft: new THREE.Vector2(1, 1),
|
||||||
|
bottomRight: new THREE.Vector2(-1, 1)
|
||||||
|
};
|
||||||
|
|
||||||
|
},{}]},{},[4])(4)
|
||||||
|
});
|
41872
js/three.js
Normal file
41872
js/three.js
Normal file
File diff suppressed because one or more lines are too long
@ -1,10 +1,11 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<script src="//threejs.org/build/three.js"></script>
|
|
||||||
<script src="//threejs.org/examples/js/controls/OrbitControls.js"></script>
|
<script src="js/three.js"></script>
|
||||||
<script src="//gamestd.io/three-text2d/dist/three-text2d.js"></script>
|
<script src="js/OrbitControls.js"></script>
|
||||||
<script src="//crival.net/3d/js/Detector.js"></script> <!-- Not sure if this is even needed anymore. -->
|
<script src="js/three-text2d.js"></script>
|
||||||
<script src="/js/mapviewgl.js"></script>
|
<script src="js/Detector.js"></script> <!-- Not sure if this is even needed anymore. -->
|
||||||
|
<script src="js/mapviewgl.js"></script>
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
body { margin: 0; }
|
body { margin: 0; }
|
||||||
canvas { width: 100%; height: 100% }
|
canvas { width: 100%; height: 100% }
|
||||||
|
Loading…
Reference in New Issue
Block a user