https://vanessaschuetze.de/assets/digitalerfolgreich-content-MO-PUIPQ.js

1import{g as n}from"./index-DjKJqAo0.js";import{B as w,s as L,P as f,C as S,M as b,a as z,D as I,V as T,b as M,R as C,T as R,S as P,c as y,d as q}from"./Scene-BvEewFMZ.js";import{D as j,G as F,a as E}from"./DRACOLoader-hyu5cJna.js";import"./Modal-C6NVOdx6.js";const _=`
2uniform float time;
3uniform vec2 hover;
4uniform float hoverState;
5varying float vNoise;
6varying vec2 vUv;
7
8void main() {
9  vec3 newposition = position;
10  float dist = distance(uv, hover);
11  newposition.y -= hoverState * sin(dist * 10. - time) - (1.5 * hoverState);
12
13  vNoise = hoverState * sin(dist * 10. - time);
14  vUv = uv;
15
16  gl_Position = projectionMatrix * modelViewMatrix * vec4(newposition, 1.0);
17}
18`,k=`
19uniform sampler2D uTexture;
20varying vec2 vUv;
21
22void main() {
23  gl_FragColor = texture2D(uTexture, vUv);
24}
25`,{HTMLElement:B,customElements:A}=window;class O extends w{constructor({contextElement:t,onLoad:i=null}){super({contextElement:t}),this.onLoad=i,this.renderer.physicallyCorrectLights=!0,this.renderer.outputEncoding=L,this.renderer.shadowMap.enabled=!0,this.renderer.shadowMap.encoding=f,this.render(),this.addSettings()}_renderCallback(t){var i,e,s;this.time+=.05,(s=(e=(i=this.material)==null?void 0:i.uniforms)==null?void 0:e.time)!=null&&s.value&&(this.material.uniforms.time.value=this.time)}addContextInformation(){this.dracoLoader=new j,this.dracoLoader.setDecoderPath("/draco/"),this.GLTFLoader=new F,this.GLTFLoader.setDRACOLoader(this.dracoLoader),this.cubeTextureLoader=new S}addSettings(){this.debugObject={envMapIntensity:2.5},this.gui=new E({width:400}),this.gui.add(this.directionalLight,"intensity").min(0).max(100).step(.001).name("lightIntensity"),this.gui.add(this.directionalLight.position,"x").min(-1e3).max(1e3).step(1).name("lightX"),this.gui.add(this.directionalLight.position,"y").min(-1e3).max(1e3).step(1).name("lightY"),this.gui.add(this.directionalLight.position,"z").min(-1e3).max(1e3).step(1).name("lightZ"),this.gui.add(this.camera.position,"x").min(-1e3).max(1e3).step(1).name("cameraX"),this.gui.add(this.camera.position,"y").min(-1e3).max(1e3).step(1).name("cameraY"),this.gui.add(this.camera.position,"z").min(-1e3).max(1e3).step(1).name("cameraZ"),this.gui.add(this.camera.rotation,"x").min(-1e3).max(1e3).step(.001).name("cameraRotationX"),this.gui.add(this.camera.rotation,"y").min(-1e3).max(1e3).step(.001).name("cameraRotationY"),this.gui.add(this.camera.rotation,"z").min(-1e3).max(1e3).step(.001).name("cameraRotationZ"),this.gui.add(this.debugObject,"envMapIntensity").min(0).max(10).step(.001).onChange(this.updateAllMaterials.bind(this))}updateAllMaterials(){this.scene.traverse(t=>{t instanceof b&&t.material instanceof z&&(t.material.envMapIntensity=this.debugObject.envMapIntensity,t.castShadow=!0,t.receiveShadow=!0)})}addObjects(){var e,s,a;const t={mobile:525,tablet:991,desktop:999999},i=Object.keys(t).find(o=>window.innerWidth<=t[o]);this.currScreen=i,this.sizes={model:{mobile:this.contextElement.offsetWidth,tablet:this.contextElement.offsetWidth,desktop:this.contextElement.offsetWidth}},this.positions={start:{directionalLight:{x:.25,y:3,z:-2.25},laptop:{x:0,y:75,z:-200,rotation:{x:Math.PI/10,y:0,z:0},mobile:{x:0,y:25,z:400}}},end:{directionalLight:{x:.25,y:3,z:-2.25,mobile:{z:-2,y:5}},laptop:{x:0,y:-50,z:400,rotation:{x:Math.PI/10,y:0,z:0},mobile:{x:0,y:5,z:510}}}},this.directionalLight=new I("#ffffff",3),this.directionalLight.castShadow=!0,this.directionalLight.shadow.camera.left=-500,this.directionalLight.shadow.camera.right=500,this.directionalLight.shadow.camera.top=500,this.directionalLight.shadow.camera.bottom=-500,this.directionalLight.shadow.camera.position.z=-500,this.directionalLight.shadow.camera.near=-500,this.directionalLight.shadow.camera.far=1e3,this.directionalLight.shadow.mapSize.set(1024,1024),this.directionalLight.shadow.normalBias=.05,this.directionalLight.position.set(((e=this.positions.start.directionalLight[i])==null?void 0:e.x)??this.positions.start.directionalLight.x,((s=this.positions.start.directionalLight[i])==null?void 0:s.y)??this.positions.start.directionalLight.y,((a=this.positions.start.directionalLight[i])==null?void 0:a.z)??this.positions.start.directionalLight.z),this.directionalLight.castShadow=!0,this.scene.add(this.directionalLight),this.GLTFLoader.load("/models/mbp-screen-vert

25ices-increased.glb",o=>{var h,d,c,l,p,u,m,g,v;const r=this.sizes.model[i];o.scene.scale.set(r,r,r),o.scene.position.set(((h=this.positions.start.laptop[i])==null?void 0:h.x)||this.positions.start.laptop.x,((d=this.positions.start.laptop[i])==null?void 0:d.y)||this.positions.start.laptop.y,((c=this.positions.start.laptop[i])==null?void 0:c.z)||this.positions.start.laptop.z),o.scene.rotation.set(((p=(l=this.positions.start.laptop[i])==null?void 0:l.rotation)==null?void 0:p.x)||this.positions.start.laptop.rotation.x,((m=(u=this.positions.start.laptop[i])==null?void 0:u.rotation)==null?void 0:m.y)||this.positions.start.laptop.rotation.y,((v=(g=this.positions.start.laptop[i])==null?void 0:g.rotation)==null?void 0:v.z)||this.positions.start.laptop.rotation.z),this.video=document.querySelector("laptop-wrapper video"),this.video.crossOrigin="anonymous",this.videoTexture=new T(this.video),this.videoTexture.encoding=L,this.video.load(),this.material=new M({map:this.videoTexture}),this.material.map.format=C,this.material.needsUpdate=!0,this.material.map.flipY=!1,this.topLide=o.scene.children[1],this.screen=o.scene.children[0],this.screen.material=this.material,this.screen.material.needsUpdate=!0,this.screen.visible=!1,this.scene.add(o.scene),this.model=o,this.startingCameraPosition=this.camera.position.clone(),this.openTopLideRotationXValue=this.topLide.rotation.x,this.topLide.rotation.x=1.575,this.gui.add(this.topLide.rotation,"x").min(-1e3).max(1e3).step(.001).name("laptopX"),this.gui.add(this.topLide.rotation,"y").min(-1e3).max(1e3).step(.001).name("laptopY"),this.gui.add(this.topLide.rotation,"z").min(-1e3).max(1e3).step(.001).name("laptopZ"),this.changeScreenImage(),this.openTopLide(),this.onLoad&&this.onLoad()})}changeScreenImage(){const t=new R().load("/images/mockup-umfassendes-workbook.png");t.flipY=!1,this.material=new P({uniforms:{uTexture:{value:t},hover:{value:new y(.5,.5)},hoverState:{value:1},time:{value:0}},flipY:!0,fragmentShader:k,vertexShader:_}),this.screen.material=this.material,this.pointer=new y,this.raycaster=new q}closeTopLide(){var i,e,s,a,o,r,h,d,c,l,p,u;this.video.pause(),n.to(this.topLide.rotation,{duration:1,ease:"power2.out",x:1.575,onComplete:()=>{this.video.pause()}}),n.to(this.model.scene.position,{duration:1,ease:"power2.out",z:((i=this.positions.start.laptop[this.currScreen])==null?void 0:i.z)??this.positions.start.laptop.z,y:((e=this.positions.start.laptop[this.currScreen])==null?void 0:e.y)??this.positions.start.laptop.y,x:((s=this.positions.start.laptop[this.currScreen])==null?void 0:s.x)??this.positions.start.laptop.x}),n.to(this.model.scene.rotation,{duration:1,ease:"power2.out",y:((o=(a=this.positions.start.laptop[this.currScreen])==null?void 0:a.rotation)==null?void 0:o.y)??this.positions.start.laptop.rotation.y,z:((h=(r=this.positions.start.laptop[this.currScreen])==null?void 0:r.rotation)==null?void 0:h.z)??this.positions.start.laptop.rotation.z,x:((c=(d=this.positions.start.laptop[this.currScreen])==null?void 0:d.rotation)==null?void 0:c.x)??this.positions.start.laptop.rotation.x}),n.to(this.directionalLight.position,{duration:1,ease:"power2.out",x:((l=this.positions.start.directionalLight[this.currScreen])==null?void 0:l.x)??this.positions.start.directionalLight.x,y:((p=this.positions.start.directionalLight[this.currScreen])==null?void 0:p.y)??this.positions.start.directionalLight.y,z:((u=this.positions.start.directionalLight[this.currScreen])==null?void 0:u.z)??this.positions.start.directionalLight.z}),n.to(this.screen.material.uniforms.hoverState,{duration:1,ease:"power2.out",value:1}),this.screen.visible=!1}openTopLide(){var i,e,s,a,o,r,h,d,c,l,p;const t=this.openTopLideRotationXValue;this.screenAnimationRunning=!1,setTimeout(()=>{this.screenAnimationRunning||(this.screen.visible=!0,this.screenAnimationRunning=!0,n.fromTo(this.screen.material.uniforms.hoverState,{duration:.5,ease:"power2.out",value:1},{duration:.5,ease:"power2.out",value:0,onComplete:()=>{this.screenAnimationRunning=!1}}))},750),n.to(this.topLide.rotation,{duration:1,ease:"power2.out",x:t}),n.to(this.model.scene.position,{duration:1,ease:"power2.out",z:((i=this.positions.end.laptop[this.currScreen])==null?void 0:i.z)??this.positions.end.laptop.z,y:((e=this.positions.end.laptop[this.currScreen])==null?void 0:e.y)??this.positions.end.laptop.y}),n.to(this.model.scene.rotation,{duration:1,ease:"power2.out",y:((a=(s=this.positions.end.laptop[this.currScreen])==null?void 0:s.rotation)==null?void 0:a.y)??this.positions.end.laptop.rotation.y,z:((r=(o=this.positions.end.laptop[this.currScreen])==null?void 0:o.rotation)==null?void 0:r.z)??this.positions.end.laptop.rotation.z,x:((d=(h=this.positions.end.laptop[this.currScreen])==null?void 0:h.rotation)==null?void 0:d.x)??this.positions.end.laptop.rotation.x}),n.to(this.directionalLight.position,{duration:1,ease:"power2.out",x:((c=this.positions.end.directionalLight[this.currScreen])==null?void 0:c.x)??this.positions.end.directionalLight.x,y:((l=this.positions.end.directionalLight[this.currScreen])==null?void 0:l.y)??this.positions.end.directionalLight.y,z:((p=this.positions.end.directionalLight[this.currScreen])==null?void 0:p.z)??this.positions.end.directionalLight.z})}}class X extends B{connectedCallback(){this.scene=new O({contextElement:this.querySelector(".js-sceneWrapper"),onLoad:()=>{this.loadingIndicator=this.querySelector(".js-loadingIndicator"),this.loadingIndicator&&this.loadingIndicator.remove()}}),this.controls=this.querySelector(".js-controls"),this.playControl

25=this.controls.querySelector(".js-playControl"),this.playIcon=this.controls.querySelector(".js-playIcon"),this.pauseIcon=this.controls.querySelector(".js-pauseIcon"),this.muteControl=this.controls.querySelector(".js-muteControl"),this.muteIcon=this.controls.querySelector(".js-muteIcon"),this.unmuteIcon=this.controls.querySelector(".js-unMuteIcon"),this.fullscreenControl=this.controls.querySelector(".js-fullscreenControl"),this.fullscreenIcon=this.controls.querySelector(".js-fullscreenIcon"),this.video=this.querySelector("video"),this.video.addEventListener("play",this._showHidePlayPauseButton.bind(this)),this.video.addEventListener("pause",this._showHidePlayPauseButton.bind(this)),this.playControl.addEventListener("click",this._togglePlay.bind(this)),this.muteControl.addEventListener("click",this._toggleMuted.bind(this)),this.fullscreenIcon.addEventListener("click",this._enterFullscreen.bind(this)),this.video.addEventListener("fullscreenchange",this._exitFullscreen.bind(this)),this.intersectionLimit=(window.innerWidth>768,.5),this.observer=new IntersectionObserver(i=>{i.forEach(e=>{e.isIntersecting&&e.intersectionRatio>this.intersectionLimit||e.target.getBoundingClientRect().top<=0?(this.scene&&this.scene.model&&this.scene.openTopLide(),this.open=!0,setTimeout(()=>{this.open&&this.controls.classList.contains("tw-hidden")&&n.fromTo(this.controls,{scale:0,opacity:0},{scale:1,opacity:1,duration:.5,ease:"power2.out"})},1e3)):(this.scene&&this.scene.model&&this.scene.closeTopLide(),this.open=!1)})},{threshold:t()});function t(){const i=[];for(let s=1;s<=20;s++){const a=s/20;i.push(a)}return i.push(0),i}this.observer.observe(this)}_showHidePlayPauseButton(){const t=this.video.paused;this.playIcon.classList.toggle("tw-hidden",!t),this.pauseIcon.classList.toggle("tw-hidden",t)}_exitFullscreen(){document.fullscreenElement||this.video.pause()}_enterFullscreen(){this.video.requestFullscreen?this.video.requestFullscreen():this.video.webkitRequestFullscreen?this.video.webkitRequestFullscreen():this.video.msRequestFullscreen&&this.video.msRequestFullscreen(),this.video.play()}_togglePlay(){const t=this.video.paused;this.video[t?"play":"pause"](),this._showHidePlayPauseButton()}_toggleMuted(){const t=this.video.muted;this.video.muted=!t,this.muteIcon.classList.toggle("tw-hidden",!t),this.unmuteIcon.classList.toggle("tw-hidden",t)}}A.define("preview-wrapper",X);