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

A simple Babylonjs camera perspective preview tool.

!function(e,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("@babylonjs/core")):"function"==typeof define&&define.amd?define(["exports","@babylonjs/core"],i):i((e="undefined"!=typeof globalThis?globalThis:e||self).BabylonViewportGizmo={},e.BABYLON)}(this,(function(e,i){"use strict";const t=(e,t,a,n,s=.2)=>{const r=new i.DynamicTexture(`${a}Texture`,{width:256,height:256},e),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=i.MeshBuilder.CreatePlane(`${a}Sprite`,{width:s,height:s},e),l=new i.StandardMaterial(`${a}Material`,e);return l.diffuseTexture=r,l.emissiveColor=new i.Color3(.5,.5,.5),l.specularColor=new i.Color3(0,0,0),l.backFaceCulling=!1,h.material=l,h.position=n,h.billboardMode=i.AbstractMesh.BILLBOARDMODE_ALL,h};e.ViewportGizmo=class{constructor(e){this._clickHandler=null,this._mainCameraObserver=null,this._miniCameraObserver=null,this._canvas=this.createCanvas(),this._engine=new i.Engine(this._canvas,!0,{preserveDrawingBuffer:!0,stencil:!0}),this._scene=new i.Scene(this._engine),this._miniCamera=new i.ArcRotateCamera("miniCamera",-Math.PI/2,Math.PI/2.5,20,i.Vector3.Zero(),this._scene),this._miniCamera.attachControl(this._canvas,!0),this._miniCamera.upperRadiusLimit=12,this._miniCamera.lowerRadiusLimit=12,this._mainCamera=e,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(e){new i.HemisphericLight("miniLight",new i.Vector3(1,1,0),e)}createBox(e){i.MeshBuilder.CreateBox("box",{size:1.5},e)}createZSQ(e,a,n,s,r=.2){let o;const h=new i.TransformNode("directionGroup",e);h.position.y=1.5,i.MeshBuilder.CreateCylinder("sp",{diameterTop:.2,diameterBottom:.2,height:3},e).parent=h;const l=t(e,a,n,s,r);l.parent=h;const m=r-.5;if("X"===n){const n=new i.Vector3(-s.x-2.5,-s.y,-s.z);o=t(e,a,"",n,m),o.parent=h}else if("Y"===n){const n=new i.Vector3(-s.x,-s.y-2.5,-s.z);o=t(e,a,"",n,m),o.parent=h}else if("Z"===n){const n=new i.Vector3(-s.x,-s.y,-s.z-2.5);o=t(e,a,"",n,m),o.parent=h}return o&&o.material&&(o.material.alpha=.5),{node:h,plane:l,plane2:o}}createAxis(e){const{node:t,plane:a,plane2:n}=this.createZSQ(e,i.Color3.Red().toHexString(),"X",new i.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(e,i.Color3.Green().toHexString(),"Y",new i.Vector3(0,2.2,0),1.2),{node:h,plane:l,plane2:m}=this.createZSQ(e,i.Color3.Blue().toHexString(),"Z",new i.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(e,t){this._clickHandler=e=>{const a=t.pick(e.offsetX,e.offsetY);if(a.hit){const e=a.pickedMesh,t=this._mainCamera.position,n=this._mainCamera.target,s=i.Vector3.Distance(t,n);switch(e){case this.needClickMeshs.xPlane:this._mainCamera.setPosition(new i.Vector3(n.x+s,n.y,n.z)),this._mainCamera.setTarget(n);break;case this.needClickMeshs.yPlane:this._mainCamera.setPosition(new i.Vector3(n.x,n.y+s,n.z)),this._mainCamera.setTarget(n);break;case this.needClickMeshs.zPlane:this._mainCamera.setPosition(new i.Vector3(n.x,n.y,n.z+s)),this._mainCamera.setTarget(n);break;case this.needClickMeshs.xPlane2:this._mainCamera.setPosition(new i.Vector3(n.x-s,n.y,n.z)),this._mainCamera.setTarget(n);break;case this.needClickMeshs.yPlane2:this._mainCamera.setPosition(new i.Vector3(n.x,n.y-s,n.z)),this._mainCamera.setTarget(n);break;case this.needClickMeshs.zPlane2:this._mainCamera.setPosition(new i.Vector3(n.x,n.y,n.z-s)),this._mainCamera.setTarget(n)}}},e.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(e){const t=(e=>{let t=null;if(/^rgb/.test(e)){const a=e.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);t=i.Color3.FromInts(parseInt(a[1]),parseInt(a[2]),parseInt(a[3]))}else if(/^#/.test(e))t=i.Color3.FromHexString(e);else if(/^hsl/.test(e)){const a=/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/,n=e.match(a);t=((e,t,a)=>{t/=100,a/=100;const n=(1-Math.abs(2*a-1))*t,s=n*(1-Math.abs(e/60%2-1)),r=a-n/2;let o,h,l;return e>=0&&e<60?(o=n,h=s,l=0):e>=60&&e<120?(o=s,h=n,l=0):e>=120&&e<180?(o=0,h=n,l=s):e>=180&&e<240?(o=0,h=s,l=n):e>=240&&e<300?(o=s,h=0,l=n):(o=n,h=0,l=s),o+=r,h+=r,l+=r,new i.Color3(o,h,l)})(parseInt(n[1]),parseInt(n[2]),parseInt(n[3]))}return t})(e);t&&(this._scene.clearColor=new i.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.umd.js.map