canvas#canvas
p#message Move your mouse
html,
body {
height: 100%;
}
body {
margin: 0;
background-color: #000;
}
#canvas {
display: block;
width: 100%;
height: 100%;
body.o-start & {
cursor: none;
}
}
#message {
position: absolute;
right: 0;
bottom: 0;
left: 0;
color: rgba(#fff, 0.7);
font-family: Georgia, serif;
font-size: 0.9rem;
text-align: center;
letter-spacing: 0.1em;
pointer-events: none;
opacity: 0;
transition: opacity 500ms;
body.o-start & {
opacity: 1;
}
}
parcelRequire = (function (init) {
// Save the require from previous bundle to this closure if any
var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
var nodeRequire = typeof require === 'function' && require;
var modules = {};
function localRequire(name, jumped) {
if (name in modules) {
return modules[name];
}
// if we cannot find the module within our internal map or
// cache jump to the current global require ie. the last bundle
// that was added to the page.
var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
if (!jumped && currentRequire) {
return currentRequire(name, true);
}
// If there are other bundles on this page the require from the
// previous one is saved to 'previousRequire'. Repeat this as
// many times as there are bundles until the module is found or
// we exhaust the require chain.
if (previousRequire) {
return previousRequire(name, true);
}
// Try the node require function if it exists.
if (nodeRequire && typeof name === 'string') {
return nodeRequire(name);
}
var err = new Error('Cannot find module \'' + name + '\'');
err.code = 'MODULE_NOT_FOUND';
throw err;
}
localRequire.register = function register(id, exports) {
modules[id] = exports;
};
modules = init(localRequire);
localRequire.modules = modules;
return localRequire;
})(function (require) {
function $parcel$interopDefault(a) {
return a && a.__esModule ? {
d: a.default
} : {
d: a
};
}
function $pTw7$var$_toConsumableArray(arr) {
return $pTw7$var$_arrayWithoutHoles(arr) || $pTw7$var$_iterableToArray(arr) || $pTw7$var$_nonIterableSpread();
}
function $pTw7$var$_nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}
function $pTw7$var$_iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}
function $pTw7$var$_arrayWithoutHoles(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
arr2[i] = arr[i];
}
return arr2;
}
}
function $pTw7$var$_classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function $pTw7$var$_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);
}
}
function $pTw7$var$_createClass(Constructor, protoProps, staticProps) {
if (protoProps) $pTw7$var$_defineProperties(Constructor.prototype, protoProps);
if (staticProps) $pTw7$var$_defineProperties(Constructor, staticProps);
return Constructor;
} // import * as THREE from 'three'
// import TrackballControls from 'three-trackballcontrols'
// import './three/postprocessing'
// THREE.TrackballControls = TrackballControls
/*!
* Three.js Wrapper
* forked from https://github.com/zadvorsky/three.bas/blob/86931253240abadf68b7c62edb934b994693ed4a/examples/_js/root.js
*/
var $pTw7$export$default =
/*#__PURE__*/
function () {
function THREERoot(params) {
var _this$camera$position,
_this = this;
$pTw7$var$_classCallCheck(this, THREERoot); // defaults
var _params$container = params.container,
container = _params$container === void 0 ? document.body : _params$container,
_params$fov = params.fov,
fov = _params$fov === void 0 ? 45 : _params$fov,
zNear = params.zNear,
zFar = params.zFar,
_params$cameraPositio = params.cameraPosition,
cameraPosition = _params$cameraPositio === void 0 ? [0, 0, 30] : _params$cameraPositio,
_params$createCameraC = params.createCameraControls,
createCameraControls = _params$createCameraC === void 0 ? false : _params$createCameraC,
_params$isAutoStart = params.isAutoStart,
isAutoStart = _params$isAutoStart === void 0 ? true : _params$isAutoStart,
_params$pixelRatio = params.pixelRatio,
pixelRatio = _params$pixelRatio === void 0 ? window.devicePixelRatio : _params$pixelRatio,
_params$antialias = params.antialias,
antialias = _params$antialias === void 0 ? window.devicePixelRatio === 1 : _params$antialias,
_params$alpha = params.alpha,
alpha = _params$alpha === void 0 ? false : _params$alpha,
_params$clearColor = params.clearColor,
clearColor = _params$clearColor === void 0 ? 0x000000 : _params$clearColor,
aspect = params.aspect,
_params$canvas = params.canvas,
canvas = _params$canvas === void 0 ? document.createElement('canvas') : _params$canvas,
_params$speed = params.speed,
speed = _params$speed === void 0 ? 60 / 1000 : _params$speed,
interval = params.interval,
_params$firstTime = params.firstTime,
firstTime = _params$firstTime === void 0 ? 0 : _params$firstTime,
_params$isDev = params.isDev,
isDev = _params$isDev === void 0 ? false : _params$isDev;
this.speed = speed;
this.interval = interval;
this.time = this.firstTime = firstTime;
this.stopTime = 0; // maps and arrays
this.updateCallbacks = [];
this.resizeCallbacks = [];
this.objects = {}; // renderer
this.renderer = new THREE.WebGLRenderer({
antialias: antialias,
alpha: alpha,
canvas: canvas
});
this.renderer.setPixelRatio(pixelRatio);
this.renderer.setClearColor(clearColor, alpha ? 0 : 1);
this.canvas = this.renderer.domElement; // container
this.container = typeof container === 'string' ? document.querySelector(container) : container;
!params.canvas && this.container.appendChild(this.canvas);
this.aspect = aspect || this.container.clientWidth / this.container.clientHeight;
this.setSize(); // camera
this.camera = new THREE.PerspectiveCamera(fov, this.width / this.height, zNear, zFar);
(_this$camera$position = this.camera.position).set.apply(_this$camera$position, $pTw7$var$_toConsumableArray(cameraPosition));
this.camera.updateProjectionMatrix(); // scene
this.scene = new THREE.Scene(); // resize handling
this.resize();
window.addEventListener('resize', function () {
_this.resize();
}); // tick / update / render
isAutoStart && this.start(); // optional camera controls
createCameraControls && this.createOrbitControls(); // pointer
this.raycaster = new THREE.Raycaster();
this.pointer = new THREE.Vector2(); // developer mode
if (isDev) {
document.addEventListener('keydown', function (_ref) {
var key = _ref.key;
if (key === 'Escape') {
_this.toggle();
}
});
}
}
$pTw7$var$_createClass(THREERoot, [{
key: "setSize",
value: function setSize() {
if (this.aspect) {
if (this.container.clientWidth / this.container.clientHeight > this.aspect) {
this.width = this.container.clientHeight * this.aspect;
this.height = this.container.clientHeight;
} else {
this.width = this.container.clientWidth;
this.height = this.container.clientWidth / this.aspect;
}
} else {
this.width = this.container.clientWidth;
this.height = this.container.clientHeight;
}
}
}, {
key: "createOrbitControls",
value: function createOrbitControls() {
var _this2 = this;
if (!THREE.TrackballControls) {
console.error('TrackballControls.js file is not loaded.');
return;
}
this.controls = new THREE.TrackballControls(this.camera, this.canvas);
this.addUpdateCallback(function () {
_this2.controls.update();
});
}
}, {
key: "start",
value: function start() {
var _this3 = this;
var startTime = this.stopTime || this.firstTime;
requestAnimationFrame(function (timestamp) {
_this3.startTime = timestamp - startTime;
_this3.time = timestamp - _this3.startTime;
});
this.tick();
}
}, {
key: "tick",
value: function tick() {
var _this4 = this;
this.update();
this.render();
this.animationFrameId = requestAnimationFrame(function (timestamp) {
_this4.time = timestamp - _this4.startTime;
_this4.tick();
});
}
}, {
key: "update",
value: function update() {
var time = this.time * this.speed;
time = this.interval ? time % this.interval : time;
this.updateCallbacks.forEach(function (fn) {
fn(time);
});
}
}, {
key: "render",
value: function render() {
this.renderer.render(this.scene, this.camera);
}
}, {
key: "draw",
value: function draw() {
this.update();
this.render();
}
}, {
key: "stop",
value: function stop() {
cancelAnimationFrame(this.animationFrameId);
this.animationFrameId = null;
this.stopTime = this.time;
}
}, {
key: "reset",
value: function reset() {
this.stop();
this.stopTime = 0;
}
}, {
key: "toggle",
value: function toggle() {
this.animationFrameId ? this.stop() : this.start();
}
}, {
key: "addUpdateCallback",
value: function addUpdateCallback(callback) {
this.updateCallbacks.push(callback);
}
}, {
key: "addResizeCallback",
value: function addResizeCallback(callback) {
this.resizeCallbacks.push(callback);
}
}, {
key: "add",
value: function add(object, key) {
key && (this.objects[key] = object);
this.scene.add(object);
}
}, {
key: "addTo",
value: function addTo(object, parentKey, key) {
key && (this.objects[key] = object);
this.get(parentKey).add(object);
}
}, {
key: "get",
value: function get(key) {
return this.objects[key];
}
}, {
key: "remove",
value: function remove(o) {
var object;
if (typeof o === 'string') {
object = this.objects[o];
} else {
object = o;
}
if (object) {
object.parent.remove(object);
delete this.objects[o];
}
}
}, {
key: "resize",
value: function resize() {
this.container.style.width = '';
this.container.style.height = '';
if (this.aspect) {
this.aspect = this.container.clientWidth / this.container.clientHeight;
}
this.setSize();
this.camera.aspect = this.width / this.height;
this.camera.updateProjectionMatrix();
this.renderer.setSize(this.width, this.height);
this.resizeCallbacks.forEach(function (callback) {
callback();
});
}
}, {
key: "initPostProcessing",
value: function initPostProcessing(passes) {
var _this5 = this;
var size = this.renderer.getSize();
var pixelRatio = this.renderer.getPixelRatio();
size.width *= pixelRatio;
size.height *= pixelRatio;
var composer = this.composer = new THREE.EffectComposer(this.renderer, new THREE.WebGLRenderTarget(size.width, size.height, {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat,
stencilBuffer: false
}));
var renderPass = new THREE.RenderPass(this.scene, this.camera);
composer.addPass(renderPass);
for (var i = 0; i < passes.length; i++) {
var pass = passes[i];
pass.renderToScreen = i === passes.length - 1;
composer.addPass(pass);
}
this.renderer.autoClear = false;
this.render = function () {
_this5.renderer.clear();
composer.render();
};
this.addResizeCallback(function () {
composer.setSize(_this5.canvas.clientWidth * pixelRatio, _this5.canvas.clientHeight * pixelRatio);
});
}
}, {
key: "checkPointer",
value: function checkPointer(_ref2, meshs, handler, nohandler) {
var x = _ref2.x,
y = _ref2.y;
this.pointer.x = x / this.canvas.clientWidth * 2 - 1;
this.pointer.y = -(y / this.canvas.clientHeight) * 2 + 1;
this.raycaster.setFromCamera(this.pointer, this.camera);
var intersects = this.raycaster.intersectObjects(meshs);
if (intersects.length > 0) {
handler(intersects[0].object);
return true;
} else {
nohandler && nohandler();
return false;
}
}
}]);
return THREERoot;
}();
function $Moin$export$noop() {}
function $IDtB$var$_toConsumableArray(arr) {
return $IDtB$var$_arrayWithoutHoles(arr) || $IDtB$var$_iterableToArray(arr) || $IDtB$var$_nonIterableSpread();
}
function $IDtB$var$_nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}
function $IDtB$var$_iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}
function $IDtB$var$_arrayWithoutHoles(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
arr2[i] = arr[i];
}
return arr2;
}
}
function $IDtB$var$_typeof(obj) {
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
$IDtB$var$_typeof = function _typeof(obj) {
return typeof obj;
};
} else {
$IDtB$var$_typeof = function _typeof(obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
}
return $IDtB$var$_typeof(obj);
}
function $IDtB$var$_classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function $IDtB$var$_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);
}
}
function $IDtB$var$_createClass(Constructor, protoProps, staticProps) {
if (protoProps) $IDtB$var$_defineProperties(Constructor.prototype, protoProps);
if (staticProps) $IDtB$var$_defineProperties(Constructor, staticProps);
return Constructor;
}
var $IDtB$export$default =
/*#__PURE__*/
function () {
function Controller(options) {
$IDtB$var$_classCallCheck(this, Controller);
var closed = options.closed;
this.gui = new dat.GUI(options);
this.gui.closed = closed;
}
/**
* addData
*
* @param {Object} data
* @param {Object} [options={}]
* @param {function} [options.callback=noop]
* @param {function} [options.folder=gui]
* @memberof Controller
*/
$IDtB$var$_createClass(Controller, [{
key: "addData",
value: function addData(data) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var _options$folder = options.folder,
folder = _options$folder === void 0 ? this.gui : _options$folder,
_options$callback = options.callback,
callback = _options$callback === void 0 ? $Moin$export$noop : _options$callback,
isUniform = options.isUniform;
var dataKeys = Object.keys(data);
var datData = {};
dataKeys.forEach(function (key) {
datData[key] = data[key].value;
});
dataKeys.forEach(function (key) {
var _data$key = data[key],
isColor = _data$key.isColor,
value = _data$key.value,
range = _data$key.range,
onChange = _data$key.onChange,
listen = _data$key.listen;
var type;
if (isUniform) {
switch ($IDtB$var$_typeof(value)) {
case 'boolean':
type = '1i';
break;
case 'array':
type = value.length + 'f';
break;
case 'object':
type = 't';
break;
default:
type = '1f';
break;
}
}
var controller;
if (isColor) {
controller = folder.addColor(datData, key);
} else {
var guiRange = [];
if (range) {
guiRange = range;
} else if (key === 'frame') {
guiRange = [0, 1];
} else if (typeof value === 'number') {
if (value < 1 && value >= 0) {
guiRange = [0, 1];
} else {
var diff = Math.pow(10, String(Math.floor(value)).length - 1) * 2;
guiRange = [value - diff, value + diff];
}
}
controller = folder.add.apply(folder, [datData, key].concat($IDtB$var$_toConsumableArray(guiRange)));
}
onChange && controller.onChange(function (value) {
onChange(value);
});
listen && controller.listen();
callback(key, {
type: type,
value: value
});
});
return datData;
}
}, {
key: "addUniformData",
value: function addUniformData(data) {
var uniforms = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
return this.addData(data, {
callback: function callback(key, obj) {
uniforms[key] = obj;
},
folder: options.folder,
isUniform: true
});
}
}, {
key: "addFolder",
value: function addFolder(name, isClosed) {
var folder = this.gui.addFolder(name);
!isClosed && folder.open();
return folder;
}
}]);
return Controller;
}();
// ASSET: scripts/modules/easing.js
var $JJyr$exports = {};
/*!
* Terms of Use: Easing Functions (Equations)
*
* Open source under the MIT License and the 3-Clause BSD License.
* Copyright © 2001 Robert Penner
* http://robertpenner.com/easing_terms_of_use.html
*/
/**
* linear
*
* @param {number} t time: 現在時刻 (0 ~ duration)
* @param {number} b begin: 開始位置
* @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
* @param {number} d duration: 全体時間
* @returns {number} 現在位置
*/
function $JJyr$export$linear(t, b, c, d) {
return c * t / d + b;
}
/**
* easeInQuad
*
* @param {number} t time: 現在時刻 (0 ~ duration)
* @param {number} b begin: 開始位置
* @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
* @param {number} d duration: 全体時間
* @returns {number} 現在位置
*/
$JJyr$exports.linear = $JJyr$export$linear;
function $JJyr$export$easeInQuad(t, b, c, d) {
return c * (t /= d) * t + b;
}
/**
* easeOutQuad
*
* @param {number} t time: 現在時刻 (0 ~ duration)
* @param {number} b begin: 開始位置
* @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
* @param {number} d duration: 全体時間
* @returns {number} 現在位置
*/
$JJyr$exports.easeInQuad = $JJyr$export$easeInQuad;
function $JJyr$export$easeOutQuad(t, b, c, d) {
return -c * (t /= d) * (t - 2) + b;
}
/**
* easeInOutQuad
*
* @param {number} t time: 現在時刻 (0 ~ duration)
* @param {number} b begin: 開始位置
* @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
* @param {number} d duration: 全体時間
* @returns {number} 現在位置
*/
$JJyr$exports.easeOutQuad = $JJyr$export$easeOutQuad;
function $JJyr$export$easeInOutQuad(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * (--t * (t - 2) - 1) + b;
}
/**
* easeInCubic
*
* @param {number} t time: 現在時刻 (0 ~ duration)
* @param {number} b begin: 開始位置
* @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
* @param {number} d duration: 全体時間
* @returns {number} 現在位置
*/
$JJyr$exports.easeInOutQuad = $JJyr$export$easeInOutQuad;
function $JJyr$export$easeInCubic(t, b, c, d) {
return c * Math.pow(t / d, 3) + b;
}
/**
* easeOutCubic
*
* @param {number} t time: 現在時刻 (0 ~ duration)
* @param {number} b begin: 開始位置
* @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
* @param {number} d duration: 全体時間
* @returns {number} 現在位置
*/
$JJyr$exports.easeInCubic = $JJyr$export$easeInCubic;
function $JJyr$export$easeOutCubic(t, b, c, d) {
return c * (Math.pow(t / d - 1, 3) + 1) + b;
}
/**
* easeInOutCubic
*
* @param {number} t time: 現在時刻 (0 ~ duration)
* @param {number} b begin: 開始位置
* @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
* @param {number} d duration: 全体時間
* @returns {number} 現在位置
*/
$JJyr$exports.easeOutCubic = $JJyr$export$easeOutCubic;
function $JJyr$export$easeInOutCubic(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * Math.pow(t, 3) + b;
return c / 2 * (Math.pow(t - 2, 3) + 2) + b;
}
/**
* easeInQuart
*
* @param {number} t time: 現在時刻 (0 ~ duration)
* @param {number} b begin: 開始位置
* @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
* @param {number} d duration: 全体時間
* @returns {number} 現在位置
*/
$JJyr$exports.easeInOutCubic = $JJyr$export$easeInOutCubic;
function $JJyr$export$easeInQuart(t, b, c, d) {
return c * Math.pow(t / d, 4) + b;
}
/**
* easeOutQuart
*
* @param {number} t time: 現在時刻 (0 ~ duration)
* @param {number} b begin: 開始位置
* @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
* @param {number} d duration: 全体時間
* @returns {number} 現在位置
*/
$JJyr$exports.easeInQuart = $JJyr$export$easeInQuart;
function $JJyr$export$easeOutQuart(t, b, c, d) {
return -c * (Math.pow(t / d - 1, 4) - 1) + b;
}
/**
* easeInOutQuart
*
* @param {number} t time: 現在時刻 (0 ~ duration)
* @param {number} b begin: 開始位置
* @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
* @param {number} d duration: 全体時間
* @returns {number} 現在位置
*/
$JJyr$exports.easeOutQuart = $JJyr$export$easeOutQuart;
function $JJyr$export$easeInOutQuart(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * Math.pow(t, 4) + b;
return -c / 2 * (Math.pow(t - 2, 4) - 2) + b;
}
/**
* easeInQuint
*
* @param {number} t time: 現在時刻 (0 ~ duration)
* @param {number} b begin: 開始位置
* @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
* @param {number} d duration: 全体時間
* @returns {number} 現在位置
*/
$JJyr$exports.easeInOutQuart = $JJyr$export$easeInOutQuart;
function $JJyr$export$easeInQuint(t, b, c, d) {
return c * Math.pow(t / d, 5) + b;
}
/**
* easeOutQuint
*
* @param {number} t time: 現在時刻 (0 ~ duration)
* @param {number} b begin: 開始位置
* @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
* @param {number} d duration: 全体時間
* @returns {number} 現在位置
*/
$JJyr$exports.easeInQuint = $JJyr$export$easeInQuint;
function $JJyr$export$easeOutQuint(t, b, c, d) {
return c * (Math.pow(t / d - 1, 5) + 1) + b;
}
/**
* easeInOutQuint
*
* @param {number} t time: 現在時刻 (0 ~ duration)
* @param {number} b begin: 開始位置
* @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
* @param {number} d duration: 全体時間
* @returns {number} 現在位置
*/
$JJyr$exports.easeOutQuint = $JJyr$export$easeOutQuint;
function $JJyr$export$easeInOutQuint(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * Math.pow(t, 5) + b;
return c / 2 * (Math.pow(t - 2, 5) + 2) + b;
}
/**
* easeInSine
*
* @param {number} t time: 現在時刻 (0 ~ duration)
* @param {number} b begin: 開始位置
* @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
* @param {number} d duration: 全体時間
* @returns {number} 現在位置
*/
$JJyr$exports.easeInOutQuint = $JJyr$export$easeInOutQuint;
function $JJyr$export$easeInSine(t, b, c, d) {
return c * (1 - Math.cos(t / d * (Math.PI / 2))) + b;
}
/**
* easeOutSine
*
* @param {number} t time: 現在時刻 (0 ~ duration)
* @param {number} b begin: 開始位置
* @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
* @param {number} d duration: 全体時間
* @returns {number} 現在位置
*/
$JJyr$exports.easeInSine = $JJyr$export$easeInSine;
function $JJyr$export$easeOutSine(t, b, c, d) {
return c * Math.sin(t / d * (Math.PI / 2)) + b;
}
/**
* easeInOutSine
*
* @param {number} t time: 現在時刻 (0 ~ duration)
* @param {number} b begin: 開始位置
* @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
* @param {number} d duration: 全体時間
* @returns {number} 現在位置
*/
$JJyr$exports.easeOutSine = $JJyr$export$easeOutSine;
function $JJyr$export$easeInOutSine(t, b, c, d) {
return c / 2 * (1 - Math.cos(Math.PI * t / d)) + b;
}
/**
* easeInExpo
*
* @param {number} t time: 現在時刻 (0 ~ duration)
* @param {number} b begin: 開始位置
* @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
* @param {number} d duration: 全体時間
* @returns {number} 現在位置
*/
$JJyr$exports.easeInOutSine = $JJyr$export$easeInOutSine;
function $JJyr$export$easeInExpo(t, b, c, d) {
return c * Math.pow(2, 10 * (t / d - 1)) + b;
}
/**
* easeOutExpo
*
* @param {number} t time: 現在時刻 (0 ~ duration)
* @param {number} b begin: 開始位置
* @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
* @param {number} d duration: 全体時間
* @returns {number} 現在位置
*/
$JJyr$exports.easeInExpo = $JJyr$export$easeInExpo;
function $JJyr$export$easeOutExpo(t, b, c, d) {
return c * (-Math.pow(2, -10 * t / d) + 1) + b;
}
/**
* easeInOutExpo
*
* @param {number} t time: 現在時刻 (0 ~ duration)
* @param {number} b begin: 開始位置
* @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
* @param {number} d duration: 全体時間
* @returns {number} 現在位置
*/
$JJyr$exports.easeOutExpo = $JJyr$export$easeOutExpo;
function $JJyr$export$easeInOutExpo(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
}
/**
* easeInCirc
*
* @param {number} t time: 現在時刻 (0 ~ duration)
* @param {number} b begin: 開始位置
* @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
* @param {number} d duration: 全体時間
* @returns {number} 現在位置
*/
$JJyr$exports.easeInOutExpo = $JJyr$export$easeInOutExpo;
function $JJyr$export$easeInCirc(t, b, c, d) {
return c * (1 - Math.sqrt(1 - (t /= d) * t)) + b;
}
/**
* easeOutCirc
*
* @param {number} t time: 現在時刻 (0 ~ duration)
* @param {number} b begin: 開始位置
* @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
* @param {number} d duration: 全体時間
* @returns {number} 現在位置
*/
$JJyr$exports.easeInCirc = $JJyr$export$easeInCirc;
function $JJyr$export$easeOutCirc(t, b, c, d) {
return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
}
/**
* easeInOutCirc
*
* @param {number} t time: 現在時刻 (0 ~ duration)
* @param {number} b begin: 開始位置
* @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
* @param {number} d duration: 全体時間
* @returns {number} 現在位置
*/
$JJyr$exports.easeOutCirc = $JJyr$export$easeOutCirc;
function $JJyr$export$easeInOutCirc(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * (1 - Math.sqrt(1 - t * t)) + b;
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
}
$JJyr$exports.easeInOutCirc = $JJyr$export$easeInOutCirc;
var $JJyr$export$easingList = ['linear', 'easeInSine', 'easeOutSine', 'easeInOutSine', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint', 'easeInOutQuint', 'easeInExpo', 'easeOutExpo', 'easeInOutExpo', 'easeInCirc', 'easeOutCirc', 'easeInOutCirc'];
$JJyr$exports.easingList = $JJyr$export$easingList;
function $Zk$var$_classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function $Zk$var$_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);
}
}
function $Zk$var$_createClass(Constructor, protoProps, staticProps) {
if (protoProps) $Zk$var$_defineProperties(Constructor.prototype, protoProps);
if (staticProps) $Zk$var$_defineProperties(Constructor, staticProps);
return Constructor;
}
/**
* アニメーション関数
*
* @param {AnimationCallback} fn アニメーションフレーム毎に実行するコールバック
* @param {Object} [options={}] オプション
* @param {number} [options.begin=0] 開始位置
* @param {number} [options.finish=1] 終了位置
* @param {number} [options.duration=500] 全体時間
* @param {string} [options.easing='easeInOutCubic'] Easing function
*/
function $Zk$export$animate(fn) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var _options$begin = options.begin,
begin = _options$begin === void 0 ? 0 : _options$begin,
_options$finish = options.finish,
finish = _options$finish === void 0 ? 1 : _options$finish,
_options$duration = options.duration,
duration = _options$duration === void 0 ? 500 : _options$duration,
_options$easing = options.easing,
easing = _options$easing === void 0 ? 'easeInOutCubic' : _options$easing,
_options$isRoop = options.isRoop,
isRoop = _options$isRoop === void 0 ? false : _options$isRoop,
onAfter = options.onAfter;
var change = finish - begin;
var easingFunction = $JJyr$exports[easing];
var startTime;
function tick(timestamp) {
var time = Math.min(duration, timestamp - startTime);
var position = easingFunction(time, begin, change, duration);
fn(position, time);
if (time === duration) {
if (isRoop) {
startTime = timestamp;
requestAnimationFrame(tick);
} else {
onAfter && onAfter();
}
} else {
requestAnimationFrame(tick);
}
}
requestAnimationFrame(function (timestamp) {
startTime = timestamp;
tick(timestamp);
});
}
var $Zk$export$Animation =
/*#__PURE__*/
function () {
function Animation(fn, options) {
$Zk$var$_classCallCheck(this, Animation);
var _options$begin2 = options.begin,
begin = _options$begin2 === void 0 ? 0 : _options$begin2,
_options$finish2 = options.finish,
finish = _options$finish2 === void 0 ? 1 : _options$finish2,
_options$duration2 = options.duration,
duration = _options$duration2 === void 0 ? 500 : _options$duration2,
_options$easing2 = options.easing,
easing = _options$easing2 === void 0 ? 'easeInOutCubic' : _options$easing2,
_options$isRoop2 = options.isRoop,
isRoop = _options$isRoop2 === void 0 ? false : _options$isRoop2,
_options$isAuto = options.isAuto,
isAuto = _options$isAuto === void 0 ? true : _options$isAuto,
onBefore = options.onBefore,
onAfter = options.onAfter,
onStop = options.onStop;
this.fn = fn;
this.duration = duration;
this.easingFunction = $JJyr$exports[easing];
this.originalFrom = begin;
this.originalTo = finish;
this.isRoop = isRoop;
this.onBefore = onBefore;
this.onAfter = onAfter;
this.onStop = onStop;
isAuto && this.start();
}
$Zk$var$_createClass(Animation, [{
key: "tick",
value: function tick(timestamp) {
var time = Math.min(this.duration, timestamp - this.startTime);
var position = this.easingFunction(time, this.begin, this.change, this.duration);
this.fn(position, time);
if (time === this.duration) {
if (this.isRoop) {
this.animate();
} else {
this.onAfter && this.onAfter();
}
} else {
this.id = requestAnimationFrame(this.tick.bind(this));
}
}
}, {
key: "animate",
value: function animate() {
var _this = this;
this.id = requestAnimationFrame(function (timestamp) {
_this.startTime = timestamp;
_this.tick(timestamp);
});
}
}, {
key: "start",
value: function start() {
this.onBefore && this.onBefore();
this.begin = this.originalFrom;
this.finish = this.originalTo;
this.change = this.finish - this.begin;
this.id && this.stop();
this.animate();
}
}, {
key: "reverse",
value: function reverse() {
this.onBefore && this.onBefore();
this.begin = this.originalTo;
this.finish = this.originalFrom;
this.change = this.finish - this.begin;
this.id && this.stop();
this.animate();
}
}, {
key: "play",
value: function play() {
this.animate();
}
}, {
key: "stop",
value: function stop() {
cancelAnimationFrame(this.id);
this.id = null;
this.onStop && this.onStop();
}
}, {
key: "easing",
set: function set(easing) {
this.easingFunction = $JJyr$exports[easing];
}
}]);
return Animation;
}();
/**
* @typedef {function} AnimationCallback
* @param {number} position 現在位置
* @param {number} time 現在時刻 (0 ~ duration)
*/
var $mrfc$export$default = {};
// ASSET: shaders/shooting-star.vert
var $puli$exports = {};
$puli$exports = "precision highp float;\nprecision highp int;\n#define GLSLIFY 1\nattribute vec3 position;\nuniform mat4 modelViewMatrix;\nuniform mat4 projectionMatrix;\n\nattribute vec4 mouse;\nattribute vec2 aFront;\nattribute float random;\n\n// uniform float uProgress;\nuniform vec2 resolution;\nuniform float pixelRatio;\nuniform float timestamp;\n\nuniform float size;\nuniform float minSize;\n// uniform float delay;\nuniform float speed;\nuniform float far;\nuniform float spread;\nuniform float maxSpread;\nuniform float maxZ;\nuniform float maxDiff;\nuniform float diffPow;\n\nvarying float vProgress;\nvarying float vRandom;\nvarying float vDiff;\nvarying float vSpreadLength;\nvarying float vPositionZ;\n\nfloat cubicOut(float t) {\n float f = t - 1.0;\n return f * f * f + 1.0;\n}\n\n// #pragma glslify: cubicBezier = require(../../modules/cubicBezier.glsl)\n\nconst float PI = 3.1415926;\nconst float PI2 = PI * 2.;\n\nvec2 cartesianToPolar (vec2 p) {\n return vec2((atan(p.y, p.x) + PI) / PI2, length(p));\n}\n\nvec2 polarToCartesian (vec2 p) {\n float r = p.x * PI2 - PI;\n float l = p.y;\n return vec2(cos(r) * l, sin(r) * l);\n}\n\nvoid main () {\n // float progress = max(uProgress - random * delay, 0.);\n float progress = clamp((timestamp - mouse.z) * speed, 0., 1.);\n progress *= step(0., mouse.x);\n\n float startX = mouse.x - resolution.x / 2.;\n float startY = mouse.y - resolution.y / 2.;\n vec3 startPosition = vec3(startX, startY, random);\n\n float diff = clamp(mouse.w / maxDiff, 0., 1.);\n diff = pow(diff, diffPow);\n\n vec3 cPosition = position * 2. - 1.;\n\n float radian = cPosition.x * PI2 - PI;\n vec2 xySpread = vec2(cos(radian), sin(radian)) * spread * mix(1., maxSpread, diff) * cPosition.y;\n\n vec3 endPosition = startPosition;\n endPosition.xy += xySpread;\n endPosition.xy -= aFront * far * random;\n endPosition.z += cPosition.z * maxZ * (pixelRatio > 1. ? 1.2 : 1.);\n\n float positionProgress = cubicOut(progress * random);\n // float positionProgress = cubicBezier(.29, .16, .3, 1., progress);\n vec3 currentPosition = mix(startPosition, endPosition, positionProgress);\n\n vProgress = progress;\n vRandom = random;\n vDiff = diff;\n vSpreadLength = cPosition.y;\n vPositionZ = position.z;\n\n gl_Position = projectionMatrix * modelViewMatrix * vec4(currentPosition, 1.);\n gl_PointSize = max(currentPosition.z * size * diff * pixelRatio, minSize * (pixelRatio > 1. ? 1.3 : 1.));\n}\n";
// ASSET: shaders/shooting-star.frag
var $v3o$exports = {};
$v3o$exports = "precision highp float;\nprecision highp int;\n#define GLSLIFY 1\n\n// uniform float uProgress;\nuniform float fadeSpeed;\nuniform float shortRangeFadeSpeed;\nuniform float minFlashingSpeed;\nuniform float blur;\n\nvarying float vProgress;\nvarying float vRandom;\nvarying float vDiff;\nvarying float vSpreadLength;\nvarying float vPositionZ;\n\nhighp float random(vec2 co)\n{\n highp float a = 12.9898;\n highp float b = 78.233;\n highp float c = 43758.5453;\n highp float dt= dot(co.xy ,vec2(a,b));\n highp float sn= mod(dt,3.14);\n return fract(sin(sn) * c);\n}\n\nfloat quadraticIn(float t) {\n return t * t;\n}\n\n#ifndef HALF_PI\n#define HALF_PI 1.5707963267948966\n#endif\n\nfloat sineOut(float t) {\n return sin(t * HALF_PI);\n}\n\nconst vec3 baseColor = vec3(170., 133., 88.) / 255.;\n\nvoid main(){\n\tvec2 p = gl_PointCoord * 2. - 1.;\n\tfloat len = length(p);\n\n float cRandom = random(vec2(vProgress * mix(minFlashingSpeed, 1., vRandom)));\n cRandom = mix(0.3, 2., cRandom);\n\n float cBlur = blur * mix(1., 0.3, vPositionZ);\n\tfloat shape = smoothstep(1. - cBlur, 1. + cBlur, (1. - cBlur) / len);\n shape *= mix(0.5, 1., vRandom);\n\n if (shape == 0.) discard;\n\n float darkness = mix(0.1, 1., vPositionZ);\n\n float alphaProgress = vProgress * fadeSpeed * mix(2.5, 1., pow(vDiff, 0.6));\n alphaProgress *= mix(shortRangeFadeSpeed, 1., sineOut(vSpreadLength) * quadraticIn(vDiff));\n float alpha = 1. - min(alphaProgress, 1.);\n alpha *= cRandom * vDiff;\n\n\tgl_FragColor = vec4(baseColor * darkness * cRandom, shape * alpha);\n}\n";
function $a87C$var$_classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function $a87C$var$_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);
}
}
function $a87C$var$_createClass(Constructor, protoProps, staticProps) {
if (protoProps) $a87C$var$_defineProperties(Constructor.prototype, protoProps);
if (staticProps) $a87C$var$_defineProperties(Constructor, staticProps);
return Constructor;
}
var $a87C$var$PER_MOUSE = 800;
var $a87C$var$COUNT = $a87C$var$PER_MOUSE * 400;
var $a87C$var$MOUSE_ATTRIBUTE_COUNT = 4;
var $a87C$var$FRONT_ATTRIBUTE_COUNT = 2;
var $a87C$var$data = {
visible: {
value: true
}
};
var $a87C$var$uniformData = {
size: {
value: 0.05,
range: [0, 1]
},
minSize: {
value: 1,
range: [0, 5]
},
speed: {
value: 0.012,
range: [0, 0.05]
},
fadeSpeed: {
value: 1.1,
range: [1, 2]
},
shortRangeFadeSpeed: {
value: 1.3,
range: [1, 5]
},
minFlashingSpeed: {
value: 0.1,
range: [0, 1]
},
spread: {
value: 7,
range: [0, 20]
},
maxSpread: {
value: 5,
range: [1, 20]
},
maxZ: {
value: 100,
range: [0, 500]
},
blur: {
value: 1,
range: [0, 1]
},
far: {
value: 10,
range: [0, 100]
},
maxDiff: {
value: 100,
range: [0, 1000]
},
diffPow: {
value: 0.24,
range: [0, 10]
}
};
var $a87C$var$dataKeys = Object.keys($a87C$var$uniformData);
var $a87C$export$default =
/*#__PURE__*/
function () {
function ShootingStar() {
var _this = this;
$a87C$var$_classCallCheck(this, ShootingStar);
var root = $mrfc$export$default.root,
controller = $mrfc$export$default.controller;
this.root = root;
this.rate = 1;
this.setSize();
var folder = controller.addFolder('Shooting Star');
this.datData = controller.addData($a87C$var$data, {
folder: folder
});
var front = new THREE.Vector2();
var uniforms = {
resolution: {
value: $mrfc$export$default.resolution
},
pixelRatio: {
value: root.renderer.getPixelRatio()
},
timestamp: {
value: 0
}
};
this.datUniformData = controller.addUniformData($a87C$var$uniformData, uniforms, {
folder: folder
});
var geometry = this.geometry = new THREE.BufferGeometry();
var positions = [];
var mouse = [];
var aFront = [];
var random = [];
for (var i = 0; i < $a87C$var$COUNT; i++) {
positions.push(Math.random(), Math.random(), Math.random());
mouse.push(-1, -1, 0, 0);
aFront.push(front.x, front.y);
random.push(Math.random());
}
geometry.addAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
geometry.addAttribute('mouse', new THREE.Float32BufferAttribute(mouse, $a87C$var$MOUSE_ATTRIBUTE_COUNT));
geometry.addAttribute('aFront', new THREE.Float32BufferAttribute(aFront, $a87C$var$FRONT_ATTRIBUTE_COUNT));
geometry.addAttribute('random', new THREE.Float32BufferAttribute(random, 1));
var $puli$$interop$default = $parcel$interopDefault($puli$exports);
var $v3o$$interop$default = $parcel$interopDefault($v3o$exports);
var material = this.material = new THREE.RawShaderMaterial({
uniforms: uniforms,
vertexShader: $puli$$interop$default.d,
fragmentShader: $v3o$$interop$default.d,
transparent: true,
depthTest: false,
blending: THREE.AdditiveBlending
});
var mesh = this.mesh = new THREE.Points(geometry, material);
mesh.frustumCulled = false;
mesh.visible = this.datData.visible;
root.add(mesh); // root.initPostProcessing([
// new THREE.BloomPass(1.3, 25, 3.1, 256),
// new THREE.ShaderPass(THREE.CopyShader)
// ])
this.mouseI = 0;
this.lineCoordinateList = [];
this.enableSaveCoordinate = false;
root.addResizeCallback(function () {
_this.setSize();
material.uniforms['resolution'].value = $mrfc$export$default.resolution; // let scale
// if (store.ratio > store.initialRatio) {
// scale = store.clientHeight / store.initialClientHeight
// } else {
// scale = store.clientWidth / store.initialClientWidth
// }
// console.log(scale)
// mesh.scale.set(scale, scale, 1)
});
root.addUpdateCallback(function (timestamp) {
_this.update(timestamp);
});
}
$a87C$var$_createClass(ShootingStar, [{
key: "setSize",
value: function setSize() {
this.rate = Math.min($mrfc$export$default.ratio > $mrfc$export$default.initialRatio ? $mrfc$export$default.clientHeight / $mrfc$export$default.initialClientHeight : $mrfc$export$default.clientWidth / $mrfc$export$default.initialClientWidth, 1);
this.rate *= 1 / ($mrfc$export$default.clientHeight / $mrfc$export$default.initialClientHeight);
}
}, {
key: "update",
value: function update(timestamp) {
var _this2 = this;
this.timestamp = timestamp;
this.material.uniforms['timestamp'].value = timestamp;
this.mesh.visible = this.datData.visible;
$a87C$var$dataKeys.forEach(function (key) {
_this2.material.uniforms[key].value = _this2.datUniformData[key];
});
}
}, {
key: "draw",
value: function draw(_ref) {
var clientX = _ref.clientX,
clientY = _ref.clientY;
this.enableSaveCoordinate && this.lineCoordinateList.push({
clientX: clientX,
clientY: clientY
}); // const x = clientX + store.clientHalfWidth
// const y = store.clientHeight - (clientY + store.clientHalfHeight)
var x = clientX * this.rate + $mrfc$export$default.clientHalfWidth;
var y = $mrfc$export$default.clientHeight - (clientY * this.rate + $mrfc$export$default.clientHalfHeight);
var newPosition = new THREE.Vector2(x, y);
var diff = this.oldPosition ? newPosition.clone().sub(this.oldPosition) : new THREE.Vector2();
var length = diff.length();
var front = diff.clone().normalize();
for (var i = 0; i < $a87C$var$PER_MOUSE; i++) {
var ci = this.mouseI % ($a87C$var$COUNT * $a87C$var$MOUSE_ATTRIBUTE_COUNT) + i * $a87C$var$MOUSE_ATTRIBUTE_COUNT;
var position = this.oldPosition ? this.oldPosition.clone().add(diff.clone().multiplyScalar(i / $a87C$var$PER_MOUSE)) : newPosition;
this.geometry.attributes['mouse'].array[ci] = position.x;
this.geometry.attributes['mouse'].array[ci + 1] = position.y;
this.geometry.attributes['mouse'].array[ci + 2] = this.timestamp;
this.geometry.attributes['mouse'].array[ci + 3] = length;
this.geometry.attributes['aFront'].array[ci] = front.x;
this.geometry.attributes['aFront'].array[ci + 1] = front.y;
}
this.oldPosition = newPosition;
this.geometry.attributes['mouse'].needsUpdate = true;
this.geometry.attributes['aFront'].needsUpdate = true;
this.mouseI += $a87C$var$MOUSE_ATTRIBUTE_COUNT * $a87C$var$PER_MOUSE;
}
}, {
key: "start",
value: function start() {
var _this3 = this;
this.oldPosition = null;
window.addEventListener('pointermove', function (e) {
var clientX = e.clientX,
clientY = e.clientY;
_this3.draw({
clientX: clientX - $mrfc$export$default.clientHalfWidth,
clientY: clientY - $mrfc$export$default.clientHalfHeight
});
});
window.addEventListener('touchmove', function (e) {
var _e$touches$ = e.touches[0],
clientX = _e$touches$.clientX,
clientY = _e$touches$.clientY;
_this3.draw({
clientX: clientX - $mrfc$export$default.clientHalfWidth,
clientY: clientY - $mrfc$export$default.clientHalfHeight
});
});
}
}]);
return ShootingStar;
}();
function $vFOr$export$getTextCoordinate(option) {
var text = option.text,
fontSize = option.fontSize,
_option$letterSpacing = option.letterSpacing,
letterSpacing = _option$letterSpacing === void 0 ? 0 : _option$letterSpacing,
_option$font = option.font,
font = _option$font === void 0 ? 'Open sans' : _option$font,
_option$color = option.color,
color = _option$color === void 0 ? '#000000' : _option$color,
_option$width = option.width,
width = _option$width === void 0 ? fontSize * text.length + fontSize * letterSpacing * (text.length - 1) : _option$width,
_option$height = option.height,
height = _option$height === void 0 ? fontSize : _option$height,
_option$pixelRatio = option.pixelRatio,
pixelRatio = _option$pixelRatio === void 0 ? window.devicePixelRatio : _option$pixelRatio;
fontSize *= pixelRatio;
width *= pixelRatio;
height *= pixelRatio;
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
canvas.style.fontSize = fontSize + 'px';
canvas.style.letterSpacing = letterSpacing + 'em';
canvas.style.display = 'none';
document.body.appendChild(canvas); // letter-spacing を有効にするために必要
var ctx = canvas.getContext('2d');
ctx.font = "".concat(fontSize, "px ").concat(font);
ctx.fillStyle = color;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle'; // \n で改行して複数行にする
var textLines = text.split('\n');
textLines.forEach(function (text, i) {
var x = width / 2;
var y = height / 2 + fontSize * i - fontSize / 2 * (textLines.length - 1);
ctx.fillText(text, x, y);
});
return canvas;
}
// ASSET: shaders/general/three-raw-plain.vert
var $eAJ8$exports = {};
$eAJ8$exports = "precision highp float;\nprecision highp int;\n#define GLSLIFY 1\nattribute vec3 position;\nattribute vec2 uv;\nuniform mat4 modelViewMatrix;\nuniform mat4 projectionMatrix;\n\nvarying vec2 vUv;\n\nvoid main () {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.);\n}\n";
// ASSET: shaders/text.frag
var $UNYd$exports = {};
$UNYd$exports = "precision highp float;\nprecision highp int;\n#define GLSLIFY 1\n\nuniform sampler2D map;\nuniform float uProgress;\nuniform float uStartX;\nuniform float uRatio;\nuniform float alpha;\n\nvarying vec2 vUv;\n\nvoid main(){\n\tvec4 textureColor = texture2D(map, vUv);\n\tfloat angle = uRatio / 3.;\n\tfloat isShow = step(1., 1. - vUv.x + (uProgress / uStartX * 0.5 + 0.5) - abs(vUv.y - 0.5) / angle);\n\tgl_FragColor = vec4(textureColor.rgb, textureColor.a * alpha * isShow);\n\t// gl_FragColor = vec4(isShow);\n}\n";
function $m6Ky$var$_classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function $m6Ky$var$_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);
}
}
function $m6Ky$var$_createClass(Constructor, protoProps, staticProps) {
if (protoProps) $m6Ky$var$_defineProperties(Constructor.prototype, protoProps);
if (staticProps) $m6Ky$var$_defineProperties(Constructor, staticProps);
return Constructor;
}
var $m6Ky$var$TEXT = 'Shooting Star';
var $m6Ky$var$FONT_SIZE = 30;
var $m6Ky$var$FONT_SIZE_SP = 24;
var $m6Ky$var$FONT_SIZE_MIN = 20;
var $m6Ky$var$LETTER_SPACING = 0.18;
var $m6Ky$var$LETTER_SPACING_SP = 0.1;
var $m6Ky$var$FONT = 'Georgia, serif';
var $m6Ky$var$COLOR = '#fff';
var $m6Ky$var$data = {
visible: {
value: true
},
duration: {
value: 1080,
range: [0, 5000]
},
easing: {
value: 'easeOutQuint',
range: [$JJyr$export$easingList]
}
};
var $m6Ky$var$uniformData = {
alpha: {
value: 0.8,
range: [0, 1]
}
};
var $m6Ky$var$dataKeys = Object.keys($m6Ky$var$uniformData);
var $m6Ky$export$default =
/*#__PURE__*/
function () {
function Text() {
var _this = this;
$m6Ky$var$_classCallCheck(this, Text);
var root = $mrfc$export$default.root,
controller = $mrfc$export$default.controller;
var folder = this.folder = controller.addFolder('Text');
this.datData = controller.addData($m6Ky$var$data, {
folder: folder
});
var fontSize = $mrfc$export$default.clientWidth < 360 ? $m6Ky$var$FONT_SIZE_MIN : $mrfc$export$default.clientWidth < 768 ? $m6Ky$var$FONT_SIZE_SP : $m6Ky$var$FONT_SIZE;
var letterSpacing = $mrfc$export$default.clientWidth < 768 ? $m6Ky$var$LETTER_SPACING_SP : $m6Ky$var$LETTER_SPACING;
var textNormalWidth = $m6Ky$var$TEXT.length + letterSpacing * ($m6Ky$var$TEXT.length - 1);
var textWidth = fontSize * textNormalWidth;
var textHeight = fontSize * 1.2;
var pixelRatio = window.devicePixelRatio;
var textCanvas = $vFOr$export$getTextCoordinate({
text: $m6Ky$var$TEXT,
fontSize: fontSize,
height: textHeight,
letterSpacing: letterSpacing,
font: $m6Ky$var$FONT,
color: $m6Ky$var$COLOR,
pixelRatio: pixelRatio
});
var width = textCanvas.width / pixelRatio;
var height = textCanvas.height / pixelRatio;
var halfWidth = width / 2;
var texture = new THREE.Texture(textCanvas);
texture.needsUpdate = true;
texture.minFilter = THREE.LinearFilter;
var geometry = new THREE.PlaneBufferGeometry(width, height);
var uniforms = {
map: {
value: texture
},
uProgress: {
value: -$mrfc$export$default.clientHalfWidth
},
uStartX: {
value: $mrfc$export$default.clientHalfWidth - halfWidth
},
uRatio: {
value: width / height
}
};
this.datUniformData = controller.addUniformData($m6Ky$var$uniformData, uniforms, {
folder: folder
});
var $eAJ8$$interop$default = $parcel$interopDefault($eAJ8$exports);
var $UNYd$$interop$default = $parcel$interopDefault($UNYd$exports);
var material = this.material = new THREE.RawShaderMaterial({
uniforms: uniforms,
vertexShader: $eAJ8$$interop$default.d,
fragmentShader: $UNYd$$interop$default.d,
transparent: true
});
var mesh = this.mesh = new THREE.Mesh(geometry, material);
mesh.frustumCulled = false;
mesh.visible = this.datData.visible;
mesh.position.setZ(0.1);
root.add(mesh);
root.addUpdateCallback(function (timestamp) {
_this.mesh.visible = _this.datData.visible;
$m6Ky$var$dataKeys.forEach(function (key) {
_this.material.uniforms[key].value = _this.datUniformData[key];
});
});
}
$m6Ky$var$_createClass(Text, [{
key: "update",
value: function update(progress) {
this.material.uniforms['uProgress'].value = progress;
}
}]);
return Text;
}();
function $Focm$var$_classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function $Focm$var$_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);
}
}
function $Focm$var$_createClass(Constructor, protoProps, staticProps) {
if (protoProps) $Focm$var$_defineProperties(Constructor.prototype, protoProps);
if (staticProps) $Focm$var$_defineProperties(Constructor, staticProps);
return Constructor;
}
var $Focm$var$CAMERA_Z = 5000;
var $Focm$var$MAX_CAMERA_Z = 5000;
var $Focm$var$FIRST_DURATION = 1080;
var $Focm$var$DELAY = 300;
var $Focm$var$data = {
play: {
value: null
}
};
var $Focm$var$WebGL =
/*#__PURE__*/
function () {
function WebGL(_ref) {
var _this = this;
var canvas = _ref.canvas,
_ref$container = _ref.container,
container = _ref$container === void 0 ? document.body : _ref$container;
$Focm$var$_classCallCheck(this, WebGL);
var controller = new $IDtB$export$default({
closed: true
});
$mrfc$export$default.controller = controller;
var initialClientWidth = $mrfc$export$default.initialClientWidth = container.clientWidth;
var initialClientHeight = $mrfc$export$default.initialClientHeight = container.clientHeight; // store.initialRatio = container.clientWidth / container.clientHeight
$mrfc$export$default.initialRatio = 1;
var root = this.root = $mrfc$export$default.root = new $pTw7$export$default({
isDev: true,
container: container,
fov: Math.atan(initialClientHeight / 2 / $Focm$var$CAMERA_Z) * (180 / Math.PI) * 2,
zFar: $Focm$var$MAX_CAMERA_Z,
cameraPosition: [0, 0, $Focm$var$CAMERA_Z],
aspect: window.innerWidth / window.innerHeight,
canvas: canvas
});
this.setSize();
root.addResizeCallback(function () {
_this.setSize();
}); // this.background = new Background()
this.text = new $m6Ky$export$default();
this.shootingStar = new $a87C$export$default();
$Focm$var$data['play'].value = function () {
_this.textStart();
};
controller.addData($Focm$var$data, {
folder: this.text.folder
}); // root.initPostProcessing([
// new THREE.BloomPass(),
// new THREE.ShaderPass(THREE.CopyShader)
// ])
}
$Focm$var$_createClass(WebGL, [{
key: "setSize",
value: function setSize() {
var clientWidth = $mrfc$export$default.clientWidth = this.root.canvas.clientWidth;
var clientHeight = $mrfc$export$default.clientHeight = this.root.canvas.clientHeight;
$mrfc$export$default.clientHalfWidth = clientWidth / 2;
$mrfc$export$default.clientHalfHeight = clientHeight / 2;
$mrfc$export$default.resolution = new THREE.Vector2(clientWidth, clientHeight);
$mrfc$export$default.ratio = clientWidth / clientHeight;
}
}, {
key: "start",
value: function start() {
var _this2 = this;
var period = Math.PI * 3;
var amplitude = Math.min(Math.max($mrfc$export$default.clientWidth * 0.1, 100), 180);
$Zk$export$animate(function (progress) {
_this2.shootingStar.draw({
clientX: Math.cos(progress * period) * amplitude,
clientY: (progress * $mrfc$export$default.clientHeight - $mrfc$export$default.clientHalfHeight) * 1.3
});
}, {
duration: $Focm$var$FIRST_DURATION,
onAfter: function onAfter() {
_this2.shootingStar.draw({
clientX: -$mrfc$export$default.clientHalfWidth,
clientY: $mrfc$export$default.clientHeight - $mrfc$export$default.clientHalfHeight
});
_this2.shootingStar.draw({
clientX: -$mrfc$export$default.clientHalfWidth * 1.1,
clientY: 0
});
setTimeout(function () {
_this2.textStart();
}, 300);
}
});
}
}, {
key: "textStart",
value: function textStart() {
var _this3 = this;
$Zk$export$animate(function (progress) {
_this3.shootingStar.draw({
clientX: progress,
clientY: 0
});
_this3.text.update(progress - $mrfc$export$default.clientWidth * 0.08);
}, {
begin: -$mrfc$export$default.clientHalfWidth * 1.1,
finish: $mrfc$export$default.clientHalfWidth * 1.1,
duration: this.text.datData.duration,
easing: this.text.datData.easing,
onAfter: function onAfter() {
_this3.shootingStar.start();
document.body.classList.add('o-start');
}
});
}
}]);
return WebGL;
}();
var $Focm$var$webGL = new $Focm$var$WebGL({
canvas: document.getElementById('canvas')
});
setTimeout(function () {
$Focm$var$webGL.start();
}, $Focm$var$DELAY);
return {
"Focm": {}
};
});
External CSS
This Pen doesn't use any external CSS resources.