Convert to ThreeJS.Vector2 internally in public api. (google#4473)

* Convert to ThreeJS.Vector2 internally in public api.

Fixes google#4403

* Rename vector2D api interface

* Vector2DInterface consistency with Vector2D

* Update example to use u,v

packages/model-viewer/src/features/scene-graph/api.ts

@@ -32,9 +32,9 @@ export declare interface ThreeDOMElementMap {
 }
 
 /** A 2D Cartesian coordinate */
-export interface Vector2 {
-  x: number;
-  y: number;
+export interface Vector2DInterface {
+  u: number;
+  v: number;
 }
 
 /**
@@ -334,12 +334,12 @@ export declare interface Sampler {
   /**
    * The texture scale.
    */
-  readonly scale: Vector2|null;
+  readonly scale: Vector2DInterface|null;
 
   /**
    * The texture offset.
    */
-  readonly offset: Vector2|null;
+  readonly offset: Vector2DInterface|null;
 
   /**
    * Configure the minFilter value of the Sampler.
@@ -371,12 +371,12 @@ export declare interface Sampler {
    * Sets the texture scale, or resets it to (1, 1) if argument is null.
    * As the scale value increases, the repetition of the texture will increase.
    */
-  setScale(scale: Vector2|null): void;
+  setScale(scale: Vector2DInterface|null): void;
 
   /**
    * Sets the texture offset, or resets it to (0, 0) if argument is null.
    */
-  setOffset(offset: Vector2|null): void;
+  setOffset(offset: Vector2DInterface|null): void;
 }
 
 

packages/model-viewer/src/features/scene-graph/sampler.ts

@@ -15,10 +15,11 @@
 
 import {Texture as ThreeTexture, Vector2} from 'three';
 
+import {toVector2D, Vector2D} from '../../model-viewer-base.js';
 import {Filter, MagFilter, MinFilter, Wrap, WrapMode} from '../../three-components/gltf-instance/gltf-2.0.js';
 import {Sampler as DefaultedSampler} from '../../three-components/gltf-instance/gltf-defaulted.js';
 
-import {Sampler as SamplerInterface} from './api.js';
+import {Sampler as SamplerInterface, Vector2DInterface} from './api.js';
 import {$correlatedObjects, $onUpdate, ThreeDOMElement} from './three-dom-element.js';
 
 
@@ -113,12 +114,12 @@ export class Sampler extends ThreeDOMElement implements SamplerInterface {
     return this[$threeTexture].rotation;
   }
 
-  get scale(): Vector2 {
-    return this[$threeTexture].repeat;
+  get scale(): Vector2D {
+    return toVector2D(this[$threeTexture].repeat);
   }
 
-  get offset(): Vector2|null {
-    return this[$threeTexture].offset;
+  get offset(): Vector2D|null {
+    return toVector2D(this[$threeTexture].offset);
   }
 
   setMinFilter(filter: MinFilter) {
@@ -145,20 +146,20 @@ export class Sampler extends ThreeDOMElement implements SamplerInterface {
     this[$setProperty]('rotation', rotation);
   }
 
-  setScale(scale: Vector2|null): void {
+  setScale(scale: Vector2DInterface|null): void {
     if (scale == null) {
       // Reset scale.
-      scale = new Vector2(1, 1);
+      scale = {u: 1, v: 1};
     }
-    this[$setProperty]('repeat', scale);
+    this[$setProperty]('repeat', new Vector2(scale.u, scale.v));
   }
 
-  setOffset(offset: Vector2|null): void {
+  setOffset(offset: Vector2DInterface|null): void {
     if (offset == null) {
       // Reset offset.
-      offset = new Vector2(0, 0);
+      offset = {u: 0, v: 0};
     }
-    this[$setProperty]('offset', offset);
+    this[$setProperty]('offset', new Vector2(offset.u, offset.v));
   }
 
   private[$setProperty]<P extends 'minFilter'|'magFilter'|'wrapS'|'wrapT'|

packages/model-viewer/src/test/features/scene-graph/texture-info-spec.ts

@@ -14,7 +14,6 @@
  */
 
 import {expect} from '@esm-bundle/chai';
-import {Vector2} from 'three';
 
 import {TextureInfo} from '../../../features/scene-graph/texture-info.js';
 import {ModelViewerElement} from '../../../model-viewer.js';
@@ -82,8 +81,8 @@ suite('scene-graph/texture-info', () => {
                               .pbrMetallicRoughness['baseColorTexture']
                               .texture?.sampler!;
           sampler.setRotation(0.1);
-          sampler.setOffset(new Vector2(0.2, 0.3));
-          sampler.setScale(new Vector2(0.4, 0.5));
+          sampler.setOffset({u: 0.2, v: 0.3});
+          sampler.setScale({u: 0.4, v: 0.5});
 
           // Export model.
           const exported = await element.exportScene({binary: true});
@@ -99,10 +98,10 @@ suite('scene-graph/texture-info', () => {
                                        .pbrMetallicRoughness['baseColorTexture']
                                        .texture?.sampler!;
           expect(exported_sampler.rotation).to.be.eq(0.1, 'rotation');
-          expect(exported_sampler.offset)
-              .to.be.eql(new Vector2(0.2, 0.3), 'offset');
-          expect(exported_sampler.scale)
-              .to.be.eql(new Vector2(0.4, 0.5), 'scale');
+          expect(exported_sampler.offset!.u).to.be.eql(0.2, 'offset_u');
+          expect(exported_sampler.offset!.v).to.be.eql(0.3, 'offset_v');
+          expect(exported_sampler.scale!.u).to.be.eql(0.4, 'scale_u');
+          expect(exported_sampler.scale!.v).to.be.eql(0.5, 'scale_v');
         });
   });
 });

packages/modelviewer.dev/examples/scenegraph/index.html

@@ -525,17 +525,17 @@ <h2 class="demo-title">Transform textures</h2>
 
   scaleSlider.addEventListener('input', (event) => {
     const scale = {
-      x: scaleSlider.value,
-      y: scaleSlider.value
+      u: scaleSlider.value,
+      v: scaleSlider.value
     };
     sampler.setScale(scale);
     scaleDisplay.textContent = scale.x;
   });
 
   offsetSlider.addEventListener('input', (event) => {
     const offset = {
-      x: offsetSlider.value,
-      y: -offsetSlider.value
+      u: offsetSlider.value,
+      v: -offsetSlider.value
     };
     sampler.setOffset(offset);
   });