{"id":"H99C","dependencies":[{"name":"/Users/marco/codeProjects/tunnel/package.json","includedInParent":true,"mtime":1702561850976},{"name":"./styles.css","loc":{"line":2,"column":7,"index":24},"parent":"/Users/marco/codeProjects/tunnel/src/index.js","resolved":"/Users/marco/codeProjects/tunnel/src/styles.css"},{"name":"three","loc":{"line":5,"column":23,"index":88},"parent":"/Users/marco/codeProjects/tunnel/src/index.js","resolved":"/Users/marco/codeProjects/tunnel/node_modules/three/build/three.module.js"},{"name":"./shaders/vertex.glsl","loc":{"line":8,"column":19,"index":141},"parent":"/Users/marco/codeProjects/tunnel/src/index.js","resolved":"/Users/marco/codeProjects/tunnel/src/shaders/vertex.glsl"},{"name":"./shaders/fragment.glsl","loc":{"line":11,"column":21,"index":214},"parent":"/Users/marco/codeProjects/tunnel/src/index.js","resolved":"/Users/marco/codeProjects/tunnel/src/shaders/fragment.glsl"},{"name":"./blackoutright_30000x1500.png","loc":{"line":16,"column":17,"index":380},"parent":"/Users/marco/codeProjects/tunnel/src/index.js","resolved":"/Users/marco/codeProjects/tunnel/src/blackoutright_30000x1500.png"},{"name":"./full30000x1500.png","loc":{"line":17,"column":17,"index":431},"parent":"/Users/marco/codeProjects/tunnel/src/index.js","resolved":"/Users/marco/codeProjects/tunnel/src/full30000x1500.png"}],"generated":{"js":"\"use strict\";Object.defineProperty(exports,\"__esModule\",{value:!0}),exports.default=void 0,require(\"./styles.css\");var e=s(require(\"three\")),t=o(require(\"./shaders/vertex.glsl\")),r=o(require(\"./shaders/fragment.glsl\")),n=o(require(\"./blackoutright_30000x1500.png\")),i=o(require(\"./full30000x1500.png\"));function o(e){return e&&e.__esModule?e:{default:e}}function a(e){if(\"function\"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(a=function(e){return e?r:t})(e)}function s(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||\"object\"!=typeof e&&\"function\"!=typeof e)return{default:e};var r=a(t);if(r&&r.has(e))return r.get(e);var n={__proto__:null},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if(\"default\"!==o&&Object.prototype.hasOwnProperty.call(e,o)){var s=i?Object.getOwnPropertyDescriptor(e,o):null;s&&(s.get||s.set)?Object.defineProperty(n,o,s):n[o]=e[o]}return n.default=e,r&&r.set(e,n),n}function u(e){return(u=\"function\"==typeof Symbol&&\"symbol\"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&\"function\"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?\"symbol\":typeof e})(e)}function l(e,t){if(\"function\"!=typeof t&&null!==t)throw new TypeError(\"Super expression must either be null or a function\");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,\"prototype\",{writable:!1}),t&&c(e,t)}function c(e,t){return(c=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e})(e,t)}function h(e){var t=d();return function(){var r,n=m(e);if(t){var i=m(this).constructor;r=Reflect.construct(n,arguments,i)}else r=n.apply(this,arguments);return f(this,r)}}function f(e,t){if(t&&(\"object\"===u(t)||\"function\"==typeof t))return t;if(void 0!==t)throw new TypeError(\"Derived constructors may only return object or undefined\");return p(e)}function p(e){if(void 0===e)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return e}function d(){if(\"undefined\"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if(\"function\"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(e){return!1}}function m(e){return(m=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function y(e,t){if(!(e instanceof t))throw new TypeError(\"Cannot call a class as a function\")}function v(e,t){for(var r=0;r {\n texture.minFilter = THREE.NearestFilter;\n texture.magFilter = THREE.NearestFilter;\n });\n\n var texture2 = new THREE.TextureLoader().load(txt2, (texture) => {\n texture.minFilter = THREE.NearestFilter;\n texture.magFilter = THREE.NearestFilter;\n });\n\n this.shaderMaterial = new THREE.ShaderMaterial({\n side: THREE.DoubleSide,\n depthWrite: true,\n depthTest: true,\n transparent: true,\n // blending: THREE.NormalBlending,\n blending: THREE.NoBlending,\n uniforms: {\n time: { type: \"f\", value: 0 },\n uResolution: { type: \"v4\", value: new THREE.Vector4() },\n u_texture: { type: \"t\", value: texture1 },\n u_texture2: { type: \"t\", value: texture2 },\n distortionFactorX: { type: \"f\", value: 0 },\n distortionFactorY: { type: \"f\", value: 0 },\n repeatX: { type: \"f\", value: 12.0 },\n repeatY: { type: \"f\", value: 6.0 },\n aspectRatioCorrection: { type: \"f\", value: 15 },\n transparency1: { type: \"f\", value: 0 },\n transparency2: { type: \"f\", value: 0 }, // Set initial transparency for the second texture\n scale: { type: \"v2\", value: new THREE.Vector2(1.0, 1.0) },\n offset: { type: \"v2\", value: new THREE.Vector2(0.0, 0.0) },\n rotation: { type: \"f\", value: 0.0 },\n turbulence: { type: \"f\", value: 0.0 },\n colorOffset: { type: \"f\", value: 0.0 },\n brightness: { type: \"f\", value: 1.0 },\n waveSpeed: { type: \"f\", value: 0.0 },\n globalScale: { type: \"f\", value: 1.0 },\n twist: { type: \"f\", value: 1.0 },\n waveFrequency: { type: \"f\", value: 0.0 },\n depthFactor: { type: \"f\", value: 0.0 },\n glowIntensity: { type: \"f\", value: 0.0 },\n pulseSpeed: { type: \"f\", value: 0.0 },\n colorR: { type: \"f\", value: 1.0 },\n colorG: { type: \"f\", value: 1.0 },\n colorB: { type: \"f\", value: 1.0 },\n },\n vertexShader: vertex,\n fragmentShader: fragment,\n\n });\n\n\n\n class CustomSinCurve extends THREE.Curve {\n constructor(scale = 2) {\n super();\n this.scale = scale;\n }\n\n getPoint(t, optionalTarget = new THREE.Vector3()) {\n const tx = Math.cos(2 * Math.PI * t);\n const ty = Math.sin(2 * Math.PI * t);\n const tz = 0.1 * Math.sin(8 * Math.PI * t);\n return optionalTarget.set(tx, ty, tz).multiplyScalar(this.scale);\n }\n }\n\n // const splineData = [\n // [new THREE.Vector3(249.77046356468685, 932.2219407156813, -255.94041268503986),\n // new THREE.Vector3(184.2697143587856, 340.8431828885419, -137.50911515694105),\n // new THREE.Vector3(19.942904199485042, 228.58948494060985, 62.791664957972415),\n // new THREE.Vector3(129.44330187699228, 123.24717120015652, 180.72662546735586),\n // new THREE.Vector3(194.62366419209283, -50.957866448272654, 348.9131609506699),\n // new THREE.Vector3(233.83324329738002, -6.6805514372266215, 586.011268528852),\n // new THREE.Vector3(33.97204422946808, -11.55735269269492, 843.3100027995519),\n // new THREE.Vector3(122.26648943463792, -206.74514914968762, 925.883739846062),\n // new THREE.Vector3(386.39147370444016, -156.50797561120535, 1011.8913441984032),\n // new THREE.Vector3(711.7691000196912, -348.3088368387029, 1189.6414444065897)]\n // ];\n // const splineData = [\n // [new THREE.Vector3(473.11863126256065, 1148.7914983677936, -626.3088726774722),\n // new THREE.Vector3(245.61458415195102, 1116.9549354293442, -263.87118049677656),\n // new THREE.Vector3(245.61458415195102, 1116.9549354293442, -263.87118049677656),\n // new THREE.Vector3(245.61458415195102, 1116.9549354293442, -263.87118049677656),\n // new THREE.Vector3(204.61699075454024, 370.04031630467887, -68.48460037267392),\n // new THREE.Vector3(86.44131454502019, 269.45084890937585, 62.791664957972415),\n // new THREE.Vector3(72.15795829069751, 58.51161097159243, 171.57374030692884),\n // new THREE.Vector3(25.789881573044692, -33.22822178799524, 348.9131609506699),\n // new THREE.Vector3(136.00387125935322, -8.133815744630706, 585.6112333240656),\n // new THREE.Vector3(33.97204422946808, -11.55735269269492, 843.3100027995519),\n // new THREE.Vector3(125.44573300578595, -64.95811252917446, 1087.520327532037),\n // new THREE.Vector3(-229.4300492080865, -204.31919716633735, 1592.4021728239306),\n // new THREE.Vector3(-32.58894150524465, -427.4049046320883, 2072.332326149018),\n // new THREE.Vector3(508.9934515582963, -2499.952976214704, 5435.133591888159),\n // new THREE.Vector3(1759.943314976105, -3123.674630232325, 7714.175951240869)]\n // ]\n\n // const splineData = [[\n // new THREE.Vector3(473.11863126256065, 1148.7914983677936, -626.3088726774722),\n // new THREE.Vector3(23.51828362256837, 1128.368276997569, -619.9291758003139),\n // new THREE.Vector3(63.43602909903811, 1094.885204825893, -460.9975125081666),\n // new THREE.Vector3(296.1407291653776, 959.7356327576776, -503.15980942417),\n // new THREE.Vector3(410.4183885943379, -618.6838591644985, -229.9284358044308),\n // new THREE.Vector3(204.61699075454024, 370.04031630467887, -68.48460037267392),\n // new THREE.Vector3(86.44131454502019, 269.45084890937585, 62.791664957972415),\n // new THREE.Vector3(72.15795829069751, 58.51161097159243, 171.57374030692884),\n // new THREE.Vector3(25.789881573044692, -33.22822178799524, 348.9131609506699),\n // new THREE.Vector3(136.00387125935322, -8.133815744630706, 585.6112333240656),\n // new THREE.Vector3(33.97204422946808, -11.55735269269492, 843.3100027995519),\n // new THREE.Vector3(125.44573300578595, -64.95811252917446, 1087.520327532037),\n // new THREE.Vector3(-229.4300492080865, -204.31919716633735, 1592.4021728239306),\n // new THREE.Vector3(-32.58894150524465, -427.4049046320883, 2072.332326149018),\n // new THREE.Vector3(508.9934515582963, -2499.952976214704, 5435.133591888159),\n // new THREE.Vector3(1759.943314976105, -3123.674630232325, 7714.175951240869)]\n // ]\n\n\n const splineData = [[\n new THREE.Vector3(473.11863126256065, 1148.7914983677936, -626.3088726774722),\n new THREE.Vector3(119.89018791921463, 1106.433693900733, -832.5766659881987),\n new THREE.Vector3(117.90596454302678, 1033.555957750614, -612.8498670255568),\n new THREE.Vector3(182.54143644281098, 825.3080107623409, -480.6932058171036),\n new THREE.Vector3(118.67378490442167, 396.4887161528761, -380.5280111161988),\n new THREE.Vector3(280.3702856718703, 292.9366974262628, -76.78175980638068),\n new THREE.Vector3(86.44131454502019, 269.45084890937585, 62.791664957972415),\n new THREE.Vector3(72.15795829069751, 58.51161097159243, 171.57374030692884),\n new THREE.Vector3(-18.631970330989734, -12.469964424808147, 353.11898079093527),\n new THREE.Vector3(136.00387125935322, -8.133815744630706, 585.6112333240656),\n new THREE.Vector3(7.613134434090028, 114.78833598781391, 843.3100027995519),\n new THREE.Vector3(125.44573300578595, -64.95811252917446, 1087.520327532037),\n new THREE.Vector3(-136.7078013160953, -165.54943689384953, 1375.894502480654),\n new THREE.Vector3(350.7398762821747, -364.1460096594824, 2008.9271623961001),\n new THREE.Vector3(684.0517345033015, -496.61732486128324, 2253.715989472005),\n new THREE.Vector3(1759.943314976105, -3123.674630232325, 7714.175951240869)]]\n\n\n class CustomSplineCurve extends THREE.CatmullRomCurve3 {\n constructor(points) {\n // super(points, false, 'catmullrom', 0.9); // Set the type to 'catmullrom' with tension 0.1\n super(points, false, 'chordal'); // Set the type to 'chordal'\n // super(points, false, 'centripetal'); // Set the type to 'centripetal'\n\n }\n }\n\n // // Convert splineData to THREE.Vector3 array\n // const splinePoints = splineData[0];\n // const path = new CustomSplineCurve(splinePoints);\n\n\n\n const scaleFactor = .1; // Adjust as needed\n\n // Apply scaling to the spline points\n const scaledSplinePoints = splineData[0].map(point =>\n new THREE.Vector3(point.x * scaleFactor, point.y * scaleFactor, point.z * scaleFactor)\n );\n\n // Create a new spline curve with scaled points\n const path = new CustomSplineCurve(scaledSplinePoints);\n\n // Create a new spline curve\n // this.geometry = new THREE.TubeGeometry(path, splinePoints.length * 100, 0.5, 20, false);\n this.geometry = new THREE.TubeGeometry(path, scaledSplinePoints.length * 100, 0.5, 20, false);\n\n\n\n // const path = new CustomSinCurve(10);\n // this.geometry = new THREE.TubeGeometry(path, 200, 0.5, 20, false);\n this.mesh = new THREE.Mesh(this.geometry, this.shaderMaterial);\n this.scene.add(this.mesh);\n\n window.shaderUniforms = this.shaderMaterial.uniforms;\n\n // const defaultValues = {\n // distortionFactorX: 0.0,\n // distortionFactorY: 0.0,\n // repeatX: 12.0,\n // repeatY: 6.0,\n // aspectRatioCorrection: 10.0,\n // transparency1: 0.0, // Set initial transparency for the first texture\n // transparency2: 1.0, // Set initial transparency for the second texture\n // scale: new THREE.Vector2(1.0, 1.0),\n // offset: new THREE.Vector2(0.0, 0.0),\n // rotation: 0.0,\n // turbulence: 0.0,\n // colorOffset: 0.0,\n // brightness: 1.0,\n // waveFrequency: 1.0,\n // depthFactor: 0.0,\n // glowIntensity: 0.0,\n // pulseSpeed: 1.0,\n // colorR: 1.0,\n // colorG: 1.0,\n // colorB: 1.0,\n // };\n\n // Object.keys(defaultValues).forEach((key) => {\n // window[key] = shaderUniforms[key].value = defaultValues[key];\n // });\n\n }\n\n replaceTxt1() {\n setTimeout(() => {\n console.log('texture 1 replaced')\n var texture = new THREE.TextureLoader().load(txt2, (texture) => {\n texture.minFilter = THREE.NearestFilter;\n texture.magFilter = THREE.NearestFilter;\n });\n this.shaderMaterial.uniforms.u_texture.value = texture;\n }, 20000);\n\n }\n\n setOpacityLayer1(opacity, timeout) {\n setTimeout(() => {\n this.shaderMaterial.uniforms.transparency1.value = opacity;\n }, timeout);\n\n }\n\n setOpacityLayer2(opacity, timeout) {\n setTimeout(() => {\n this.shaderMaterial.uniforms.transparency2.value = opacity;\n }, timeout);\n\n }\n\n // -=-==-=-=-=-=-=-=-=-=-=-=-=-=--=\n\n Particle(scene, burst) {\n var radius = Math.random() * 0.003 + 0.0003;\n var geom = cell.geometry;\n var range = 10;\n var offset = burst ? 200 : 350;\n var saturate = Math.floor(Math.random() * 20 + 65);\n var light = burst ? 20 : 56;\n this.color = new THREE.Color(\"hsl(\" + (Math.random() * range + offset) + \",\" + saturate + \"%,\" + light + \"%)\");\n var mat = new THREE.MeshPhongMaterial({\n color: this.color,\n // shading: THREE.FlatShading\n });\n this.mesh = new THREE.Mesh(geom, mat);\n this.mesh.scale.set(radius, radius, radius);\n this.mesh.scale.x += (Math.random() - 0.5) * 0.001;\n this.mesh.scale.y += (Math.random() - 0.5) * 0.001;\n this.mesh.scale.z += (Math.random() - 0.5) * 0.001;\n this.mesh.position.set(0, 0, 1.5);\n this.percent = burst ? 0.2 : Math.random();\n this.burst = burst ? true : false;\n this.offset = new THREE.Vector3((Math.random() - 0.5) * 0.025, (Math.random() - 0.5) * 0.025, 0);\n this.speed = Math.random() * 0.004 + 0.0002;\n if (this.burst) {\n this.speed += 0.003;\n this.mesh.scale.x *= 1.4;\n this.mesh.scale.y *= 1.4;\n this.mesh.scale.z *= 1.4;\n }\n this.rotate = new THREE.Vector3(-Math.random() * 0.1 + 0.01, 0, Math.random() * 0.01);\n\n this.pos = new THREE.Vector3(0, 0, 0);\n };\n\n // =--=-==-=--=-=-=-=-=-=-==--=-==--=-=\n\n render() {\n this.time = timer;\n let looptime = 10 * 1000;\n let t = (this.time % looptime) / looptime;\n let pos = this.geometry.parameters.path.getPointAt(t);\n let segments = this.geometry.tangents.length;\n let pickt = t * segments;\n let pick = Math.floor(pickt);\n let pickNext = (pick + 1) % segments;\n this.binormal.subVectors(this.geometry.binormals[pickNext], this.geometry.binormals[pick]);\n this.binormal.multiplyScalar(pickt - pick).add(this.geometry.binormals[pick]);\n let dir = this.geometry.parameters.path.getTangentAt(t);\n let offset = 0;\n this.normal.copy(this.binormal).cross(dir);\n pos.add(this.normal.clone().multiplyScalar(offset));\n this.camera.position.copy(pos);\n let lookAt = this.geometry.parameters.path.getPointAt((t + 1 / this.geometry.parameters.path.getLength()) % 1);\n this.camera.matrix.lookAt(this.camera.position, lookAt, this.normal);\n this.camera.rotation.setFromRotationMatrix(this.camera.matrix, this.camera.rotation.order);\n this.shaderMaterial.uniforms.time.value = this.clock.getElapsedTime();\n requestAnimationFrame(this.render.bind(this));\n this.renderer.render(this.scene, this.camera);\n }\n\n resize() {\n this.width = this.container.offsetWidth;\n this.height = this.container.offsetHeight;\n this.renderer.setSize(this.width, this.height);\n this.camera.aspect = this.width / this.height;\n this.camera.updateProjectionMatrix();\n }\n\n setUpResize() {\n window.addEventListener(\"resize\", this.resize.bind(this));\n }\n}\n\nnew Sketch({\n domElement: document.getElementById(\"container\"),\n});\n\nwindow.speed = 1;\n\nfunction render() {\n requestAnimationFrame(() => {\n timer += window.speed;\n render();\n });\n}\n\nrender();"},"lineCount":null}},"error":null,"hash":"1e1472d4c9e1ff61cbb8ef2bdba8853d","cacheData":{"env":{}}}