From fb8a697cece8fc9f3b07f314d0988b6e354664bf Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 27 Jan 2019 16:48:47 +0100 Subject: splash page init, add obj2ply script --- client/splash/index.js | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 client/splash/index.js (limited to 'client/splash/index.js') diff --git a/client/splash/index.js b/client/splash/index.js new file mode 100644 index 00000000..4fc7609c --- /dev/null +++ b/client/splash/index.js @@ -0,0 +1,3 @@ +/* teaser page */ + +console.log('hey..') -- cgit v1.2.3-70-g09d2 From b5766ea986598e7ec53036d41deb9b0d152742ed Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 27 Jan 2019 17:16:08 +0100 Subject: light bath on oktween --- client/splash/index.js | 4 +- client/splash/vendor/oktween.js | 159 +++++++++++ client/splash/vendor/three.meshline.js | 486 +++++++++++++++++++++++++++++++++ client/util.js | 122 --------- client/util/index.js | 122 +++++++++ client/util/math.js | 51 ++++ site/assets/css/splash.css | 20 ++ site/assets/demo/splash/index.html | 4 +- site/assets/js/vendor/oktween.js | 2 +- 9 files changed, 842 insertions(+), 128 deletions(-) create mode 100644 client/splash/vendor/oktween.js create mode 100644 client/splash/vendor/three.meshline.js delete mode 100644 client/util.js create mode 100644 client/util/index.js create mode 100644 client/util/math.js create mode 100644 site/assets/css/splash.css (limited to 'client/splash/index.js') diff --git a/client/splash/index.js b/client/splash/index.js index 4fc7609c..6253098e 100644 --- a/client/splash/index.js +++ b/client/splash/index.js @@ -1,3 +1 @@ -/* teaser page */ - -console.log('hey..') +import oktween from './vendor/oktween' \ No newline at end of file diff --git a/client/splash/vendor/oktween.js b/client/splash/vendor/oktween.js new file mode 100644 index 00000000..cbf5d835 --- /dev/null +++ b/client/splash/vendor/oktween.js @@ -0,0 +1,159 @@ +/* + oktween.add({ + obj: el.style, + units: "px", + from: { left: 0 }, + to: { left: 100 }, + duration: 1000, + easing: oktween.easing.circ_out, + update: function(obj){ + console.log(obj.left) + } + finished: function(){ + console.log("done") + } + }) +*/ + +import { lerp } from '../../util/math' + +const oktween = {} +let tweens = [] + +let last_t = 0 +let id = 0 + +oktween.speed = 1 +oktween.add = (tween) => { + tween.id = id++ + tween.obj = tween.obj || {} + if (tween.easing) { + if (typeof tween.easing === "string") { + tween.easing = oktween.easing[tween.easing] + } + } else { + tween.easing = oktween.easing.linear + } + if (!('from' in tween) && !('to' in tween)) { + tween.keys = [] + } else if (!('from' in tween)) { + tween.from = {} + tween.keys = Object.keys(tween.to) + tween.keys.forEach(function(prop) { + tween.from[prop] = parseFloat(tween.obj[prop]) + }) + } else { + tween.keys = Object.keys(tween.from) + } + tween.delay = tween.delay || 0 + tween.start = last_t + tween.delay + tween.done = false + tween.after = tween.after || [] + tween.then = (fn) => { tween.after.push(fn); return tween } + tween.tick = 0 + tween.skip = tween.skip || 1 + tween.dt = 0 + tweens.push(tween) + return tween +} +oktween.update = (t) => { + let done = false + requestAnimationFrame(oktween.update) + last_t = t * oktween.speed + if (tweens.length === 0) return + tweens.forEach((tween, i) => { + const dt = Math.min(1.0, (t - tween.start) / tween.duration) + tween.tick++ + if (dt < 0 || (dt < 1 && (tween.tick % tween.skip != 0))) return + const ddt = tween.easing(dt) + tween.dt = ddt + tween.keys.forEach((prop) => { + let val = lerp(ddt, tween.from[prop], tween.to[prop]) + if (tween.round) val = Math.round(val) + if (tween.units) val = (Math.round(val)) + tween.units + tween.obj[prop] = val + }) + tween.update && tween.update(tween.obj, dt) + if (dt == 1) { + tween.finished && tween.finished(tween) + if (tween.after.length) { + var twn = tween.after.shift() + twn.obj = twn.obj || tween.obj + twn.after = tween.after + oktween.add(twn) + } + if (tween.loop) { + tween.start = t + tween.delay + } + else { + done = true + tween.done = true + } + } + }) + if (done) { + tweens = tweens.filter(function(tween){ return ! tween.done }) + } +} + +requestAnimationFrame(oktween.update) + +oktween.easing = { + linear: (t) => { + return t + }, + circ_out: (t) => { + return Math.sqrt(1 - (t = t - 1) * t) + }, + circ_in: (t) => { + return -(Math.sqrt(1 - (t * t)) - 1) + }, + circ_in_out: (t) => { + return ((t*=2) < 1) ? -0.5 * (Math.sqrt(1 - t * t) - 1) : 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1) + }, + quad_in: (n) => { + return Math.pow(n, 2) + }, + quad_out: (n) => { + return n * (n - 2) * -1 + }, + quad_in_out: (n) => { + n = n * 2 + if (n < 1) { return Math.pow(n, 2) / 2 } + return -1 * ((--n) * (n - 2) - 1) / 2 + }, + cubic_bezier: (mX1, mY1, mX2, mY2) => { + function A(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1 } + function B(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1 } + function C(aA1) { return 3.0 * aA1 } + + // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2. + function CalcBezier(aT, aA1, aA2) { + return ((A(aA1, aA2)*aT + B(aA1, aA2))*aT + C(aA1))*aT + } + + // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2. + function GetSlope(aT, aA1, aA2) { + return 3.0 * A(aA1, aA2)*aT*aT + 2.0 * B(aA1, aA2) * aT + C(aA1) + } + + function GetTForX(aX) { + // Newton raphson iteration + let aGuessT = aX + for (let i = 0; i < 10; ++i) { + const currentSlope = GetSlope(aGuessT, mX1, mX2) + if (currentSlope == 0.0) return aGuessT + const currentX = CalcBezier(aGuessT, mX1, mX2) - aX + aGuessT -= currentX / currentSlope + } + return aGuessT + } + + return function (aX) { + if (mX1 == mY1 && mX2 == mY2) return aX // linear + return CalcBezier(aX, mY1, mY2) + } + } +} + +export default oktween diff --git a/client/splash/vendor/three.meshline.js b/client/splash/vendor/three.meshline.js new file mode 100644 index 00000000..c6e998e3 --- /dev/null +++ b/client/splash/vendor/three.meshline.js @@ -0,0 +1,486 @@ +;(function() { + +"use strict"; + +var root = this + +var has_require = typeof require !== 'undefined' + +var THREE = root.THREE || has_require && require('three') +if( !THREE ) + throw new Error( 'MeshLine requires three.js' ) + +function MeshLine() { + + this.positions = []; + + this.previous = []; + this.next = []; + this.side = []; + this.width = []; + this.indices_array = []; + this.uvs = []; + this.counters = []; + this.geometry = new THREE.BufferGeometry(); + + this.widthCallback = null; + +} + +MeshLine.prototype.setGeometry = function( g, c ) { + + this.widthCallback = c; + + this.positions = []; + this.counters = []; + + if( g instanceof THREE.Geometry ) { + for( var j = 0; j < g.vertices.length; j++ ) { + var v = g.vertices[ j ]; + var c = j/g.vertices.length; + this.positions.push( v.x, v.y, v.z ); + this.positions.push( v.x, v.y, v.z ); + this.counters.push(c); + this.counters.push(c); + } + } + + if( g instanceof THREE.BufferGeometry ) { + // read attribute positions ? + } + + if( g instanceof Float32Array || g instanceof Array ) { + for( var j = 0; j < g.length; j += 3 ) { + var c = j/g.length; + this.positions.push( g[ j ], g[ j + 1 ], g[ j + 2 ] ); + this.positions.push( g[ j ], g[ j + 1 ], g[ j + 2 ] ); + this.counters.push(c); + this.counters.push(c); + } + } + + this.process(); + +} + +MeshLine.prototype.compareV3 = function( a, b ) { + + var aa = a * 6; + var ab = b * 6; + return ( this.positions[ aa ] === this.positions[ ab ] ) && ( this.positions[ aa + 1 ] === this.positions[ ab + 1 ] ) && ( this.positions[ aa + 2 ] === this.positions[ ab + 2 ] ); + +} + +MeshLine.prototype.copyV3 = function( a ) { + + var aa = a * 6; + return [ this.positions[ aa ], this.positions[ aa + 1 ], this.positions[ aa + 2 ] ]; + +} + +MeshLine.prototype.process = function() { + + var l = this.positions.length / 6; + + this.previous = []; + this.next = []; + this.side = []; + this.width = []; + this.indices_array = []; + this.uvs = []; + + for( var j = 0; j < l; j++ ) { + this.side.push( 1 ); + this.side.push( -1 ); + } + + var w; + for( var j = 0; j < l; j++ ) { + if( this.widthCallback ) w = this.widthCallback( j / ( l -1 ) ); + else w = 1; + this.width.push( w ); + this.width.push( w ); + } + + for( var j = 0; j < l; j++ ) { + this.uvs.push( j / ( l - 1 ), 0 ); + this.uvs.push( j / ( l - 1 ), 1 ); + } + + var v; + + if( this.compareV3( 0, l - 1 ) ){ + v = this.copyV3( l - 2 ); + } else { + v = this.copyV3( 0 ); + } + this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] ); + this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] ); + for( var j = 0; j < l - 1; j++ ) { + v = this.copyV3( j ); + this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] ); + this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] ); + } + + for( var j = 1; j < l; j++ ) { + v = this.copyV3( j ); + this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] ); + this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] ); + } + + if( this.compareV3( l - 1, 0 ) ){ + v = this.copyV3( 1 ); + } else { + v = this.copyV3( l - 1 ); + } + this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] ); + this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] ); + + for( var j = 0; j < l - 1; j++ ) { + var n = j * 2; + this.indices_array.push( n, n + 1, n + 2 ); + this.indices_array.push( n + 2, n + 1, n + 3 ); + } + + if (!this.attributes) { + this.attributes = { + position: new THREE.BufferAttribute( new Float32Array( this.positions ), 3 ), + previous: new THREE.BufferAttribute( new Float32Array( this.previous ), 3 ), + next: new THREE.BufferAttribute( new Float32Array( this.next ), 3 ), + side: new THREE.BufferAttribute( new Float32Array( this.side ), 1 ), + width: new THREE.BufferAttribute( new Float32Array( this.width ), 1 ), + uv: new THREE.BufferAttribute( new Float32Array( this.uvs ), 2 ), + index: new THREE.BufferAttribute( new Uint16Array( this.indices_array ), 1 ), + counters: new THREE.BufferAttribute( new Float32Array( this.counters ), 1 ) + } + } else { + this.attributes.position.copyArray(new Float32Array(this.positions)); + this.attributes.position.needsUpdate = true; + this.attributes.previous.copyArray(new Float32Array(this.previous)); + this.attributes.previous.needsUpdate = true; + this.attributes.next.copyArray(new Float32Array(this.next)); + this.attributes.next.needsUpdate = true; + this.attributes.side.copyArray(new Float32Array(this.side)); + this.attributes.side.needsUpdate = true; + this.attributes.width.copyArray(new Float32Array(this.width)); + this.attributes.width.needsUpdate = true; + this.attributes.uv.copyArray(new Float32Array(this.uvs)); + this.attributes.uv.needsUpdate = true; + this.attributes.index.copyArray(new Uint16Array(this.indices_array)); + this.attributes.index.needsUpdate = true; + } + + this.geometry.addAttribute( 'position', this.attributes.position ); + this.geometry.addAttribute( 'previous', this.attributes.previous ); + this.geometry.addAttribute( 'next', this.attributes.next ); + this.geometry.addAttribute( 'side', this.attributes.side ); + this.geometry.addAttribute( 'width', this.attributes.width ); + this.geometry.addAttribute( 'uv', this.attributes.uv ); + this.geometry.addAttribute( 'counters', this.attributes.counters ); + + this.geometry.setIndex( this.attributes.index ); + +} + +function memcpy (src, srcOffset, dst, dstOffset, length) { + var i + + src = src.subarray || src.slice ? src : src.buffer + dst = dst.subarray || dst.slice ? dst : dst.buffer + + src = srcOffset ? src.subarray ? + src.subarray(srcOffset, length && srcOffset + length) : + src.slice(srcOffset, length && srcOffset + length) : src + + if (dst.set) { + dst.set(src, dstOffset) + } else { + for (i=0; i Array.prototype.slice.apply(a) -export const choice = a => a[Math.floor(Math.random() * a.length)] - -const htmlClassList = document.body.parentNode.classList -htmlClassList.add(isDesktop ? 'desktop' : 'mobile') - -/* Default image dimensions */ - -export const widths = { - th: 160, - sm: 320, - md: 640, - lg: 1280, -} - -/* Formatting functions */ - -const acronyms = 'id url cc sa fp md5 sha256'.split(' ').map(s => '_' + s) -const acronymsUpperCase = acronyms.map(s => s.toUpperCase()) - -export const formatName = s => { - acronyms.forEach((acronym, i) => s = s.replace(acronym, acronymsUpperCase[i])) - return s.replace(/_/g, ' ') -} - -// Use to pad frame numbers with zeroes -export const pad = (n, m) => { - let s = String(n || 0) - while (s.length < m) { - s = '0' + s - } - return s -} - -export const courtesyS = (n, s) => n + ' ' + (n === 1 ? s : s + 's') - -export const padSeconds = n => n < 10 ? '0' + n : n - -export const timestamp = (n = 0, fps = 25) => { - n /= fps - let s = padSeconds(Math.round(n) % 60) - n = Math.floor(n / 60) - if (n > 60) { - return Math.floor(n / 60) + ':' + padSeconds(n % 60) + ':' + s - } - return (n % 60) + ':' + s -} - -export const percent = n => (n * 100).toFixed(1) + '%' -export const px = (n, w) => Math.round(n * w) + 'px' -export const clamp = (n, a, b) => n < a ? a : n < b ? n : b - -/* URLs */ - -export const preloadImage = opt => { - let { verified, hash, frame, url } = opt - if (hash && frame) { - url = imageUrl(verified, hash, frame, 'md') - } - const image = new Image() - let loaded = false - image.onload = () => { - if (loaded) return - loaded = true - image.onload = null - } - // console.log(img.src) - image.crossOrigin = 'anonymous' - image.src = url - if (image.complete) { - image.onload() - } -} - -/* AJAX */ - -export const get = (uri, data) => { - let headers = { - Accept: 'application/json, application/xml, text/play, text/html, *.*', - } - let opt = { - method: 'GET', - body: data, - headers, - // credentials: 'include', - } - // console.log(headers) - // headers['X-CSRFToken'] = csrftoken - return fetch(uri, opt).then(res => res.json()) -} - -export const post = (uri, data) => { - let headers - if (data instanceof FormData) { - headers = { - Accept: 'application/json, application/xml, text/play, text/html, *.*', - } - } else { - headers = { - Accept: 'application/json, application/xml, text/play, text/html, *.*', - 'Content-Type': 'application/json; charset=utf-8', - } - data = JSON.stringify(data) - } - let opt = { - method: 'POST', - body: data, - headers, - // credentials: 'include', - } - // console.log(headers) - // headers['X-CSRFToken'] = csrftoken - return fetch(uri, opt).then(res => res.json()) -} diff --git a/client/util/index.js b/client/util/index.js new file mode 100644 index 00000000..d0db0d98 --- /dev/null +++ b/client/util/index.js @@ -0,0 +1,122 @@ +/* Mobile check */ + +export const isiPhone = !!((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) +export const isiPad = !!(navigator.userAgent.match(/iPad/i)) +export const isAndroid = !!(navigator.userAgent.match(/Android/i)) +export const isMobile = isiPhone || isiPad || isAndroid +export const isDesktop = !isMobile + +export const toArray = a => Array.prototype.slice.apply(a) +export const choice = a => a[Math.floor(Math.random() * a.length)] + +const htmlClassList = document.body.parentNode.classList +htmlClassList.add(isDesktop ? 'desktop' : 'mobile') + +/* Default image dimensions */ + +export const widths = { + th: 160, + sm: 320, + md: 640, + lg: 1280, +} + +/* Formatting functions */ + +const acronyms = 'id url cc sa fp md5 sha256'.split(' ').map(s => '_' + s) +const acronymsUpperCase = acronyms.map(s => s.toUpperCase()) + +export const formatName = s => { + acronyms.forEach((acronym, i) => s = s.replace(acronym, acronymsUpperCase[i])) + return s.replace(/_/g, ' ') +} + +// Use to pad frame numbers with zeroes +export const pad = (n, m) => { + let s = String(n || 0) + while (s.length < m) { + s = '0' + s + } + return s +} + +export const courtesyS = (n, s) => n + ' ' + (n === 1 ? s : s + 's') + +export const padSeconds = n => n < 10 ? '0' + n : n + +export const timestamp = (n = 0, fps = 25) => { + n /= fps + let s = padSeconds(Math.round(n) % 60) + n = Math.floor(n / 60) + if (n > 60) { + return Math.floor(n / 60) + ':' + padSeconds(n % 60) + ':' + s + } + return (n % 60) + ':' + s +} + +export const percent = n => (n * 100).toFixed(1) + '%' +export const px = (n, w) => Math.round(n * w) + 'px' +export const clamp = (n, a, b) => n < a ? a : n < b ? n : b + +/* URLs */ + +export const preloadImage = opt => { + let { verified, hash, frame, url } = opt + if (hash && frame) { + url = imageUrl(verified, hash, frame, 'md') + } + const image = new Image() + let loaded = false + image.onload = () => { + if (loaded) return + loaded = true + image.onload = null + } + // console.log(img.src) + image.crossOrigin = 'anonymous' + image.src = url + if (image.complete) { + image.onload() + } +} + +/* AJAX */ + +export const get = (uri, data) => { + let headers = { + Accept: 'application/json, application/xml, text/play, text/html, *.*', + } + let opt = { + method: 'GET', + body: data, + headers, + // credentials: 'include', + } + // console.log(headers) + // headers['X-CSRFToken'] = csrftoken + return fetch(uri, opt).then(res => res.json()) +} + +export const post = (uri, data) => { + let headers + if (data instanceof FormData) { + headers = { + Accept: 'application/json, application/xml, text/play, text/html, *.*', + } + } else { + headers = { + Accept: 'application/json, application/xml, text/play, text/html, *.*', + 'Content-Type': 'application/json; charset=utf-8', + } + data = JSON.stringify(data) + } + let opt = { + method: 'POST', + body: data, + headers, + // credentials: 'include', + } + // console.log(headers) + // headers['X-CSRFToken'] = csrftoken + return fetch(uri, opt).then(res => res.json()) +} diff --git a/client/util/math.js b/client/util/math.js new file mode 100644 index 00000000..064d37c6 --- /dev/null +++ b/client/util/math.js @@ -0,0 +1,51 @@ +export const mod = (n,m) => n-(m * Math.floor(n/m)) +export const clamp = (n,a,b) => n (n-a) / (b-a) +export const lerp = (n,a,b) => (b-a)*n+a +export const mix = (n,a,b) => a*(1-n)+b*n +export const randint = (n) => Math.floor(Math.random()*n) +export const randrange = (a,b) => Math.random() * (b-a) + a +export const randsign = () => Math.random() >= 0.5 ? -1 : 1 +export const choice = (a) => a[ Math.floor(Math.random() * a.length) ] +export const angle = (x0,y0,x1,y1) => Math.atan2(y1-y0, x1-x0) +export const dist = (x0,y0,x1,y1) => Math.sqrt(Math.pow(x1-x0, 2) + Math.pow(y1-y0, 2)) +export const xor = (a,b) => { a=!!a; b=!!b; return (a||b) && !(a&&b) } +export const quantize = (a,b) => Math.floor(a/b)*b +export const shuffle = (a) => { + for (var i = a.length; i > 0; i--){ + var r = randint(i) + var swap = a[i-1] + a[i-1] = a[r] + a[r] = swap + } + return a +} +// returns a gaussian random function with the given mean and stdev. +export function gaussian(mean, stdev) { + let y2; + let use_last = false; + return () => { + let y1; + if (use_last) { + y1 = y2; + use_last = false; + } + else { + let x1, x2, w; + do { + x1 = 2.0 * Math.random() - 1.0; + x2 = 2.0 * Math.random() - 1.0; + w = x1 * x1 + x2 * x2; + } while( w >= 1.0); + w = Math.sqrt((-2.0 * Math.log(w))/w); + y1 = x1 * w; + y2 = x2 * w; + use_last = true; + } + + let retval = mean + stdev * y1; + if (retval > 0) + return retval; + return -retval; + } +} diff --git a/site/assets/css/splash.css b/site/assets/css/splash.css new file mode 100644 index 00000000..e60c7261 --- /dev/null +++ b/site/assets/css/splash.css @@ -0,0 +1,20 @@ +/* splash */ + +html, body { + overflow: hidden; + width: 100%; height:100%; +} +header { + position: absolute; + background: transparent; +} +footer { + background: transparent; + position: absolute; + bottom: 0; left: 0; +} +.splash { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; +} \ No newline at end of file diff --git a/site/assets/demo/splash/index.html b/site/assets/demo/splash/index.html index 371d573e..f2a4f94e 100644 --- a/site/assets/demo/splash/index.html +++ b/site/assets/demo/splash/index.html @@ -23,9 +23,9 @@ About -
+
+ -
diff --git a/site/assets/js/vendor/oktween.js b/site/assets/js/vendor/oktween.js index 7ecf62fb..b26d360e 100644 --- a/site/assets/js/vendor/oktween.js +++ b/site/assets/js/vendor/oktween.js @@ -156,4 +156,4 @@ var oktween = (function(){ } return oktween -})() +})() \ No newline at end of file -- cgit v1.2.3-70-g09d2 From c9d476e421a50aa5e3e20389365263d5c36e5696 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 27 Jan 2019 17:17:40 +0100 Subject: import three :) --- client/splash/index.js | 3 ++- package-lock.json | 5 +++++ package.json | 3 ++- 3 files changed, 9 insertions(+), 2 deletions(-) (limited to 'client/splash/index.js') diff --git a/client/splash/index.js b/client/splash/index.js index 6253098e..988de9b4 100644 --- a/client/splash/index.js +++ b/client/splash/index.js @@ -1 +1,2 @@ -import oktween from './vendor/oktween' \ No newline at end of file +import oktween from './vendor/oktween' + diff --git a/package-lock.json b/package-lock.json index 72d44774..432f49c6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8716,6 +8716,11 @@ "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=", "dev": true }, + "three": { + "version": "0.100.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.100.0.tgz", + "integrity": "sha512-/lN2rdE1OqIwJr4/HcSaOisiCY0uVA0sqPpbCG5nil2uICEdS0LfGwSVYTtZDsIpR76r3++h5H3Hzg5D+SJBRQ==" + }, "through": { "version": "2.3.8", "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz", diff --git a/package.json b/package.json index bcd22bd0..3705efc7 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,8 @@ "redux-thunk": "^2.3.0", "snapsvg": "^0.5.1", "store2": "^2.7.0", - "tabulator-tables": "^4.1.3" + "tabulator-tables": "^4.1.3", + "three": "^0.100.0" }, "devDependencies": { "babel-cli": "^6.24.1", -- cgit v1.2.3-70-g09d2 From 3f16cb26e6a5e7858c9c3db10d02bec9c18b9511 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 27 Jan 2019 17:27:14 +0100 Subject: remove dependencies from DRACO and MeshLine --- client/splash/index.js | 2 ++ client/splash/vendor/DRACOLoader.js | 59 +++++++++++++++++---------------- client/splash/vendor/geometry_helper.js | 4 +++ client/splash/vendor/three.meshline.js | 29 +++------------- site/assets/css/applets.css | 2 ++ site/assets/css/css.css | 1 + site/assets/css/splash.css | 6 ++++ site/assets/demo/splash/index.html | 4 +-- 8 files changed, 52 insertions(+), 55 deletions(-) (limited to 'client/splash/index.js') diff --git a/client/splash/index.js b/client/splash/index.js index 988de9b4..de356862 100644 --- a/client/splash/index.js +++ b/client/splash/index.js @@ -1,2 +1,4 @@ import oktween from './vendor/oktween' +import { MeshLine, MeshLineMaterial } from './vendor/three.meshline' + diff --git a/client/splash/vendor/DRACOLoader.js b/client/splash/vendor/DRACOLoader.js index 03fecb6b..64e6d801 100644 --- a/client/splash/vendor/DRACOLoader.js +++ b/client/splash/vendor/DRACOLoader.js @@ -12,12 +12,13 @@ // See the License for the specific language governing permissions and // limitations under the License. // -'use strict'; + +import * as THREE from 'three'; /** * @param {THREE.LoadingManager} manager */ -THREE.DRACOLoader = function(manager) { +DRACOLoader = function(manager) { this.timeLoaded = 0; this.manager = manager || THREE.DefaultLoadingManager; this.materials = null; @@ -33,9 +34,9 @@ THREE.DRACOLoader = function(manager) { }; }; -THREE.DRACOLoader.prototype = { +DRACOLoader.prototype = { - constructor: THREE.DRACOLoader, + constructor: DRACOLoader, load: function(url, onLoad, onProgress, onError) { var scope = this; @@ -103,7 +104,7 @@ THREE.DRACOLoader.prototype = { decodeDracoFile: function(rawBuffer, callback, attributeUniqueIdMap, attributeTypeMap) { var scope = this; - THREE.DRACOLoader.getDecoderModule() + DRACOLoader.getDecoderModule() .then( function ( module ) { scope.decodeDracoFileInternal( rawBuffer, module.decoder, callback, attributeUniqueIdMap || {}, attributeTypeMap || {}); @@ -386,7 +387,7 @@ THREE.DRACOLoader.prototype = { }, isVersionSupported: function(version, callback) { - THREE.DRACOLoader.getDecoderModule() + DRACOLoader.getDecoderModule() .then( function ( module ) { callback( module.decoder.isVersionSupported( version ) ); }); @@ -399,16 +400,16 @@ THREE.DRACOLoader.prototype = { } }; -THREE.DRACOLoader.decoderPath = './'; -THREE.DRACOLoader.decoderConfig = {}; -THREE.DRACOLoader.decoderModulePromise = null; +DRACOLoader.decoderPath = './'; +DRACOLoader.decoderConfig = {}; +DRACOLoader.decoderModulePromise = null; /** * Sets the base path for decoder source files. * @param {string} path */ -THREE.DRACOLoader.setDecoderPath = function ( path ) { - THREE.DRACOLoader.decoderPath = path; +DRACOLoader.setDecoderPath = function ( path ) { + DRACOLoader.decoderPath = path; }; /** @@ -416,21 +417,21 @@ THREE.DRACOLoader.setDecoderPath = function ( path ) { * will be recreated with the next decoding call. * @param {Object} config */ -THREE.DRACOLoader.setDecoderConfig = function ( config ) { - var wasmBinary = THREE.DRACOLoader.decoderConfig.wasmBinary; - THREE.DRACOLoader.decoderConfig = config || {}; - THREE.DRACOLoader.releaseDecoderModule(); +DRACOLoader.setDecoderConfig = function ( config ) { + var wasmBinary = DRACOLoader.decoderConfig.wasmBinary; + DRACOLoader.decoderConfig = config || {}; + DRACOLoader.releaseDecoderModule(); // Reuse WASM binary. - if ( wasmBinary ) THREE.DRACOLoader.decoderConfig.wasmBinary = wasmBinary; + if ( wasmBinary ) DRACOLoader.decoderConfig.wasmBinary = wasmBinary; }; /** * Releases the singleton DracoDecoderModule instance. Module will be recreated * with the next decoding call. */ -THREE.DRACOLoader.releaseDecoderModule = function () { - THREE.DRACOLoader.decoderModulePromise = null; +DRACOLoader.releaseDecoderModule = function () { + DRACOLoader.decoderModulePromise = null; }; /** @@ -439,11 +440,11 @@ THREE.DRACOLoader.releaseDecoderModule = function () { * module is available. * @return {Promise<{decoder: DracoDecoderModule}>} */ -THREE.DRACOLoader.getDecoderModule = function () { +DRACOLoader.getDecoderModule = function () { var scope = this; - var path = THREE.DRACOLoader.decoderPath; - var config = THREE.DRACOLoader.decoderConfig; - var promise = THREE.DRACOLoader.decoderModulePromise; + var path = DRACOLoader.decoderPath; + var config = DRACOLoader.decoderConfig; + var promise = DRACOLoader.decoderModulePromise; if ( promise ) return promise; @@ -453,13 +454,13 @@ THREE.DRACOLoader.getDecoderModule = function () { promise = Promise.resolve(); } else if ( typeof WebAssembly !== 'object' || config.type === 'js' ) { // Load with asm.js. - promise = THREE.DRACOLoader._loadScript( path + 'draco_decoder.js' ); + promise = DRACOLoader._loadScript( path + 'draco_decoder.js' ); } else { // Load with WebAssembly. config.wasmBinaryFile = path + 'draco_decoder.wasm'; - promise = THREE.DRACOLoader._loadScript( path + 'draco_wasm_wrapper.js' ) + promise = DRACOLoader._loadScript( path + 'draco_wasm_wrapper.js' ) .then( function () { - return THREE.DRACOLoader._loadArrayBuffer( config.wasmBinaryFile ); + return DRACOLoader._loadArrayBuffer( config.wasmBinaryFile ); } ) .then( function ( wasmBinary ) { config.wasmBinary = wasmBinary; @@ -478,7 +479,7 @@ THREE.DRACOLoader.getDecoderModule = function () { } ); } ); - THREE.DRACOLoader.decoderModulePromise = promise; + DRACOLoader.decoderModulePromise = promise; return promise; }; @@ -486,7 +487,7 @@ THREE.DRACOLoader.getDecoderModule = function () { * @param {string} src * @return {Promise} */ -THREE.DRACOLoader._loadScript = function ( src ) { +DRACOLoader._loadScript = function ( src ) { var prevScript = document.getElementById( 'decoder_script' ); if ( prevScript !== null ) { prevScript.parentNode.removeChild( prevScript ); @@ -506,10 +507,12 @@ THREE.DRACOLoader._loadScript = function ( src ) { * @param {string} src * @return {Promise} */ -THREE.DRACOLoader._loadArrayBuffer = function ( src ) { +DRACOLoader._loadArrayBuffer = function ( src ) { var loader = new THREE.FileLoader(); loader.setResponseType( 'arraybuffer' ); return new Promise( function( resolve, reject ) { loader.load( src, resolve, undefined, reject ); }); }; + +export default DRACOLoader diff --git a/client/splash/vendor/geometry_helper.js b/client/splash/vendor/geometry_helper.js index 095f7970..1ac88f3b 100644 --- a/client/splash/vendor/geometry_helper.js +++ b/client/splash/vendor/geometry_helper.js @@ -13,6 +13,8 @@ // limitations under the License. // +import * as THREE from 'three'; + /** * @fileoverview Helper class implementing various utilities for THREE.js * geometry. @@ -100,3 +102,5 @@ GeometryHelper.prototype = { } }, }; + +export default GeometryHelper diff --git a/client/splash/vendor/three.meshline.js b/client/splash/vendor/three.meshline.js index c6e998e3..00096f58 100644 --- a/client/splash/vendor/three.meshline.js +++ b/client/splash/vendor/three.meshline.js @@ -1,14 +1,4 @@ -;(function() { - -"use strict"; - -var root = this - -var has_require = typeof require !== 'undefined' - -var THREE = root.THREE || has_require && require('three') -if( !THREE ) - throw new Error( 'MeshLine requires three.js' ) +import * as THREE from 'three'; function MeshLine() { @@ -471,16 +461,7 @@ MeshLineMaterial.prototype.copy = function ( source ) { }; -if( typeof exports !== 'undefined' ) { - if( typeof module !== 'undefined' && module.exports ) { - exports = module.exports = { MeshLine: MeshLine, MeshLineMaterial: MeshLineMaterial }; - } - exports.MeshLine = MeshLine; - exports.MeshLineMaterial = MeshLineMaterial; -} -else { - root.MeshLine = MeshLine; - root.MeshLineMaterial = MeshLineMaterial; -} - -}).call(this); \ No newline at end of file +export default { + MeshLine, + MeshLineMaterial, +}; diff --git a/site/assets/css/applets.css b/site/assets/css/applets.css index f437d1e8..aa9ce47f 100644 --- a/site/assets/css/applets.css +++ b/site/assets/css/applets.css @@ -1,3 +1,5 @@ +/* applets */ + .applet_container { min-height: 340px; } diff --git a/site/assets/css/css.css b/site/assets/css/css.css index 50958427..e29f2595 100644 --- a/site/assets/css/css.css +++ b/site/assets/css/css.css @@ -467,6 +467,7 @@ section.fullwidth .image { .content .dataset-intro .first_paragraph { margin-top: 10px; } + /* intro - list of datasets */ .dataset-list { diff --git a/site/assets/css/splash.css b/site/assets/css/splash.css index e60c7261..fbfc9b6f 100644 --- a/site/assets/css/splash.css +++ b/site/assets/css/splash.css @@ -7,13 +7,19 @@ html, body { header { position: absolute; background: transparent; + box-shadow: none; } footer { background: transparent; position: absolute; bottom: 0; left: 0; } +footer div { + z-index: 2; +} .splash { +} +#three_container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; diff --git a/site/assets/demo/splash/index.html b/site/assets/demo/splash/index.html index f2a4f94e..28063651 100644 --- a/site/assets/demo/splash/index.html +++ b/site/assets/demo/splash/index.html @@ -24,9 +24,7 @@
- - - +