Merge pull request #103 from decentraland/feat/zoom-scale

feat: added zoom scale param

Author: cazala

README.md

@@ -15,6 +15,7 @@ This webapp renders an interactive 3D preview of a wearable or an avatar. It can
 - `bodyShape`: which body shape to use, possible values are `urn:decentraland:off-chain:base-avatars:BaseMale` or `urn:decentraland:off-chain:base-avatars:BaseFemale`.
 - `emote`: the emote that the avatar will play. Default value is `idle`, other possible values are: `clap`, `dab`, `dance`, `fashion`, `fashion-2`, `fashion-3`,`fashion-4`, `love`, `money`, `fist-pump` and `head-explode`.
 - `zoom`: the level of zoom, it must be a number between 1 and 100.
+- `zoomScale`: a multiplier for the zoom level. By default is `1` but it can be increased to get extra zoom.
 - `camera`: which camera type to use, either `interactive` or `static`. By default it uses the `interactive` one.
 - `projection`: which projection type to use, either `orthographic` or `perspective`. By default it uses the `perspective` one.
 - `offsetX`: apply an offset in the X position of the scene. By default is `0`.
@@ -181,6 +182,7 @@ window.addEventListener('message', handleMessage)
 ```
 
 Now you can use it like this:
+
 ```ts
 const screenshot = await sendRequest('scene', 'getScreenshot', [512, 512]) // "data:image/png;base64..."
 ```

package-lock.json

@@ -8,7 +8,7 @@
     "@babylonjs/inspector": "^4.2.2",
     "@babylonjs/loaders": "^4.2.2",
     "@babylonjs/materials": "^4.2.2",
-    "@dcl/schemas": "^9.7.0",
+    "@dcl/schemas": "^9.9.0",
     "@dcl/ui-env": "^1.2.0",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^11.2.7",

package.json

@@ -16,6 +16,7 @@ export const useOptions = () => {
     const cameraXParam = params.get('cameraX') as string | null
     const cameraYParam = params.get('cameraY') as string | null
     const cameraZParam = params.get('cameraZ') as string | null
+    const zoomScaleParam = params.get('zoomScale') as string | null
     const wheelZoomParam = params.get('wheelZoom') as string | null
     const wheelPrecisionParam = params.get('wheelPrecision') as string | null
     const wheelStartParam = params.get('wheelStart') as string | null
@@ -60,6 +61,7 @@ export const useOptions = () => {
       wheelPrecision: wheelPrecisionParam ? parseFloat(wheelPrecisionParam) : null,
       wheelStart: wheelStartParam ? parseFloat(wheelStartParam) : null,
       zoom: parseZoom(params.get('zoom')),
+      zoomScale: zoomScaleParam ? parseFloat(zoomScaleParam) : null,
       bodyShape:
         bodyShapeParam === 'female' || bodyShapeParam === BodyShape.FEMALE
           ? BodyShape.FEMALE

src/hooks/useOptions.ts

@@ -145,6 +145,7 @@ export async function createScene(
   // Setup Camera
   const camera = new ArcRotateCamera('camera', 0, 0, 0, new Vector3(0, 0, 0), root)
   camera.position = new Vector3(config.cameraX, config.cameraY, config.cameraZ)
+  camera.minZ = 0.1
 
   switch (config.projection) {
     case PreviewProjection.PERSPECTIVE: {

src/lib/babylon/scene.ts

@@ -364,6 +364,10 @@ export async function createConfig(options: PreviewOptions = {}): Promise<Previe
     customWearable = wearables[1]
   }
 
+  // the zoom scale values is used to achieve extra zoom. It was implemented as a separate option to don't break the behavior of the zoom property. By default is 1 and it makes no change to the regular zoom.
+  const zoomScale =
+    typeof options.zoomScale !== 'number' || isNaN(options.zoomScale) || options.zoomScale <= 0 ? 1 : options.zoomScale
+
   return {
     // item is the most important prop, if not preset we use the blob prop, and if none, we use the last emote from the list (if any)
     item: item ?? blob ?? customWearable ?? emotes.pop(),
@@ -387,7 +391,7 @@ export async function createConfig(options: PreviewOptions = {}): Promise<Previe
     cameraX,
     cameraY,
     cameraZ,
-    zoom: typeof options.zoom === 'number' ? computeZoom(options.zoom) : zoom,
+    zoom: (typeof options.zoom === 'number' ? computeZoom(options.zoom) : zoom) * zoomScale,
     wheelZoom,
     wheelPrecision,
     wheelStart,