babylon-viewport-gizmo/dist/bundle.cjs.js

A simple Babylonjs camera perspective preview tool.

"use strict";var e=require("@babylonjs/core");const i=(i,t,a,n,s=.2)=>{const r=new e.DynamicTexture(`${a}Texture`,{width:256,height:256},i),o=r.getContext();o.fillStyle=t,o.fillRect(0,0,256,256),o.font="bold 200px Arial",o.fillStyle="white",o.textAlign="center",o.textBaseline="middle",o.fillText(a,128,128),r.update();const h=e.MeshBuilder.CreatePlane(`${a}Sprite`,{width:s,height:s},i),l=new e.StandardMaterial(`${a}Material`,i);return l.diffuseTexture=r,l.emissiveColor=new e.Color3(.5,.5,.5),l.specularColor=new e.Color3(0,0,0),l.backFaceCulling=!1,h.material=l,h.position=n,h.billboardMode=e.AbstractMesh.BILLBOARDMODE_ALL,h};exports.ViewportGizmo=class{constructor(i){this._clickHandler=null,this._mainCameraObserver=null,this._miniCameraObserver=null,this._canvas=this.createCanvas(),this._engine=new e.Engine(this._canvas,!0,{preserveDrawingBuffer:!0,stencil:!0}),this._scene=new e.Scene(this._engine),this._miniCamera=new e.ArcRotateCamera("miniCamera",-Math.PI/2,Math.PI/2.5,20,e.Vector3.Zero(),this._scene),this._miniCamera.attachControl(this._canvas,!0),this._miniCamera.upperRadiusLimit=12,this._miniCamera.lowerRadiusLimit=12,this._mainCamera=i,this.createHemisphericLight(this._scene),this.createBox(this._scene);const{xPlane:t,yPlane:a,zPlane:n,xPlane2:s,yPlane2:r,zPlane2:o}=this.createAxis(this._scene);this.needClickMeshs={xPlane:t,yPlane:a,zPlane:n,xPlane2:s,yPlane2:r,zPlane2:o},this.onResize(),this.mainToMini(),setTimeout((()=>{this.miniToMain()}),0),this.miniInteraction(this._canvas,this._scene),this.renderer()}createCanvas(){const e=document.createElement("canvas");return e.id="viewportGizmo",e.style.width="200px",e.style.height="200px",e.style.position="absolute",e.style.bottom="20px",e.style.right="20px",e.style.zIndex="9999",e.style.touchAction="none",e.style.borderRadius="100%",e.addEventListener("focus",(()=>{e.style.border="2px solid #ccc"})),e.addEventListener("blur",(()=>{e.style.border="2px solid transparent"})),document.body.appendChild(e),e}createHemisphericLight(i){new e.HemisphericLight("miniLight",new e.Vector3(1,1,0),i)}createBox(i){e.MeshBuilder.CreateBox("box",{size:1.5},i)}createZSQ(t,a,n,s,r=.2){let o;const h=new e.TransformNode("directionGroup",t);h.position.y=1.5,e.MeshBuilder.CreateCylinder("sp",{diameterTop:.2,diameterBottom:.2,height:3},t).parent=h;const l=i(t,a,n,s,r);l.parent=h;const m=r-.5;if("X"===n){const n=new e.Vector3(-s.x-2.5,-s.y,-s.z);o=i(t,a,"",n,m),o.parent=h}else if("Y"===n){const n=new e.Vector3(-s.x,-s.y-2.5,-s.z);o=i(t,a,"",n,m),o.parent=h}else if("Z"===n){const n=new e.Vector3(-s.x,-s.y,-s.z-2.5);o=i(t,a,"",n,m),o.parent=h}return o&&o.material&&(o.material.alpha=.5),{node:h,plane:l,plane2:o}}createAxis(i){const{node:t,plane:a,plane2:n}=this.createZSQ(i,e.Color3.Red().toHexString(),"X",new e.Vector3(2.2,0,0),1.2);t.position.x=1.5,t.position.y=0,t.rotation.z=Math.PI/2;const{node:s,plane:r,plane2:o}=this.createZSQ(i,e.Color3.Green().toHexString(),"Y",new e.Vector3(0,2.2,0),1.2),{node:h,plane:l,plane2:m}=this.createZSQ(i,e.Color3.Blue().toHexString(),"Z",new e.Vector3(0,0,2.2),1.2);return h.position.z=1.5,h.position.y=0,h.rotation.x=Math.PI/2,{xNode:t,yNode:s,zNode:h,xPlane:a,yPlane:r,zPlane:l,xPlane2:n,yPlane2:o,zPlane2:m}}mainToMini(){this.removeMainCameraListener(),this._mainCameraObserver=this._mainCamera.onViewMatrixChangedObservable.add((()=>{this._miniCamera.alpha=this._mainCamera.alpha,this._miniCamera.beta=this._mainCamera.beta}))}miniToMain(){this.removeMiniCameraListener(),this._miniCameraObserver=this._miniCamera.onViewMatrixChangedObservable.add((()=>{this._mainCamera.alpha=this._miniCamera.alpha,this._mainCamera.beta=this._miniCamera.beta}))}removeMainCameraListener(){this._mainCameraObserver&&this._mainCamera.onViewMatrixChangedObservable&&(this._mainCamera.onViewMatrixChangedObservable.remove(this._mainCameraObserver),this._mainCameraObserver=null)}removeMiniCameraListener(){this._miniCameraObserver&&this._miniCamera.onViewMatrixChangedObservable&&(this._miniCamera.onViewMatrixChangedObservable.remove(this._miniCameraObserver),this._miniCameraObserver=null)}miniInteraction(i,t){this._clickHandler=i=>{const a=t.pick(i.offsetX,i.offsetY);if(a.hit){const i=a.pickedMesh,t=this._mainCamera.position,n=this._mainCamera.target,s=e.Vector3.Distance(t,n);switch(i){case this.needClickMeshs.xPlane:this._mainCamera.setPosition(new e.Vector3(n.x+s,n.y,n.z)),this._mainCamera.setTarget(n);break;case this.needClickMeshs.yPlane:this._mainCamera.setPosition(new e.Vector3(n.x,n.y+s,n.z)),this._mainCamera.setTarget(n);break;case this.needClickMeshs.zPlane:this._mainCamera.setPosition(new e.Vector3(n.x,n.y,n.z+s)),this._mainCamera.setTarget(n);break;case this.needClickMeshs.xPlane2:this._mainCamera.setPosition(new e.Vector3(n.x-s,n.y,n.z)),this._mainCamera.setTarget(n);break;case this.needClickMeshs.yPlane2:this._mainCamera.setPosition(new e.Vector3(n.x,n.y-s,n.z)),this._mainCamera.setTarget(n);break;case this.needClickMeshs.zPlane2:this._mainCamera.setPosition(new e.Vector3(n.x,n.y,n.z-s)),this._mainCamera.setTarget(n)}}},i.addEventListener("click",this._clickHandler)}setCanvasPosition(e,i){this._canvas.style.left=`${e}px`,this._canvas.style.top=`${i}px`}setCanvasSize(e,i){this._canvas.style.width=`${e}px`,this._canvas.style.height=`${i}px`,this.onResize(),this._clickHandler&&this._canvas.removeEventListener("click",this._clickHandler),this.miniInteraction(this._canvas,this._scene)}setBackgroundColor(i){const t=(i=>{let t=null;if(/^rgb/.test(i)){const a=i.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);t=e.Color3.FromInts(parseInt(a[1]),parseInt(a[2]),parseInt(a[3]))}else if(/^#/.test(i))t=e.Color3.FromHexString(i);else if(/^hsl/.test(i)){const a=/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/,n=i.match(a);t=((i,t,a)=>{t/=100,a/=100;const n=(1-Math.abs(2*a-1))*t,s=n*(1-Math.abs(i/60%2-1)),r=a-n/2;let o,h,l;return i>=0&&i<60?(o=n,h=s,l=0):i>=60&&i<120?(o=s,h=n,l=0):i>=120&&i<180?(o=0,h=n,l=s):i>=180&&i<240?(o=0,h=s,l=n):i>=240&&i<300?(o=s,h=0,l=n):(o=n,h=0,l=s),o+=r,h+=r,l+=r,new e.Color3(o,h,l)})(parseInt(n[1]),parseInt(n[2]),parseInt(n[3]))}return t})(i);t&&(this._scene.clearColor=new e.Color4(t.r,t.g,t.b,1))}changeCamera(e){this.removeMainCameraListener(),this.removeMiniCameraListener(),this._mainCamera=e,this.mainToMini(),this.miniToMain(),this._miniCamera.alpha=e.alpha,this._miniCamera.beta=e.beta}onResize(){this._engine.resize()}renderer(){this._engine.runRenderLoop((()=>{this._scene.render()}))}dispose(){this.removeMainCameraListener(),this.removeMiniCameraListener(),this._clickHandler&&(this._canvas.removeEventListener("click",this._clickHandler),this._clickHandler=null),this._engine.dispose(),this._scene.dispose(),this._canvas.remove(),this._miniCamera.dispose()}};
//# sourceMappingURL=bundle.cjs.js.map