From c293006ba43944ffeb4dcab17b2256f3a5491a36 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 17 Jan 2019 15:10:19 +0100 Subject: build cloud --- site/assets/cloud/.gitignore | 1 + site/assets/cloud/.npmignore | 4 + site/assets/cloud/LICENSE | 21 +++++ site/assets/cloud/README.md | 109 +++++++++++++++++++++++ site/assets/cloud/THREE.TextSprite.js | 1 + site/assets/cloud/demo/script.js | 129 ++++++++++++++++++++++++++++ site/assets/cloud/index.html | 31 +++++++ site/assets/cloud/package.json | 40 +++++++++ site/assets/cloud/rollup.config.js | 25 ++++++ site/assets/cloud/src/getOptimalFontSize.js | 18 ++++ site/assets/cloud/src/index.js | 78 +++++++++++++++++ site/assets/css/css.css | 15 +++- site/assets/js/app/face.js | 68 ++++++++------- 13 files changed, 505 insertions(+), 35 deletions(-) create mode 100644 site/assets/cloud/.gitignore create mode 100644 site/assets/cloud/.npmignore create mode 100644 site/assets/cloud/LICENSE create mode 100644 site/assets/cloud/README.md create mode 100644 site/assets/cloud/THREE.TextSprite.js create mode 100644 site/assets/cloud/demo/script.js create mode 100644 site/assets/cloud/index.html create mode 100644 site/assets/cloud/package.json create mode 100644 site/assets/cloud/rollup.config.js create mode 100644 site/assets/cloud/src/getOptimalFontSize.js create mode 100644 site/assets/cloud/src/index.js (limited to 'site/assets') diff --git a/site/assets/cloud/.gitignore b/site/assets/cloud/.gitignore new file mode 100644 index 00000000..2ccbe465 --- /dev/null +++ b/site/assets/cloud/.gitignore @@ -0,0 +1 @@ +/node_modules/ diff --git a/site/assets/cloud/.npmignore b/site/assets/cloud/.npmignore new file mode 100644 index 00000000..dcaf4a28 --- /dev/null +++ b/site/assets/cloud/.npmignore @@ -0,0 +1,4 @@ +/demo/ +/index.html +/rollup.config.js +/src/ diff --git a/site/assets/cloud/LICENSE b/site/assets/cloud/LICENSE new file mode 100644 index 00000000..edeba37c --- /dev/null +++ b/site/assets/cloud/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2017-2018 Sergej Sintschilin + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/site/assets/cloud/README.md b/site/assets/cloud/README.md new file mode 100644 index 00000000..de6e882e --- /dev/null +++ b/site/assets/cloud/README.md @@ -0,0 +1,109 @@ +# THREE.TextSprite + +`class THREE.TextSprite extends THREE.Sprite` + +An instance of `TextSprite` automatically computes the optimal font size depending on the distance to the camera and the size of the renderer canvas. + +## demo + +[Try it out!](https://seregpie.github.io/THREE.TextSprite/) + +## dependencies + +- [THREE.TextTexture](https://github.com/SeregPie/THREE.TextTexture) + +## setup + +### npm + +```shell +npm install three.textsprite +``` + +### ES module + +```javascript +import TextSprite from 'three.textsprite'; +``` + +### browser + +```html + + + +``` + +The class `TextSprite` will be available under the namespace `THREE`. + +## members + +``` +.constructor({ + material, + maxFontSize, + minFontSize, + redrawInterval, + textSize, + texture, +}) +``` + +| argument | description | +| ---: | :--- | +| `material` | The parameters to pass to the constructor of [`SpriteMaterial`](https://threejs.org/docs/index.html#api/materials/SpriteMaterial). | +| `texture` | The parameters to pass to the constructor of [`TextTexture`](https://github.com/SeregPie/THREE.TextTexture). | + +```javascript +let sprite = new THREE.TextSprite({ + material: { + color: 0xffbbff, + fog: true, + }, + redrawInterval: 250, + textSize: 10, + texture: { + text: 'Carpe Diem', + fontFamily: 'Arial, Helvetica, sans-serif', + }, +}); +scene.add(sprite); +``` + +--- + +`.isTextSprite = true` + +Used to check whether this is an instance of `TextSprite`. + +You should not change this, as it is used internally for optimisation. + +--- + +`.textSize = 1` + +The size of the text. + +--- + +`.redrawInterval = 1` + +The minimum time that must elapse before the canvas is redrawn. If 0, the canvas is redrawn immediately whenever `TextSprite` is rendered, otherwise the redrawing is deferred. + +--- + +`.minFontSize = 0` + +The minimum font size. + +--- + +`.maxFontSize = Infinity` + +The maximum font size. + +--- + +`.dispose()` + +Disposes the texture and the material. diff --git a/site/assets/cloud/THREE.TextSprite.js b/site/assets/cloud/THREE.TextSprite.js new file mode 100644 index 00000000..525d22cd --- /dev/null +++ b/site/assets/cloud/THREE.TextSprite.js @@ -0,0 +1 @@ +(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?module.exports=b(require("three"),require("three.texttexture")):"function"==typeof define&&define.amd?define(["three","three.texttexture"],b):(a.THREE=a.THREE||{},a.THREE.TextSprite=b(a.THREE,a.THREE.TextTexture))})(this,function(a,b){"use strict";function c(a,b,c){var g=Math.round;if(b.domElement.width&&b.domElement.height&&a.material.map.textLines.length){var h=a.getWorldPosition(d).distanceTo(c.getWorldPosition(e));if(h){var i=a.getWorldScale(f).y*b.domElement.height/h;if(i)return g(i/a.material.map.imageHeight)}}return 0}b=b&&b.hasOwnProperty("default")?b["default"]:b;var d=new a.Vector3,e=new a.Vector3,f=new a.Vector3,g=function(d){function e(c){void 0===c&&(c={});var e=c.textSize;void 0===e&&(e=1);var f=c.redrawInterval;void 0===f&&(f=1);var g=c.minFontSize;void 0===g&&(g=0);var h=c.maxFontSize;void 0===h&&(h=1/0);var i=c.material;void 0===i&&(i={});var j=c.texture;void 0===j&&(j={}),d.call(this,new a.SpriteMaterial(Object.assign({},i,{map:new b(j)}))),this.textSize=e,this.redrawInterval=f,this.minFontSize=g,this.maxFontSize=h,this.lastRedraw=0}d&&(e.__proto__=d),e.prototype=Object.create(d&&d.prototype),e.prototype.constructor=e;var f={isTextSprite:{configurable:!0}};return f.isTextSprite.get=function(){return!0},e.prototype.onBeforeRender=function(a,b,c){this.redraw(a,c)},e.prototype.updateScale=function(){this.scale.set(this.material.map.imageAspect,1,1).multiplyScalar(this.textSize*this.material.map.imageHeight)},e.prototype.updateMatrix=function(){for(var a=[],b=arguments.length;b--;)a[b]=arguments[b];return this.updateScale(),d.prototype.updateMatrix.apply(this,a)},e.prototype.redraw=function(a,b){var c=this;this.lastRedraw+this.redrawInterval + + + + + THREE.TextSprite + + + + + + + + + + + + diff --git a/site/assets/cloud/package.json b/site/assets/cloud/package.json new file mode 100644 index 00000000..f7556104 --- /dev/null +++ b/site/assets/cloud/package.json @@ -0,0 +1,40 @@ +{ + "name": "three.textsprite", + "version": "18.10.24", + "description": "Automatically computes the optimal font size depending on the distance to the camera and the size of the renderer canvas.", + "keywords": [ + "3d", + "canvas", + "class", + "font", + "group", + "object", + "plugin", + "resolution", + "scale", + "size", + "text", + "texture", + "three" + ], + "license": "MIT", + "author": "Sergej Sintschilin ", + "main": "THREE.TextSprite.js", + "repository": "https://github.com/SeregPie/THREE.TextSprite.git", + "scripts": { + "build": "rollup -c", + "dev": "rollup -c -w", + "prepublishOnly": "npm run build" + }, + "dependencies": { + "three.texttexture": "^18.10.24" + }, + "devDependencies": { + "rollup": "^0.66.6", + "rollup-plugin-babel-minify": "^6.1.1", + "rollup-plugin-buble": "^0.19.4" + }, + "peerDependencies": { + "three": "^0.97.0" + } +} diff --git a/site/assets/cloud/rollup.config.js b/site/assets/cloud/rollup.config.js new file mode 100644 index 00000000..57415169 --- /dev/null +++ b/site/assets/cloud/rollup.config.js @@ -0,0 +1,25 @@ +import buble from 'rollup-plugin-buble'; +import minify from 'rollup-plugin-babel-minify'; +import path from 'path'; + +import {main} from './package.json'; + +let globals = { + 'three': 'THREE', + 'three.texttexture': 'THREE.TextTexture', +}; + +export default { + input: 'src/index.js', + external: Object.keys(globals), + output: { + file: main, + format: 'umd', + name: path.basename(main, path.extname(main)), + globals, + }, + plugins: [ + buble({objectAssign: 'Object.assign'}), + minify({comments: false}), + ], +}; diff --git a/site/assets/cloud/src/getOptimalFontSize.js b/site/assets/cloud/src/getOptimalFontSize.js new file mode 100644 index 00000000..02787516 --- /dev/null +++ b/site/assets/cloud/src/getOptimalFontSize.js @@ -0,0 +1,18 @@ +import {Vector3} from 'three'; + +let objectWorldPosition = new Vector3(); +let cameraWorldPosition = new Vector3(); +let objectWorldScale = new Vector3(); + +export default function(object, renderer, camera) { + if (renderer.domElement.width && renderer.domElement.height && object.material.map.textLines.length) { + let distance = object.getWorldPosition(objectWorldPosition).distanceTo(camera.getWorldPosition(cameraWorldPosition)); + if (distance) { + let heightInPixels = object.getWorldScale(objectWorldScale).y * renderer.domElement.height / distance; + if (heightInPixels) { + return Math.round(heightInPixels / object.material.map.imageHeight); + } + } + } + return 0; +} diff --git a/site/assets/cloud/src/index.js b/site/assets/cloud/src/index.js new file mode 100644 index 00000000..270891d5 --- /dev/null +++ b/site/assets/cloud/src/index.js @@ -0,0 +1,78 @@ +import { + Math as THREE_Math, + Sprite, + SpriteMaterial, +} from 'three'; +import TextTexture from 'three.texttexture'; + +import getOptimalFontSize from './getOptimalFontSize'; + +export default class extends Sprite { + constructor({ + textSize = 1, + redrawInterval = 1, + minFontSize = 0, + maxFontSize = Infinity, + material = {}, + texture = {}, + } = {}) { + super(new SpriteMaterial({ + ...material, + map: new TextTexture(texture), + })); + this.textSize = textSize; + this.redrawInterval = redrawInterval; + this.minFontSize = minFontSize; + this.maxFontSize = maxFontSize; + this.lastRedraw = 0; + } + + get isTextSprite() { + return true; + } + + onBeforeRender(renderer, scene, camera) { + this.redraw(renderer, camera); + } + + updateScale() { + this.scale + .set(this.material.map.imageAspect, 1, 1) + .multiplyScalar(this.textSize * this.material.map.imageHeight); + } + + updateMatrix(...args) { + this.updateScale(); + return super.updateMatrix(...args); + } + + redraw(renderer, camera) { + if (this.lastRedraw + this.redrawInterval < Date.now()) { + if (this.redrawInterval) { + setTimeout(() => { + this.redrawNow(renderer, camera); + }, 1); + } else { + this.redrawNow(renderer, camera); + } + } + } + + redrawNow(renderer, camera) { + this.updateScale(); + this.material.map.autoRedraw = true; + this.material.map.fontSize = THREE_Math.clamp( + THREE_Math.ceilPowerOfTwo( + getOptimalFontSize(this, renderer, camera) + ), + this.minFontSize, + this.maxFontSize, + ); + this.lastRedraw = Date.now(); + } + + dispose() { + this.material.map.dispose(); + this.material.dispose(); + } +} diff --git a/site/assets/css/css.css b/site/assets/css/css.css index 8239cfc7..18959c12 100644 --- a/site/assets/css/css.css +++ b/site/assets/css/css.css @@ -376,11 +376,17 @@ section.fullwidth .image { /* home page */ .hero { - position: relative; width: 100%; - max-width: 1200px; + background: black; + background: linear-gradient(#000,#222); height: 50vw; max-height: 70vh; +} +.hero .inner { + position: relative; + width: 100%; + max-width: 1200px; + height: 100%; display: flex; align-items: center; margin: 0 auto; @@ -393,7 +399,7 @@ section.fullwidth .image { max-height: 70vh; top: 0; right: 0; - z-index: -1; + z-index: 0; text-align: center; } .currentFace { @@ -451,6 +457,9 @@ section.fullwidth .image { .desktop .intro .under a:hover { color: #fff; } +.dataset-intro h2 { + margin-top: 40px; +} /* intro - list of datasets */ diff --git a/site/assets/js/app/face.js b/site/assets/js/app/face.js index f3f1f2bf..1818e9aa 100644 --- a/site/assets/js/app/face.js +++ b/site/assets/js/app/face.js @@ -1,4 +1,5 @@ -var face = (function(){ +/* eslint-disable */ +var faceInit = function () { var container = document.querySelector("#face_container") var camera, controls, scene, renderer var mouse = new THREE.Vector2(0.5, 0.5) @@ -16,6 +17,7 @@ var face = (function(){ return a })() var last_t = 0, start_t = 0 + var bgColor = 0x000000 // 0x191919 var colors = [ 0xff3333, 0xff8833, @@ -32,32 +34,33 @@ var face = (function(){ function init() { fetch("/assets/data/3dlm_0_10.json") - .then(req => req.json()) - .then(data => { - face_names = Object.keys(data) - faces = face_names.map(name => recenter(data[name])) - setup() - build(faces[0]) - updateFace(faces[0]) - setCurrentFace(face_names[0]) - swapTo = faces[0] - animate() - }) + .then(req => req.json()) + .then(data => { + face_names = Object.keys(data) + faces = face_names.map(name => recenter(data[name])) + setup() + build(faces[0]) + updateFace(faces[0]) + setCurrentFace(face_names[0]) + swapTo = faces[0] + animate() + }) } function setup() { - var w = window.innerWidth / 2 + var w = window.innerWidth * 2/3 var h = Math.min(window.innerWidth / 2, window.innerHeight * 0.7) camera = new THREE.PerspectiveCamera(70, w/h, 1, 10000) camera.position.x = 0 camera.position.y = 0 - camera.position.z = 250 + camera.position.z = 200 scene = new THREE.Scene() - scene.background = new THREE.Color(0x191919) + // scene.background = new THREE.Color(bgColor) - renderer = new THREE.WebGLRenderer({ antialias: true }) + renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }) renderer.setPixelRatio(window.devicePixelRatio) renderer.setSize(w, h) + renderer.setClearColor(0x000000, 0); container.appendChild(renderer.domElement) document.body.addEventListener('mousemove', onMouseMove) // renderer.domElement.addEventListener('mousedown', swap) @@ -75,7 +78,7 @@ var face = (function(){ // console.log("done") // } // }) - setInterval(swap, 5000) + swap() } function build(points) { var matrix = new THREE.Matrix4() @@ -125,27 +128,28 @@ var face = (function(){ return (b-a) * n + a } function swap(){ - if (swapping) return - start_t = last_t - swapping = true swap_count = (swap_count + 1) % faces.length - swapFrom = swapTo + swapFrom = swapTo || faces[0] swapTo = faces[swap_count] setCurrentFace(face_names[swap_count]) + oktween.add({ + from: { n: 0 }, + to: { n: 1 }, + duration: 1000, + easing: oktween.easing.quad_in_out, + update: function(obj){ + lerpPoints(obj.n, swapFrom, swapTo, faceBuffer) + updateFace(faceBuffer) + }, + finished: function(){ + setTimeout(swap, 2000) + } + }) } function setCurrentFace(name) { name = name.replace('.png', '').split('_').filter(s => !s.match(/\d+/)).join(' ') currentFace.innerHTML = name } - function update_swap(t){ - var n = (t - start_t) / SWAP_TIME - if (n > 1) { - swapping = false - n = 1 - } - lerpPoints(n, swapFrom, swapTo, faceBuffer) - updateFace(faceBuffer) - } function updateFace(points) { updateCubeGeometry(points) updateLineGeometry(points) @@ -214,7 +218,6 @@ var face = (function(){ } function animate(t) { requestAnimationFrame(animate) - if (swapping) update_swap(t) renderer.render(scene, camera) // scene.rotation.y += 0.01 * Math.PI mouseTarget.x += (mouse.x - mouseTarget.x) * 0.1 @@ -224,4 +227,5 @@ var face = (function(){ // scene.rotation.y += 0.01 last_t = t } -})() +} +faceInit() \ No newline at end of file -- cgit v1.2.3-70-g09d2