feat: projection_type attr close #21

thometnanni · Feb 13, 2025 · ee5c964 · ee5c964
1 parent 9a637d5
commit ee5c964
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 40 deletions.
diff --git a/index.html b/index.html
@@ -6,23 +6,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vantage Renderer</title>
   </head>
-
+  
   <body>
     <section>
       <vantage-renderer
         scene="./media/scene.gltf"
-        controls="edit"
+        controls="edit" 
         first-person="false"
         style="pointer-events: auto"
       >
-        <!-- <vantage-projection id="projection-1" src="./media/map.png" orthographic="" position="0 500 0"
-      rotation="-1.5707963268 -1.5707963268 0" far="501"></vantage-projection> -->
+
         <vantage-projection
           id="projection-1"
           src="./media/aerial.jpg"
-          orthographic=""
-          position="0 500 0"
-          rotation="-1.5707963268 -1.5707963268 0"
+          projection_type="map"
           far="501"
         ></vantage-projection>
 
@@ -286,10 +283,6 @@ <h4>Project on:</h4>
     section {
       width: 100vw;
       height: 100vh;
-
-      /* display: grid;
-      grid-template-columns: 1fr 350px;
-      grid-template-rows: 1fr 64px; */
     }
 
     h1,

diff --git a/src/Projection.js b/src/Projection.js
@@ -51,7 +51,7 @@ export default class Projection {
     ratio = 16 / 9,
     far = 150,
     near = 1,
-    orthographic = false,
+    projection_type = 'perspective',
     textureSource,
     screen,
     attributes,
@@ -73,14 +73,20 @@ export default class Projection {
     // this.updateLayerMeshes()
 
     this.index = index
-
-    this.camera = orthographic
-      ? new OrthographicCamera(...(bounds ?? [100, -100, -100, 100]), 0, far)
-      : new PerspectiveCamera(fov, ratio, near, far)
-
-    this.position = position
-    this.rotation = rotation
-    // this.camera.rotation.reorder('YXZ')
+    this.projectionType = projection_type
+    if (this.projectionType === 'map') {
+      this.camera = new OrthographicCamera(...(bounds ?? [100, -100, -100, 100]), 0, far)
+      this.position = [0, 500, 0]
+      this.rotation = [-Math.PI / 2, -Math.PI / 2, 0, 'YXZ']
+    } else if (this.projectionType === 'orthographic') {
+      // to do
+      this.position = position
+      this.rotation = rotation
+    } else {
+      this.camera = new PerspectiveCamera(fov, ratio, near, far)
+      this.position = position
+      this.rotation = rotation
+    }
 
     this.renderTarget = new WebGLRenderTarget(2000, 2000)
     this.renderTarget.texture.format = RGBAFormat
@@ -131,7 +137,7 @@ export default class Projection {
   }
 
   set bounds({ bounds, auto }) {
-    if (!this.camera?.isOrthographicCamera || bounds == null) return
+    if (this.projectionType !== 'map' || bounds == null) return
     if (!auto) this.#bounds = bounds
     this.camera.left = bounds[0]
     this.camera.right = bounds[1]
@@ -269,23 +275,23 @@ export default class Projection {
   updatePlane = () => {
     if (this.plane == null) return
     this.plane.rotation.set(...this.camera.rotation)
-
-    const position = this.camera.isOrthographicCamera
-      ? [
-          (this.camera.top + this.camera.bottom) / 2,
-          this.camera.position.y,
-          (this.camera.right + this.camera.left) / 2
-        ]
-      : this.camera.position
-
-    this.plane.position.set(...position)
-    const scale = this.camera.isOrthographicCamera
+    
+    const position = this.projectionType === 'map'
+        ? [
+            (this.camera.top + this.camera.bottom) / 2,
+            this.camera.position.y,
+            (this.camera.right + this.camera.left) / 2
+          ]
+        : this.camera.position
+        
+        this.plane.position.set(...position)
+        const scale = this.projectionType === 'map'
       ? [this.camera.right - this.camera.left, this.camera.top - this.camera.bottom]
       : this.camera.getViewSize(this.camera.far, new Vector2())
+
+      this.plane.scale.set(...scale, 1)
 
-    this.plane.scale.set(...scale, 1)
-
-    this.plane.translateZ(-this.camera.far + this.camera.far * 0.001)
+      this.plane.translateZ(-this.camera.far + this.camera.far * 0.001)
   }
 
   update = () => {

diff --git a/src/main.js b/src/main.js
@@ -135,7 +135,7 @@ class VantageRenderer extends HTMLElement {
     let minDistance = Infinity
 
     Object.values(this.projections).forEach((p) => {
-      if (p.attributes && p.attributes.orthographic) return
+      if (p.attributes && p.attributes.projection_type == 'map') return
       const targetObj = p.plane || p.helper
       const intersects = raycaster.intersectObject(targetObj, true)
       if (intersects.length > 0 && intersects[0].distance < minDistance) {
@@ -287,7 +287,7 @@ class VantageRenderer extends HTMLElement {
       fov: attributes.fov,
       ratio: width / height,
       far: attributes.far,
-      orthographic: attributes.orthographic,
+      projection_type: attributes.projection_type,
       screen: attributes.screen,
       focus: attributes.focus,
       opacity: attributes.opacity,
@@ -350,7 +350,7 @@ class VantageProjection extends HTMLElement {
     'src',
     'position',
     'rotation',
-    'orthographic',
+    'projection_type',
     'fov',
     'far',
     'screen',
@@ -362,7 +362,7 @@ class VantageProjection extends HTMLElement {
   ]
   async attributeChangedCallback(name, oldValue, value) {
     if (this.projectionId == null) return
-    if (name === 'orthographic') {
+    if (name === 'projection_type') {
       this.destroy()
       this.create()
       return

diff --git a/src/utils.js b/src/utils.js
@@ -77,7 +77,9 @@ function parseAttribute(name, value) {
     case 'fov':
     case 'far':
       return +value
-    case 'orthographic':
+    case 'projection_type': {
+      return ['perspective', 'orthographic', 'map'].includes(value) ? value : 'perspective'
+    }
     case 'screen':
     case 'focus':
     case 'pass-through':