apply scale for XR view

Signed-off-by: Yuji Ito <llamerada.jp@gmail.com>

api/three/object.go

@@ -25,6 +25,7 @@ const (
 
 	ScaleDefault   = "default"
 	ScaleLandscape = "landscape"
+	ScaleXR        = "xr"
 
 	// constant values for three.js
 	// see: https://github.com/mrdoob/three.js/blob/master/src/constants.js

cmd/app/fox/main.go

@@ -74,6 +74,11 @@ func (f *fox) initObject() error {
 								Y: 100,
 								Z: 1,
 							},
+							threeAPI.ScaleXR: {
+								X: 1.0 / 3,
+								Y: 1.0,
+								Z: 1,
+							},
 						},
 					},
 					Material: "matFox",

src/ui/map.ts

@@ -148,7 +148,7 @@ class OinariOverlayView extends ThreeJSOverlayView {
     for (const [uuid, obj] of this.applyingObjects) {
       let wrapper = this.objects.get(uuid);
       if (wrapper === undefined) {
-        wrapper = new V.ObjectWrapper();
+        wrapper = new V.ObjectWrapper(V.ScaleModeLandScape);
         this.objects.set(uuid, wrapper);
         this.scene.add(wrapper);
       }

src/ui/view.ts

@@ -51,11 +51,13 @@ interface PartSpec {
 }
 
 interface PartBaseSpec {
-  scale: {
-    default: Vec3;
-    portrait: Vec3;
-    landscape: Vec3;
-  };
+  scale: Scale;
+}
+
+interface Scale {
+  default: Vec3;
+  xr: Vec3;
+  landscape: Vec3;
 }
 
 interface SpriteSpec extends PartBaseSpec {
@@ -115,20 +117,26 @@ interface TextureEntry {
   url: string
 }
 
+export const ScaleModeLandScape = "landscape";
+export const ScaleModeXR = "xr";
+export type ScaleMode = typeof ScaleModeLandScape | typeof ScaleModeXR;
+
 export class ObjectWrapper extends THREE.Group {
   sprites: Map<string, THREE.Sprite>;
   materials: Map<string, THREE.Material>;
   textures: Map<string, TextureEntry>;
   objPosition: Vec3;
   position!: THREE.Vector3;
+  scaleMode: ScaleMode;
 
-  constructor() {
+  constructor(scaleMode: ScaleMode) {
     super();
 
     this.sprites = new Map<string, THREE.Sprite>();
     this.materials = new Map<string, THREE.Material>();
     this.textures = new Map<string, TextureEntry>();
     this.objPosition = { x: 0, y: 0, z: 0 } as Vec3;
+    this.scaleMode = scaleMode;
   }
 
   applyObject(obj: Object): void {
@@ -190,10 +198,7 @@ export class ObjectWrapper extends THREE.Group {
     }
 
     if (part.sprite.scale !== undefined) {
-      let scale = part.sprite.scale.landscape;
-      if (!scale) {
-        scale = part.sprite.scale.default;
-      }
+      let scale = this.selectScale(part.sprite.scale);
       if (scale && scale.x !== 0 && scale.y !== 0 && scale.z !== 0) {
         sprite.scale.set(scale.x, scale.y, scale.z);
       }
@@ -304,4 +309,14 @@ export class ObjectWrapper extends THREE.Group {
       }
     }
   }
+
+  selectScale(scale: Scale): Vec3 {
+    if (this.scaleMode === ScaleModeLandScape && scale.landscape !== undefined) {
+      return scale.landscape;
+    } else if (this.scaleMode === ScaleModeXR && scale.xr !== undefined) {
+      return scale.xr;
+    } else {
+      return scale.default;
+    }
+  }
 }

src/ui/xr.ts

@@ -87,7 +87,7 @@ class XrView {
         this.entities.set(uuid, entity);
         entity.setAttribute("scale", "1 1 1");
 
-        wrapper = new V.ObjectWrapper();
+        wrapper = new V.ObjectWrapper(V.ScaleModeXR);
         this.objects.set(uuid, wrapper);
 
         entity.object3D.add(wrapper);