https://somneesleep.com/cdn/shop/t/80/assets/component.three-js-model.js?v=7664951510021467701758043378

1import{createContext,provide}from"component-register";import html from"solid-js/html";import{onCleanup,onMount,splitProps,mergeProps}from"solid-js";import{customShadowlessElement}from"@brytdesigns/web-component-core/utils";import*as THREE from"https://cdn.jsdelivr.net/npm/[email protected]/+esm";import{GLTFLoader}from"https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/GLTFLoader.js/+esm";function initializeSceneContext(props){const[_internal,_state]=splitProps(props,["root"]),scene=new THREE.Scene,camera=new THREE.PerspectiveCamera(40,_internal.root.clientWidth/_internal.root.clientHeight,1,1e3);return camera.position.z=1,{scene,camera}}const SceneContext=createContext(initializeSceneContext),ThreeScene=(props,{element})=>{element.style.display="block";const contextState=mergeProps(props,{root:element});let canvas;const{scene,camera}=provide(SceneContext,contextState,element);return onMount(()=>{const raycaster=new THREE.Raycaster,mouse=new THREE.Vector2,plane=new THREE.Plane(new THREE.Vector3(0,0,1),0),intersection=new THREE.Vector3,spotLightPlane=new THREE.Mesh(new THREE.PlaneGeometry(100,100),new THREE.MeshBasicMaterial({color:255,visible:!1}));scene.add(spotLightPlane);let modelGroup=new THREE.Group,model=null;window.addEventListener("resize",()=>{camera.aspect=element.clientWidth/element.clientHeight,camera.updateProjectionMatrix(),renderer.setSize(element.clientWidth,element.clientHeight)}),canvas.closest("section").addEventListener("mousemove",event=>{const rect=renderer.domElement.getBoundingClientRect(),x=(event.clientX-rect.left)/rect.width,y=(event.clientY-rect.top)/rect.height;mouse.x=(x-.5)*2,mouse.y=(y-.5)*2,raycaster.setFromCamera(mouse,camera)});const renderer=new THREE.WebGLRenderer({canvas,alpha:!0});renderer.setSize(element.clientWidth,element.clientHeight),renderer.setClearColor(0,0),renderer.setPixelRatio(window.devicePixelRatio),camera.aspect=element.clientWidth/element.clientHeight,camera.updateProjectionMatrix(),camera.position.z=2;const pointLight=new THREE.PointLight(16777215,4,0);pointLight.position.set(0,1,1),scene.add(pointLight),new GLTFLoader().load(props.model,gltf=>{model=gltf.scene;const box=new THREE.Box3().setFromObject(model),size=box.getSize(new THREE.Vector3),center=box.getCenter(new THREE.Vector3),maxAxis=Math.max(size.x,size.y,size.z);model.scale.multiplyScalar(1.25/maxAxis),model.rotation.x=300.25,model.rotation.y=-600.5,model.rotation.z=600,model.updateMatrixWorld(!0),model.position.sub(center);const pivot=new THREE.Group;pivot.add(model),modelGroup.add(pivot),scene.add(modelGroup);const center2=new THREE.Box3().setFromObject(pivot).getCenter(new THREE.Vector3);pivot.position.sub(center2)},void 0,error=>{console.error("Error loading model:",error)});function animate(){if(requestAnimationFrame(animate),model){raycaster.setFromCamera(mouse,camera),raycaster.ray.intersectPlane(plane,intersection);const maxTilt=.05,targetY=intersection.x*.1,targetX=intersection.y*.1,targetZ=(intersection.x-intersection.y)*.05;modelGroup.rotation.y+=(targetY-modelGroup.rotation.y)*.1,modelGroup.rotation.x+=(targetX-modelGroup.rotation.x)*.1,modelGroup.rotation.z+=(targetZ-modelGroup.rotation.z)*.1}renderer.render(scene,camera)}animate(),onCleanup(()=>{renderer.dispose()})}),html` <canvas style="width: 100%; height: 100%;" ref=${el=>canvas=el}></canvas> `};customShadowlessElement("three-scene",{model:""},ThreeScene);
2//# sourceMappingURL=/cdn/shop/t/80/assets/component.three-js-model.js.map?v=7664951510021467701758043378