From ff8276833f9f2c366a44156ed964f04b4e79fb08 Mon Sep 17 00:00:00 2001 From: Juan Cazala Date: Wed, 8 Nov 2023 17:20:02 -0300 Subject: [PATCH 1/2] feat: added zoom scale param --- README.md | 2 ++ src/hooks/useOptions.ts | 2 ++ src/lib/babylon/scene.ts | 1 + src/lib/config.ts | 6 +++++- 4 files changed, 10 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 33890d1..d01b448 100644 --- a/README.md +++ b/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..." ``` diff --git a/src/hooks/useOptions.ts b/src/hooks/useOptions.ts index bc7f276..11cb39a 100644 --- a/src/hooks/useOptions.ts +++ b/src/hooks/useOptions.ts @@ -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 diff --git a/src/lib/babylon/scene.ts b/src/lib/babylon/scene.ts index b0350dc..fb6d287 100644 --- a/src/lib/babylon/scene.ts +++ b/src/lib/babylon/scene.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: { diff --git a/src/lib/config.ts b/src/lib/config.ts index d94213d..da10c6a 100644 --- a/src/lib/config.ts +++ b/src/lib/config.ts @@ -364,6 +364,10 @@ export async function createConfig(options: PreviewOptions = {}): Promise Date: Wed, 8 Nov 2023 17:39:23 -0300 Subject: [PATCH 2/2] fix: upgrade @dcl/schemas --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index f791395..e968b72 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,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", @@ -1942,9 +1942,9 @@ "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, "node_modules/@dcl/schemas": { - "version": "9.7.0", - "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-9.7.0.tgz", - "integrity": "sha512-biebiK72leOhSBCSTPywnHl0vNpWmJX7dYSnk6UKzq08Ri15bs1S7s2Mxuxo6r15DnEvYgcqrfXeCwufJTFeqA==", + "version": "9.9.0", + "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-9.9.0.tgz", + "integrity": "sha512-n7zgMWTHb0O8oqb4kfVJzuTi/R3qkp/BZTAqhS1BRtSeulVhEVAnpPd2R6nzW9gC9D0Wp1yzaMo53gUIAcHSDw==", "dependencies": { "ajv": "^8.11.0", "ajv-errors": "^3.0.0", @@ -23256,9 +23256,9 @@ "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, "@dcl/schemas": { - "version": "9.7.0", - "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-9.7.0.tgz", - "integrity": "sha512-biebiK72leOhSBCSTPywnHl0vNpWmJX7dYSnk6UKzq08Ri15bs1S7s2Mxuxo6r15DnEvYgcqrfXeCwufJTFeqA==", + "version": "9.9.0", + "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-9.9.0.tgz", + "integrity": "sha512-n7zgMWTHb0O8oqb4kfVJzuTi/R3qkp/BZTAqhS1BRtSeulVhEVAnpPd2R6nzW9gC9D0Wp1yzaMo53gUIAcHSDw==", "requires": { "ajv": "^8.11.0", "ajv-errors": "^3.0.0", diff --git a/package.json b/package.json index c3e08f9..724d5b2 100644 --- a/package.json +++ b/package.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",