macaw-threejs/build/Image/index.js

Macaw Three.js is ready to use library to connect Three.js with your project.<br/> Under the hood is a fully optimized, clean Three.js set up to make it easy to implement effects for images (future text, etc.). With effects out of the box, you don't even

import{__awaiter as e}from"tslib";import*as t from"three";class s{constructor(e){const{element:t,core:s,id:i}=e;this._core=s,this.element=t,this._id=i}cleanUp(){this.element.removeEventListener("click",this._clickEvent.bind(this))}setPosition(e=!1){if(!this.mesh||!this.material)throw new Error("Unable to set position, mesh or material is undefined");const{width:t,height:s,top:i,left:r}=this.element.getBoundingClientRect();e&&(this.mesh.visible=!0),this.material.uniforms.u_scale.value=[Math.min(t*this.element.naturalHeight/(s*this.element.naturalWidth),1),1],this.mesh.scale.set(t,s,1);const{scroll:n,scene:o}=this._core;this.mesh.position.y=this._calculateMeshPositionY(n.currentScroll,o.dimensions.height,i,s),this.mesh.position.x=this._calculateMeshPositionX(r,t,o.dimensions.width),this.mesh.updateMatrix()}refreshMaterial(e={}){if(!this.mesh)throw new Error("Unable to refresh material, mesh is undefined");const{uniforms:s,fragmentShader:i,vertexShader:r}=this._core.controllers.shader.image.shader,n=new t.ShaderMaterial({uniforms:Object.assign(Object.assign({},e),s),fragmentShader:i,vertexShader:r}).clone();n.uniforms.u_image.value=this.texture,this.material=n,this.mesh.material instanceof Array?this.mesh.material.map((e=>e.dispose())):this.mesh.material.dispose(),this.mesh.material=n}setUniforms(){if(!this.material)throw new Error("Unable to set uniforms, material in undefined");this.material.uniforms.u_time.value=this._core.controllers.render.time,this._core.storage.effects.forEach((e=>{e.setImageUniforms&&e.setImageUniforms(this)}))}create(){return e(this,void 0,void 0,(function*(){const e=new t.PlaneBufferGeometry(1,1,10,10);this.texture=yield(new t.TextureLoader).loadAsync(this.element.src);const s=this._core.controllers.shader.image.baseMaterial.clone();s.uniforms.u_image.value=this.texture;const i=new t.Mesh(e,s);this.element.addEventListener("click",this._clickEvent.bind(this)),i.matrixAutoUpdate=!1,this.element.id=this.element.id||`threejs_img_${this._id}`,this.mesh=i,this.material=s,this._core.observer.instance.observe(this.element),this._core.scene.scene.add(i),this._core.storage.meshImages.set(this.element.id,this),this._core.controllers.general.setImagesPosition({}),this._core.controllers.render.manualRender()}))}_clickEvent(e){this._core.utils.vector2.setX(e.clientX/window.innerWidth*2-1),this._core.utils.vector2.setY(-e.clientY/window.innerHeight*2+1),this._core.scene.raycaster.setFromCamera(this._core.utils.vector2,this._core.scene.camera);const t=this._core.scene.raycaster.intersectObjects(this._core.scene.scene.children);this._core.storage.effects.forEach((e=>{new Promise((()=>{e.click&&e.click(this.element.id,t)}))}))}_calculateMeshPositionY(e,t,s,i){return-e-s+t/2-i/2}_calculateMeshPositionX(e,t,s){return e-s/2+t/2}}export{s as MacawImage};