Transformations on 3D models

Last updated: Feb-07-2023

Cloudinary supports 3D models in various different formats and allows certain transformations as described below.

Notes

3D models should be uploaded with the image asset type (see Uploading 3D models for details).
To transform and deliver 3D models, ensure that the Allow delivery of PDF and ZIP files option is enabled in the Security page of your Console Settings.
Special transformation counts apply to 3D models.

On this page:

Generating an image from a 3D model
Generating a 360 animated image from a 3D model
Generating a 360 video from a 3D model
Applying Draco compression to glTF files
Delivering 3D models in different 3D formats
Changing the texture of a 3D model
AR/3D Viewer

These models are used in the examples below:

CldLogo3D.glb: a GLB file, uploaded as an image asset type.
DamagedHelmet3D.gltz: a zip file, uploaded as an image asset type, containing a glTF file and other associated files.
foyer-table.fbxz: a zip file, uploaded as an image asset type, containing an FBX file and other associated files. [© HippoStance]
cute-kitty.glb: a GLB file, uploaded as an image asset type. ["Cute Little Kitty" https://skfb.ly/ospAT by Diskette96 is licensed under Creative Commons Attribution.]

Help us shape the future of 3D

3D is taking the world by storm! Share your plans and help shape our 3D product. Take the Survey.

Generating an image from a 3D model

You can generate a single image from a 3D model by setting the format to an image format such as PNG or JPG and using the camera effect (e_camera in URLs).

For example, the DamagedHelmet3D.gltz file can be requested as a PNG file (f_png) as follows:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin Flutter Dart All

url:

https://res.cloudinary.com/demo/image/upload/e_camera/f_png/DamagedHelmet3D.gltz

Ruby (cloudinary 1.x):

cl_image_tag("DamagedHelmet3D.gltz", :transformation=>[
  {:effect=>"camera"},
  {:fetch_format=>"png"}
  ])

PHP (cloudinary_php 2.x):

// This code example is not currently available.

PHP (cloudinary_php 1.x (legacy)):

cl_image_tag("DamagedHelmet3D.gltz", array("transformation"=>array(
  array("effect"=>"camera"),
  array("fetch_format"=>"png")
  )))

Python (cloudinary 1.x):

CloudinaryImage("DamagedHelmet3D.gltz").image(transformation=[
  {'effect': "camera"},
  {'fetch_format': "png"}
  ])

Node.js (cloudinary 1.x):

cloudinary.image("DamagedHelmet3D.gltz", {transformation: [
  {effect: "camera"},
  {fetch_format: "png"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .effect("camera").chain()
  .fetchFormat("png")).imageTag("DamagedHelmet3D.gltz");

JS (@cloudinary/url-gen 1.x):

// This code example is not currently available.

JS (cloudinary-core 2.x (legacy)):

cloudinary.imageTag('DamagedHelmet3D.gltz', {transformation: [
  {effect: "camera"},
  {fetchFormat: "png"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.image("DamagedHelmet3D.gltz", {transformation: [
  {effect: "camera"},
  {fetch_format: "png"}
  ]})

React (@cloudinary/react 1.x):

// This code example is not currently available.

React (cloudinary-react 1.x):

<Image publicId="DamagedHelmet3D.gltz" >
  <Transformation effect="camera" />
  <Transformation fetchFormat="png" />
</Image>

Vue.js (@cloudinary/vue 1.x):

// This code example is not currently available.

Vue.js (cloudinary-vue 1.x (legacy)):

<cld-image public-id="DamagedHelmet3D.gltz" >
  <cld-transformation effect="camera" />
  <cld-transformation fetch-format="png" />
</cld-image>

Angular (@cloudinary/ng 1.x):

// This code example is not currently available.

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-image public-id="DamagedHelmet3D.gltz" >
  <cl-transformation effect="camera">
  </cl-transformation>
  <cl-transformation fetch-format="png">
  </cl-transformation>
</cl-image>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("camera").Chain()
  .FetchFormat("png")).BuildImageTag("DamagedHelmet3D.gltz")

iOS (cloudinary 3.x):

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("camera").chain()
  .setFetchFormat("png")).generate("DamagedHelmet3D.gltz")!, cloudinary: cloudinary)

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .effect("camera").chain()
  .fetchFormat("png")).generate("DamagedHelmet3D.gltz");

Kotlin (kotlin-url-gen 1.x):

// This code example is not currently available.

Flutter (cloudinary_flutter 0.x):

// This code example is not currently available.

Dart (cloudinary_dart 0.x):

// This code example is not currently available.

Or, by specifying the .png extension:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin Flutter Dart All

url:

https://res.cloudinary.com/demo/image/upload/e_camera/DamagedHelmet3D.png

Ruby (cloudinary 1.x):

cl_image_tag("DamagedHelmet3D.png", :effect=>"camera")

PHP (cloudinary_php 2.x):

// This code example is not currently available.

PHP (cloudinary_php 1.x (legacy)):

cl_image_tag("DamagedHelmet3D.png", array("effect"=>"camera"))

Python (cloudinary 1.x):

CloudinaryImage("DamagedHelmet3D.png").image(effect="camera")

Node.js (cloudinary 1.x):

cloudinary.image("DamagedHelmet3D.png", {effect: "camera"})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation().effect("camera")).imageTag("DamagedHelmet3D.png");

JS (@cloudinary/url-gen 1.x):

// This code example is not currently available.

JS (cloudinary-core 2.x (legacy)):

cloudinary.imageTag('DamagedHelmet3D.png', {effect: "camera"}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.image("DamagedHelmet3D.png", {effect: "camera"})

React (@cloudinary/react 1.x):

// This code example is not currently available.

React (cloudinary-react 1.x):

<Image publicId="DamagedHelmet3D.png" >
  <Transformation effect="camera" />
</Image>

Vue.js (@cloudinary/vue 1.x):

// This code example is not currently available.

Vue.js (cloudinary-vue 1.x (legacy)):

<cld-image public-id="DamagedHelmet3D.png" >
  <cld-transformation effect="camera" />
</cld-image>

Angular (@cloudinary/ng 1.x):

// This code example is not currently available.

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-image public-id="DamagedHelmet3D.png" >
  <cl-transformation effect="camera">
  </cl-transformation>
</cl-image>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("camera")).BuildImageTag("DamagedHelmet3D.png")

iOS (cloudinary 3.x):

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("camera")).generate("DamagedHelmet3D.png")!, cloudinary: cloudinary)

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation().effect("camera")).generate("DamagedHelmet3D.png");

Kotlin (kotlin-url-gen 1.x):

// This code example is not currently available.

Flutter (cloudinary_flutter 0.x):

// This code example is not currently available.

Dart (cloudinary_dart 0.x):

// This code example is not currently available.

You can then apply further transformations to the image, for example:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin Flutter Dart All

url:

https://res.cloudinary.com/demo/image/upload/e_camera/f_png/ar_1,c_fill,g_auto,h_200/b_rgb:a17ec5/DamagedHelmet3D

Ruby (cloudinary 1.x):

cl_image_tag("DamagedHelmet3D", :transformation=>[
  {:effect=>"camera"},
  {:fetch_format=>"png"},
  {:aspect_ratio=>"1", :gravity=>"auto", :height=>200, :crop=>"fill"},
  {:background=>"#a17ec5"}
  ])

PHP (cloudinary_php 2.x):

// This code example is not currently available.

PHP (cloudinary_php 1.x (legacy)):

cl_image_tag("DamagedHelmet3D", array("transformation"=>array(
  array("effect"=>"camera"),
  array("fetch_format"=>"png"),
  array("aspect_ratio"=>"1", "gravity"=>"auto", "height"=>200, "crop"=>"fill"),
  array("background"=>"#a17ec5")
  )))

Python (cloudinary 1.x):

CloudinaryImage("DamagedHelmet3D").image(transformation=[
  {'effect': "camera"},
  {'fetch_format': "png"},
  {'aspect_ratio': "1", 'gravity': "auto", 'height': 200, 'crop': "fill"},
  {'background': "#a17ec5"}
  ])

Node.js (cloudinary 1.x):

cloudinary.image("DamagedHelmet3D", {transformation: [
  {effect: "camera"},
  {fetch_format: "png"},
  {aspect_ratio: "1", gravity: "auto", height: 200, crop: "fill"},
  {background: "#a17ec5"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .effect("camera").chain()
  .fetchFormat("png").chain()
  .aspectRatio("1").gravity("auto").height(200).crop("fill").chain()
  .background("#a17ec5")).imageTag("DamagedHelmet3D");

JS (@cloudinary/url-gen 1.x):

// This code example is not currently available.

JS (cloudinary-core 2.x (legacy)):

cloudinary.imageTag('DamagedHelmet3D', {transformation: [
  {effect: "camera"},
  {fetchFormat: "png"},
  {aspectRatio: "1", gravity: "auto", height: 200, crop: "fill"},
  {background: "#a17ec5"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.image("DamagedHelmet3D", {transformation: [
  {effect: "camera"},
  {fetch_format: "png"},
  {aspect_ratio: "1", gravity: "auto", height: 200, crop: "fill"},
  {background: "#a17ec5"}
  ]})

React (@cloudinary/react 1.x):

// This code example is not currently available.

React (cloudinary-react 1.x):

<Image publicId="DamagedHelmet3D" >
  <Transformation effect="camera" />
  <Transformation fetchFormat="png" />
  <Transformation aspectRatio="1" gravity="auto" height="200" crop="fill" />
  <Transformation background="#a17ec5" />
</Image>

Vue.js (@cloudinary/vue 1.x):

// This code example is not currently available.

Vue.js (cloudinary-vue 1.x (legacy)):

<cld-image public-id="DamagedHelmet3D" >
  <cld-transformation effect="camera" />
  <cld-transformation fetch-format="png" />
  <cld-transformation aspect-ratio="1" gravity="auto" height="200" crop="fill" />
  <cld-transformation background="#a17ec5" />
</cld-image>

Angular (@cloudinary/ng 1.x):

// This code example is not currently available.

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-image public-id="DamagedHelmet3D" >
  <cl-transformation effect="camera">
  </cl-transformation>
  <cl-transformation fetch-format="png">
  </cl-transformation>
  <cl-transformation aspect-ratio="1" gravity="auto" height="200" crop="fill">
  </cl-transformation>
  <cl-transformation background="#a17ec5">
  </cl-transformation>
</cl-image>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("camera").Chain()
  .FetchFormat("png").Chain()
  .AspectRatio("1").Gravity("auto").Height(200).Crop("fill").Chain()
  .Background("#a17ec5")).BuildImageTag("DamagedHelmet3D")

iOS (cloudinary 3.x):

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("camera").chain()
  .setFetchFormat("png").chain()
  .setAspectRatio("1").setGravity("auto").setHeight(200).setCrop("fill").chain()
  .setBackground("#a17ec5")).generate("DamagedHelmet3D")!, cloudinary: cloudinary)

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .effect("camera").chain()
  .fetchFormat("png").chain()
  .aspectRatio("1").gravity("auto").height(200).crop("fill").chain()
  .background("#a17ec5")).generate("DamagedHelmet3D");

Kotlin (kotlin-url-gen 1.x):

// This code example is not currently available.

Flutter (cloudinary_flutter 0.x):

// This code example is not currently available.

Dart (cloudinary_dart 0.x):

// This code example is not currently available.

Damaged Helmet single image with transformations

By default, the image is rendered at a resolution of 640 x 640 pixels, but you can change that by scaling the model before applying other transformations, for example:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin Flutter Dart All

url:

https://res.cloudinary.com/demo/image/upload/c_scale,w_800/e_camera/DamagedHelmet3D.png

Ruby (cloudinary 1.x):

cl_image_tag("DamagedHelmet3D.png", :transformation=>[
  {:width=>800, :crop=>"scale"},
  {:effect=>"camera"}
  ])

PHP (cloudinary_php 2.x):

// This code example is not currently available.

PHP (cloudinary_php 1.x (legacy)):

cl_image_tag("DamagedHelmet3D.png", array("transformation"=>array(
  array("width"=>800, "crop"=>"scale"),
  array("effect"=>"camera")
  )))

Python (cloudinary 1.x):

CloudinaryImage("DamagedHelmet3D.png").image(transformation=[
  {'width': 800, 'crop': "scale"},
  {'effect': "camera"}
  ])

Node.js (cloudinary 1.x):

cloudinary.image("DamagedHelmet3D.png", {transformation: [
  {width: 800, crop: "scale"},
  {effect: "camera"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .width(800).crop("scale").chain()
  .effect("camera")).imageTag("DamagedHelmet3D.png");

JS (@cloudinary/url-gen 1.x):

// This code example is not currently available.

JS (cloudinary-core 2.x (legacy)):

cloudinary.imageTag('DamagedHelmet3D.png', {transformation: [
  {width: 800, crop: "scale"},
  {effect: "camera"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.image("DamagedHelmet3D.png", {transformation: [
  {width: 800, crop: "scale"},
  {effect: "camera"}
  ]})

React (@cloudinary/react 1.x):

// This code example is not currently available.

React (cloudinary-react 1.x):

<Image publicId="DamagedHelmet3D.png" >
  <Transformation width="800" crop="scale" />
  <Transformation effect="camera" />
</Image>

Vue.js (@cloudinary/vue 1.x):

// This code example is not currently available.

Vue.js (cloudinary-vue 1.x (legacy)):

<cld-image public-id="DamagedHelmet3D.png" >
  <cld-transformation width="800" crop="scale" />
  <cld-transformation effect="camera" />
</cld-image>

Angular (@cloudinary/ng 1.x):

// This code example is not currently available.

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-image public-id="DamagedHelmet3D.png" >
  <cl-transformation width="800" crop="scale">
  </cl-transformation>
  <cl-transformation effect="camera">
  </cl-transformation>
</cl-image>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(800).Crop("scale").Chain()
  .Effect("camera")).BuildImageTag("DamagedHelmet3D.png")

iOS (cloudinary 3.x):

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(800).setCrop("scale").chain()
  .setEffect("camera")).generate("DamagedHelmet3D.png")!, cloudinary: cloudinary)

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .width(800).crop("scale").chain()
  .effect("camera")).generate("DamagedHelmet3D.png");

Kotlin (kotlin-url-gen 1.x):

// This code example is not currently available.

Flutter (cloudinary_flutter 0.x):

// This code example is not currently available.

Dart (cloudinary_dart 0.x):

// This code example is not currently available.

You can also customize the 2D image you create from the 3D model by specifying the position of the camera, the exposure, zoom and lighting to capture your perfect shot.

The camera always points towards the center of the 3D model and can be rotated around it.

For full syntax details see the camera effect in the transformation reference.

For example, capture a JPG image of the foyer-table 3D model (f_jpg) with the camera positioned at an angle of 20 degrees above the table (up_20), rotated 30 degrees to the left (right_-30), zoomed in to 110% (zoom_1.1), with "pillars" lighting (env_pillars) and 1.4 amount of exposure (exposure_1.4):

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin Flutter Dart All

url:

https://res.cloudinary.com/demo/image/upload/e_camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4/f_jpg/docs/foyer-table

Ruby (cloudinary 1.x):

cl_image_tag("docs/foyer-table", :effect=>"camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4", :format=>"jpg")

PHP (cloudinary_php 2.x):

// This code example is not currently available.

PHP (cloudinary_php 1.x (legacy)):

cl_image_tag("docs/foyer-table", array("effect"=>"camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4", "format"=>"jpg"))

Python (cloudinary 1.x):

CloudinaryImage("docs/foyer-table").image(effect="camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4", format="jpg")

Node.js (cloudinary 1.x):

cloudinary.image("docs/foyer-table", {effect: "camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4", format: "jpg"})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation().effect("camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4")).format("jpg").imageTag("docs/foyer-table");

JS (@cloudinary/url-gen 1.x):

// This code example is not currently available.

JS (cloudinary-core 2.x (legacy)):

cloudinary.imageTag('docs/foyer-table', {effect: "camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4", format: "jpg"}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.image("docs/foyer-table", {effect: "camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4", format: "jpg"})

React (@cloudinary/react 1.x):

// This code example is not currently available.

React (cloudinary-react 1.x):

<Image publicId="docs/foyer-table" format="jpg">
  <Transformation effect="camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4" />
</Image>

Vue.js (@cloudinary/vue 1.x):

// This code example is not currently available.

Vue.js (cloudinary-vue 1.x (legacy)):

<cld-image public-id="docs/foyer-table" format="jpg">
  <cld-transformation effect="camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4" />
</cld-image>

Angular (@cloudinary/ng 1.x):

// This code example is not currently available.

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-image public-id="docs/foyer-table" format="jpg">
  <cl-transformation effect="camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4">
  </cl-transformation>
</cl-image>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4")).Format("jpg").BuildImageTag("docs/foyer-table")

iOS (cloudinary 3.x):

imageView.cldSetImage(cloudinary.createUrl().setFormat("jpg").setTransformation(CLDTransformation().setEffect("camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4")).generate("docs/foyer-table")!, cloudinary: cloudinary)

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation().effect("camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4")).format("jpg").generate("docs/foyer-table");

Kotlin (kotlin-url-gen 1.x):

// This code example is not currently available.

Flutter (cloudinary_flutter 0.x):

// This code example is not currently available.

Dart (cloudinary_dart 0.x):

// This code example is not currently available.

Image of the foyer table model from a particular angle

Camera effect interactive demo

Try out the different camera effect settings on the cute kitty 3D model.

Use the controls to set up the camera, then capture your shot!

Vertical camera position (-360 to 360): 0

Horizontal camera position (-360 to 360): 0

Zoom (0.2 to 5.0): 1.0

Exposure (0.0 to 2.0): 1.0

Environment:

May take a few seconds to generate*

https://res.cloudinary.com/demo/image/upload/e_camera:up_0;right_0;zoom_1.0;env_neutral;exposure_1.0/f_jpg/docs/cute-kitty

Note

*It can take a few seconds to generate a new image on the fly if you've tried a combination of settings that hasn't been tried before. Once an image has been generated though, it's cached on the CDN, so future requests to the same transformation are much faster. You can learn more about that in our Service overview.

["Cute Little Kitty" https://skfb.ly/ospAT by Diskette96 is licensed under Creative Commons Attribution.]

Generating a 360 animated image from a 3D model

To generate a 360 animated image from a 3D model, use the animated flag and specify a file format that supports animation, such as WebP (f_webp,fl_animated). The following example generates a 360 animated WebP from a GLB model of the Cloudinary logo, with the camera positioned 30 degrees below the model, and starting at 15 degrees to the right, capturing 20 frames (e_camera:up_-30;right_15;frames_20):

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin Flutter Dart All

url:

https://res.cloudinary.com/demo/image/upload/e_camera:up_-30;right_15;frames_20/dl_10,f_webp,fl_animated/c_scale,h_200/b_rgb:3448C5/docs/CldLogo3D

Ruby (cloudinary 1.x):

cl_image_tag("docs/CldLogo3D", :transformation=>[
  {:effect=>"camera:up_-30;right_15;frames_20"},
  {:delay=>"10", :flags=>"animated", :fetch_format=>"webp"},
  {:height=>200, :crop=>"scale"},
  {:background=>"#3448C5"}
  ])

PHP (cloudinary_php 2.x):

// This code example is not currently available.

PHP (cloudinary_php 1.x (legacy)):

cl_image_tag("docs/CldLogo3D", array("transformation"=>array(
  array("effect"=>"camera:up_-30;right_15;frames_20"),
  array("delay"=>"10", "flags"=>"animated", "fetch_format"=>"webp"),
  array("height"=>200, "crop"=>"scale"),
  array("background"=>"#3448C5")
  )))

Python (cloudinary 1.x):

CloudinaryImage("docs/CldLogo3D").image(transformation=[
  {'effect': "camera:up_-30;right_15;frames_20"},
  {'delay': "10", 'flags': "animated", 'fetch_format': "webp"},
  {'height': 200, 'crop': "scale"},
  {'background': "#3448C5"}
  ])

Node.js (cloudinary 1.x):

cloudinary.image("docs/CldLogo3D", {transformation: [
  {effect: "camera:up_-30;right_15;frames_20"},
  {delay: "10", flags: "animated", fetch_format: "webp"},
  {height: 200, crop: "scale"},
  {background: "#3448C5"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .effect("camera:up_-30;right_15;frames_20").chain()
  .delay("10").flags("animated").fetchFormat("webp").chain()
  .height(200).crop("scale").chain()
  .background("#3448C5")).imageTag("docs/CldLogo3D");

JS (@cloudinary/url-gen 1.x):

// This code example is not currently available.

JS (cloudinary-core 2.x (legacy)):

cloudinary.imageTag('docs/CldLogo3D', {transformation: [
  {effect: "camera:up_-30;right_15;frames_20"},
  {delay: "10", flags: "animated", fetchFormat: "webp"},
  {height: 200, crop: "scale"},
  {background: "#3448C5"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.image("docs/CldLogo3D", {transformation: [
  {effect: "camera:up_-30;right_15;frames_20"},
  {delay: "10", flags: "animated", fetch_format: "webp"},
  {height: 200, crop: "scale"},
  {background: "#3448C5"}
  ]})

React (@cloudinary/react 1.x):

// This code example is not currently available.

React (cloudinary-react 1.x):

<Image publicId="docs/CldLogo3D" >
  <Transformation effect="camera:up_-30;right_15;frames_20" />
  <Transformation delay="10" flags="animated" fetchFormat="webp" />
  <Transformation height="200" crop="scale" />
  <Transformation background="#3448C5" />
</Image>

Vue.js (@cloudinary/vue 1.x):

// This code example is not currently available.

Vue.js (cloudinary-vue 1.x (legacy)):

<cld-image public-id="docs/CldLogo3D" >
  <cld-transformation effect="camera:up_-30;right_15;frames_20" />
  <cld-transformation delay="10" flags="animated" fetch-format="webp" />
  <cld-transformation height="200" crop="scale" />
  <cld-transformation background="#3448C5" />
</cld-image>

Angular (@cloudinary/ng 1.x):

// This code example is not currently available.

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-image public-id="docs/CldLogo3D" >
  <cl-transformation effect="camera:up_-30;right_15;frames_20">
  </cl-transformation>
  <cl-transformation delay="10" flags="animated" fetch-format="webp">
  </cl-transformation>
  <cl-transformation height="200" crop="scale">
  </cl-transformation>
  <cl-transformation background="#3448C5">
  </cl-transformation>
</cl-image>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("camera:up_-30;right_15;frames_20").Chain()
  .Delay("10").Flags("animated").FetchFormat("webp").Chain()
  .Height(200).Crop("scale").Chain()
  .Background("#3448C5")).BuildImageTag("docs/CldLogo3D")

iOS (cloudinary 3.x):

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("camera:up_-30;right_15;frames_20").chain()
  .setDelay("10").setFlags("animated").setFetchFormat("webp").chain()
  .setHeight(200).setCrop("scale").chain()
  .setBackground("#3448C5")).generate("docs/CldLogo3D")!, cloudinary: cloudinary)

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .effect("camera:up_-30;right_15;frames_20").chain()
  .delay("10").flags("animated").fetchFormat("webp").chain()
  .height(200).crop("scale").chain()
  .background("#3448C5")).generate("docs/CldLogo3D");

Kotlin (kotlin-url-gen 1.x):

// This code example is not currently available.

Flutter (cloudinary_flutter 0.x):

// This code example is not currently available.

Dart (cloudinary_dart 0.x):

// This code example is not currently available.

Generating a 360 video from a 3D model

To generate a 360 video from a 3D model, use the animated flag and specify a video file format, such as MP4 (f_mp4,fl_animated). The following example generates a 360 video from an FBX model of a foyer table (in addition to applying other image transformations):

3D model zip files are uploaded as image types, so make sure you set the resource_type parameter to image when implementing the video tag:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin Go All

url:

https://res.cloudinary.com/demo/image/upload/dl_10,f_mp4,fl_animated/c_fill,h_300,w_500/b_rgb:d5d2ca/docs/foyer-table

Ruby (cloudinary 1.x):

cl_video_tag("docs/foyer-table", 
  :resource_type=>"image",
  :transformation=>[
    {:delay=>"10", :flags=>"animated", :fetch_format=>"mp4"},
    {:height=>300, :width=>500, :crop=>"fill"},
    {:background=>"#d5d2ca"}]

PHP (cloudinary_php 2.x):

(new VideoTag('docs/foyer-table'))
  ->transcode(Transcode::toAnimated(
    AnimatedFormat::videoMp4()))
  ->animated(Animated::edit()->delay(10))
  ->resize(Resize::fill()->width(500)
  ->height(300))
  ->backgroundColor(Color::rgb("d5d2ca"))
  ->assetType("image");

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("docs/foyer-table", "resource_type"=>"image", array("transformation"=>array(
  array("delay"=>"10", "flags"=>"animated", "fetch_format"=>"mp4"),
  array("height"=>300, "width"=>500, "crop"=>"fill"),
  array("background"=>"#d5d2ca")
)))

Python (cloudinary 1.x):

CloudinaryVideo("docs/foyer-table").video(resource_type = "image", 
 transformation = 
        [{"delay": "10", "flags": "animated", "fetch_format": "mp4"},
         {"height": 300, "width": 500, "crop": "fill"},
         {"background": "#d5d2ca"}])

Node.js (cloudinary 1.x):

cloudinary.video("docs/foyer-table",
    {resource_type: "image",
     transformation: [
      {delay: "10", flags: "animated", fetch_format: "mp4"},
      {height: 300, width: 500, crop: "fill"},
      {background: "#d5d2ca"}]}
    )

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
    .delay("10").flags("animated").fetchFormat("mp4").chain()
    .height(300).width(500).crop("fill").chain()
    .background("#d5d2ca")).videoTag("docs/foyer-table");

JS (@cloudinary/url-gen 1.x):

// This code example is not currently available.

JS (cloudinary-core 2.x (legacy)):

cloudinary.videoTag('docs/foyer-table', resource_type: "image", {transformation: [
   {delay: "10", flags: "animated", fetchFormat: "mp4"},
   {height: 300, width: 500, crop: "fill"},
   {background: "#d5d2ca"}
]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("docs/foyer-table", {resource_type: "image", transformation: [
  {delay: "10", flags: "animated", fetch_format: "mp4"},
  {height: 300, width: 500, crop: "fill"},
  {background: "#d5d2ca"}
]})

React (cloudinary-react 1.x):

<Video publicId="docs/foyer-table" resourceType="image">
  <Transformation delay="10" flags="animated" fetchFormat="mp4" />
  <Transformation height="300" width="500" crop="fill" />
  <Transformation background="#d5d2ca" />
</Video>

Vue.js (cloudinary-vue 1.x (legacy)):

<cld-video publicId="docs/foyer-table" resourceType="image">
  <cld-transformation delay="10" flags="animated" fetch-format="mp4" />
  <cld-transformation height="300" width="500" crop="fill" />
  <cld-transformation background="#d5d2ca" />
</cld-video>

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-video public-id="docs/foyer-table" resource-type="image">
  <cl-transformation delay="10" flags="animated" fetch-format="mp4">
  </cl-transformation>
  <cl-transformation height="300" width="500" crop="fill">
  </cl-transformation>
  <cl-transformation background="#d5d2ca">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
    .Delay("10").Flags("animated").FetchFormat("mp4").Chain()
    .Height(300).Width(500).Crop("fill").Chain()
    .Background("#d5d2ca"))
    .ResourceType("image")
    .BuildVideoTag("docs/foyer-table");

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("image").setTransformation(CLDTransformation()
  .setDelay("10").setFlags("animated").setFetchFormat("mp4").chain()
  .setHeight(300).setWidth(500).setCrop("fill").chain()
  .setBackground("#d5d2ca")).generate("docs/foyer-table")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .delay("10").flags("animated").fetchFormat("mp4").chain()
  .height(300).width(500).crop("fill").chain()
  .background("#d5d2ca"))
  .resourceType("image").generate("docs/foyer-table");

Kotlin (kotlin-url-gen 1.x):

// This code example is not currently available.

Go (cloudinary-go 1.x):

myImg, err := cld.Image("docs/foyer-table")
myImg.Transformation = "dl_10,f_mp4,fl_animated/c_fill,h_300,w_500/b_rgb:d5d2ca"
url, err := myImg.String()

Applying Draco compression to glTF files

You can optimize the mesh buffer in glTF files using Draco compression. To apply Draco compression, use the draco flag (fl_draco in URLs):

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin Flutter Dart All

url:

https://res.cloudinary.com/demo/image/upload/fl_draco/DamagedHelmet3D.gltz

Ruby (cloudinary 1.x):

cl_image_tag("DamagedHelmet3D.gltz", :flags=>"draco")

PHP (cloudinary_php 2.x):

(new ImageTag('DamagedHelmet3D.gltz'))
  ->addFlag("draco");

PHP (cloudinary_php 1.x (legacy)):

cl_image_tag("DamagedHelmet3D.gltz", array("flags"=>"draco"))

Python (cloudinary 1.x):

CloudinaryImage("DamagedHelmet3D.gltz").image(flags="draco")

Node.js (cloudinary 1.x):

cloudinary.image("DamagedHelmet3D.gltz", {flags: "draco"})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation().flags("draco")).imageTag("DamagedHelmet3D.gltz");

JS (@cloudinary/url-gen 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("DamagedHelmet3D.gltz").addFlag("draco");

JS (cloudinary-core 2.x (legacy)):

cloudinary.imageTag('DamagedHelmet3D.gltz', {flags: "draco"}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.image("DamagedHelmet3D.gltz", {flags: "draco"})

React (@cloudinary/react 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("DamagedHelmet3D.gltz").addFlag("draco");

React (cloudinary-react 1.x):

<Image publicId="DamagedHelmet3D.gltz" >
  <Transformation flags="draco" />
</Image>

Vue.js (@cloudinary/vue 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("DamagedHelmet3D.gltz").addFlag("draco");

Vue.js (cloudinary-vue 1.x (legacy)):

<cld-image public-id="DamagedHelmet3D.gltz" >
  <cld-transformation flags="draco" />
</cld-image>

Angular (@cloudinary/ng 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("DamagedHelmet3D.gltz").addFlag("draco");

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-image public-id="DamagedHelmet3D.gltz" >
  <cl-transformation flags="draco">
  </cl-transformation>
</cl-image>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags("draco")).BuildImageTag("DamagedHelmet3D.gltz")

iOS (cloudinary 3.x):

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags("draco")).generate("DamagedHelmet3D.gltz")!, cloudinary: cloudinary)

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation().flags("draco")).generate("DamagedHelmet3D.gltz");

Kotlin (kotlin-url-gen 1.x):

cloudinary.image {
  publicId("DamagedHelmet3D.gltz")
   addFlag("draco") 
}.generate()

Flutter (cloudinary_flutter 0.x):

cloudinary.image('DamagedHelmet3D.gltz').transformation(Transformation()
  .addFlag("draco"));

Dart (cloudinary_dart 0.x):

cloudinary.image('DamagedHelmet3D.gltz').transformation(Transformation()
  .addFlag("draco"));

If you use the .gltz extension, the whole zip file is delivered containing the modified glTF file, referencing the Draco mesh.
If you use the .gltf extension, only the modified glTF file is delivered.

Delivering 3D models in different 3D formats

You can deliver a 3D model (uploaded as an image type) in any of the formats that are supported for encoding.

Note

Only models that are uploaded as an image type can be transformed. Therefore, as USDZ models are not supported for upload as an image type, they cannot be converted to other formats.

3D format	Supported for upload as an image type	Supported for encoding
`bw`	Yes	No
`fbx`	Yes	No
`glb`	Yes	Yes
`gltf`	Yes	Yes
`obj`	Yes	No
`ply`	Yes	Yes
`u3ma`	Yes	No
`usdz`	No	Yes

So, for example, you can deliver an OBJ model as GLB, or a glTF model as USDZ. However, you cannot deliver a glTF model as FBX, or a PLY model as OBJ.

To deliver a model in a different format, either:

Specify the 3D format as the extension on the public ID (see Example 1), or
Set the fetch_format/format transformation parameter to the required format (see Example 2).

Example 1: Deliver a glTF model as GLB

GLB is the binary file format representation of 3D models saved in the GL Transmission Format (glTF).

Deliver the DamagedHelmet3D glTF model as a GLB model by setting the extension to .glb, as follows:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin Flutter Dart All

url:

https://res.cloudinary.com/demo/image/upload/DamagedHelmet3D.glb

Ruby (cloudinary 1.x):

cl_image_tag("DamagedHelmet3D.glb")

PHP (cloudinary_php 2.x):

(new ImageTag('DamagedHelmet3D.glb'));

PHP (cloudinary_php 1.x (legacy)):

cl_image_tag("DamagedHelmet3D.glb")

Python (cloudinary 1.x):

CloudinaryImage("DamagedHelmet3D.glb").image()

Node.js (cloudinary 1.x):

cloudinary.image("DamagedHelmet3D.glb")

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation().imageTag("DamagedHelmet3D.glb");

JS (@cloudinary/url-gen 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("DamagedHelmet3D.glb");

JS (cloudinary-core 2.x (legacy)):

cloudinary.imageTag('DamagedHelmet3D.glb').toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.image("DamagedHelmet3D.glb")

React (@cloudinary/react 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("DamagedHelmet3D.glb");

React (cloudinary-react 1.x):

<Image publicId="DamagedHelmet3D.glb" >

</Image>

Vue.js (@cloudinary/vue 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("DamagedHelmet3D.glb");

Vue.js (cloudinary-vue 1.x (legacy)):

<cld-image public-id="DamagedHelmet3D.glb" >

</cld-image>

Angular (@cloudinary/ng 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("DamagedHelmet3D.glb");

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-image public-id="DamagedHelmet3D.glb" >

</cl-image>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlImgUp.BuildImageTag("DamagedHelmet3D.glb")

iOS (cloudinary 3.x):

imageView.cldSetImage(cloudinary.createUrl().generate("DamagedHelmet3D.glb")!, cloudinary: cloudinary)

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation().generate("DamagedHelmet3D.glb");

Kotlin (kotlin-url-gen 1.x):

cloudinary.image {
  publicId("DamagedHelmet3D.glb") 
}.generate()

Flutter (cloudinary_flutter 0.x):

cloudinary.image('DamagedHelmet3D.glb').transformation(Transformation());

Dart (cloudinary_dart 0.x):

cloudinary.image('DamagedHelmet3D.glb').transformation(Transformation());

Example 2: Deliver an FBX model as USDZ

USDZ (Universal Scene Description) is a file format for 3D models, introduced by Apple for its ARKit, to display 3D models on iPad, iPhone or Mac.

Deliver the foyer-table FBX model as a USDZ model by setting the fetch_format/format parameter to usdz, as follows:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin Flutter Dart All

url:

https://res.cloudinary.com/demo/image/upload/f_usdz/docs/foyer-table.fbxz

Ruby (cloudinary 1.x):

cl_image_tag("docs/foyer-table.fbxz", :fetch_format=>"usdz")

PHP (cloudinary_php 2.x):

(new ImageTag('docs/foyer-table.fbxz'))
  ->delivery(Delivery::format(
  Format::usdz()));

PHP (cloudinary_php 1.x (legacy)):

cl_image_tag("docs/foyer-table.fbxz", array("fetch_format"=>"usdz"))

Python (cloudinary 1.x):

CloudinaryImage("docs/foyer-table.fbxz").image(fetch_format="usdz")

Node.js (cloudinary 1.x):

cloudinary.image("docs/foyer-table.fbxz", {fetch_format: "usdz"})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation().fetchFormat("usdz")).imageTag("docs/foyer-table.fbxz");

JS (@cloudinary/url-gen 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("docs/foyer-table.fbxz").delivery(format(usdz()));

JS (cloudinary-core 2.x (legacy)):

cloudinary.imageTag('docs/foyer-table.fbxz', {fetchFormat: "usdz"}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.image("docs/foyer-table.fbxz", {fetch_format: "usdz"})

React (@cloudinary/react 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("docs/foyer-table.fbxz").delivery(format(usdz()));

React (cloudinary-react 1.x):

<Image publicId="docs/foyer-table.fbxz" >
  <Transformation fetchFormat="usdz" />
</Image>

Vue.js (@cloudinary/vue 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("docs/foyer-table.fbxz").delivery(format(usdz()));

Vue.js (cloudinary-vue 1.x (legacy)):

<cld-image public-id="docs/foyer-table.fbxz" >
  <cld-transformation fetch-format="usdz" />
</cld-image>

Angular (@cloudinary/ng 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryImage("docs/foyer-table.fbxz").delivery(format(usdz()));

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-image public-id="docs/foyer-table.fbxz" >
  <cl-transformation fetch-format="usdz">
  </cl-transformation>
</cl-image>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlImgUp.Transform(new Transformation().FetchFormat("usdz")).BuildImageTag("docs/foyer-table.fbxz")

iOS (cloudinary 3.x):

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFetchFormat("usdz")).generate("docs/foyer-table.fbxz")!, cloudinary: cloudinary)

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation().fetchFormat("usdz")).generate("docs/foyer-table.fbxz");

Kotlin (kotlin-url-gen 1.x):

cloudinary.image {
  publicId("docs/foyer-table.fbxz")
   delivery(Delivery.format(
  Format.usdz())) 
}.generate()

Flutter (cloudinary_flutter 0.x):

cloudinary.image('docs/foyer-table.fbxz').transformation(Transformation()
  .delivery(Delivery.format(
  Format.usdz())));

Dart (cloudinary_dart 0.x):

cloudinary.image('docs/foyer-table.fbxz').transformation(Transformation()
  .delivery(Delivery.format(
  Format.usdz())));

Changing the texture of a 3D model

You can replace the texture of a 3D model by using the swap_image effect. This effect takes two parameters, image and index. Set image to a file reference variable, initialized with the public ID of the new texture to use (any image). Set index to the index in the model to swap with.

In this example, the image at index 0 is replaced with the raindrops image that's in the docs folder:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin Flutter Dart All

url:

https://res.cloudinary.com/demo/image/upload/$new_ref:!docs:raindrops!/e_swap_image:image_$new;index_0/e_camera:zoom_0.9/dl_10,f_gif,fl_animated/c_fill,h_200,w_400/docs/CldLogo3D

Ruby (cloudinary 1.x):

cl_image_tag("docs/CldLogo3D", :transformation=>[
  {:variables=>[["$new", "ref:!docs:raindrops!"]]},
  {:effect=>"swap_image:image_$new;index_0"},
  {:effect=>"camera:zoom_0.9"},
  {:delay=>"10", :flags=>"animated", :fetch_format=>"gif"},
  {:height=>200, :width=>400, :crop=>"fill"}
  ])

PHP (cloudinary_php 2.x):

// This code example is not currently available.

PHP (cloudinary_php 1.x (legacy)):

cl_image_tag("docs/CldLogo3D", array("transformation"=>array(
  array("variables"=>array(array("$new", "ref:!docs:raindrops!"))),
  array("effect"=>"swap_image:image_$new;index_0"),
  array("effect"=>"camera:zoom_0.9"),
  array("delay"=>"10", "flags"=>"animated", "fetch_format"=>"gif"),
  array("height"=>200, "width"=>400, "crop"=>"fill")
  )))

Python (cloudinary 1.x):

CloudinaryImage("docs/CldLogo3D").image(transformation=[
  {'variables': [["$new", "ref:!docs:raindrops!"]]},
  {'effect': "swap_image:image_$new;index_0"},
  {'effect': "camera:zoom_0.9"},
  {'delay': "10", 'flags': "animated", 'fetch_format': "gif"},
  {'height': 200, 'width': 400, 'crop': "fill"}
  ])

Node.js (cloudinary 1.x):

cloudinary.image("docs/CldLogo3D", {transformation: [
  {variables: [["$new", "ref:!docs:raindrops!"]]},
  {effect: "swap_image:image_$new;index_0"},
  {effect: "camera:zoom_0.9"},
  {delay: "10", flags: "animated", fetch_format: "gif"},
  {height: 200, width: 400, crop: "fill"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .variables(variable("$new","ref:!docs:raindrops!")).chain()
  .effect("swap_image:image_$new;index_0").chain()
  .effect("camera:zoom_0.9").chain()
  .delay("10").flags("animated").fetchFormat("gif").chain()
  .height(200).width(400).crop("fill")).imageTag("docs/CldLogo3D");

JS (@cloudinary/url-gen 1.x):

// This code example is not currently available.

JS (cloudinary-core 2.x (legacy)):

cloudinary.imageTag('docs/CldLogo3D', {transformation: [
  {variables: [["$new", "ref:!docs:raindrops!"]]},
  {effect: "swap_image:image_$new;index_0"},
  {effect: "camera:zoom_0.9"},
  {delay: "10", flags: "animated", fetchFormat: "gif"},
  {height: 200, width: 400, crop: "fill"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.image("docs/CldLogo3D", {transformation: [
  {variables: [["$new", "ref:!docs:raindrops!"]]},
  {effect: "swap_image:image_$new;index_0"},
  {effect: "camera:zoom_0.9"},
  {delay: "10", flags: "animated", fetch_format: "gif"},
  {height: 200, width: 400, crop: "fill"}
  ]})

React (@cloudinary/react 1.x):

// This code example is not currently available.

React (cloudinary-react 1.x):

<Image publicId="docs/CldLogo3D" >
  <Transformation variables={[["$new", "ref:!docs:raindrops!"]]} />
  <Transformation effect="swap_image:image_$new;index_0" />
  <Transformation effect="camera:zoom_0.9" />
  <Transformation delay="10" flags="animated" fetchFormat="gif" />
  <Transformation height="200" width="400" crop="fill" />
</Image>

Vue.js (@cloudinary/vue 1.x):

// This code example is not currently available.

Vue.js (cloudinary-vue 1.x (legacy)):

<cld-image public-id="docs/CldLogo3D" >
  <cld-transformation :variables="[['$new', 'ref:!docs:raindrops!']]" />
  <cld-transformation effect="swap_image:image_$new;index_0" />
  <cld-transformation effect="camera:zoom_0.9" />
  <cld-transformation delay="10" flags="animated" fetch-format="gif" />
  <cld-transformation height="200" width="400" crop="fill" />
</cld-image>

Angular (@cloudinary/ng 1.x):

// This code example is not currently available.

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-image public-id="docs/CldLogo3D" >
  <cl-transformation variables="[['$new', 'ref:!docs:raindrops!']]">
  </cl-transformation>
  <cl-transformation effect="swap_image:image_$new;index_0">
  </cl-transformation>
  <cl-transformation effect="camera:zoom_0.9">
  </cl-transformation>
  <cl-transformation delay="10" flags="animated" fetch-format="gif">
  </cl-transformation>
  <cl-transformation height="200" width="400" crop="fill">
  </cl-transformation>
</cl-image>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Variables("$new", ref:!docs:raindrops!).Chain()
  .Effect("swap_image:image_$new;index_0").Chain()
  .Effect("camera:zoom_0.9").Chain()
  .Delay("10").Flags("animated").FetchFormat("gif").Chain()
  .Height(200).Width(400).Crop("fill")).BuildImageTag("docs/CldLogo3D")

iOS (cloudinary 3.x):

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .chain()
  .setEffect("swap_image:image_$new;index_0").chain()
  .setEffect("camera:zoom_0.9").chain()
  .setDelay("10").setFlags("animated").setFetchFormat("gif").chain()
  .setHeight(200).setWidth(400).setCrop("fill")).generate("docs/CldLogo3D")!, cloudinary: cloudinary)

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .variables(variable("$new","ref:!docs:raindrops!")).chain()
  .effect("swap_image:image_$new;index_0").chain()
  .effect("camera:zoom_0.9").chain()
  .delay("10").flags("animated").fetchFormat("gif").chain()
  .height(200).width(400).crop("fill")).generate("docs/CldLogo3D");

Kotlin (kotlin-url-gen 1.x):

// This code example is not currently available.

Flutter (cloudinary_flutter 0.x):

// This code example is not currently available.

Dart (cloudinary_dart 0.x):

// This code example is not currently available.

You can also use a base64 encoded URL of a remote image as the texture by setting the file reference variable to !fetch:<encoded URL>!. For example:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin Flutter Dart All

url:

https://res.cloudinary.com/demo/image/upload/$new_ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!/e_swap_image:image_$new;index_0/e_camera:zoom_0.9/dl_10,f_gif,fl_animated/c_fill,h_200,w_400/docs/CldLogo3D

Ruby (cloudinary 1.x):

cl_image_tag("docs/CldLogo3D", :transformation=>[
  {:variables=>[["$new", "ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!"]]},
  {:effect=>"swap_image:image_$new;index_0"},
  {:effect=>"camera:zoom_0.9"},
  {:delay=>"10", :flags=>"animated", :fetch_format=>"gif"},
  {:height=>200, :width=>400, :crop=>"fill"}
  ])

PHP (cloudinary_php 2.x):

// This code example is not currently available.

PHP (cloudinary_php 1.x (legacy)):

cl_image_tag("docs/CldLogo3D", array("transformation"=>array(
  array("variables"=>array(array("$new", "ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!"))),
  array("effect"=>"swap_image:image_$new;index_0"),
  array("effect"=>"camera:zoom_0.9"),
  array("delay"=>"10", "flags"=>"animated", "fetch_format"=>"gif"),
  array("height"=>200, "width"=>400, "crop"=>"fill")
  )))

Python (cloudinary 1.x):

CloudinaryImage("docs/CldLogo3D").image(transformation=[
  {'variables': [["$new", "ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!"]]},
  {'effect': "swap_image:image_$new;index_0"},
  {'effect': "camera:zoom_0.9"},
  {'delay': "10", 'flags': "animated", 'fetch_format': "gif"},
  {'height': 200, 'width': 400, 'crop': "fill"}
  ])

Node.js (cloudinary 1.x):

cloudinary.image("docs/CldLogo3D", {transformation: [
  {variables: [["$new", "ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!"]]},
  {effect: "swap_image:image_$new;index_0"},
  {effect: "camera:zoom_0.9"},
  {delay: "10", flags: "animated", fetch_format: "gif"},
  {height: 200, width: 400, crop: "fill"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .variables(variable("$new","ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!")).chain()
  .effect("swap_image:image_$new;index_0").chain()
  .effect("camera:zoom_0.9").chain()
  .delay("10").flags("animated").fetchFormat("gif").chain()
  .height(200).width(400).crop("fill")).imageTag("docs/CldLogo3D");

JS (@cloudinary/url-gen 1.x):

// This code example is not currently available.

JS (cloudinary-core 2.x (legacy)):

cloudinary.imageTag('docs/CldLogo3D', {transformation: [
  {variables: [["$new", "ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!"]]},
  {effect: "swap_image:image_$new;index_0"},
  {effect: "camera:zoom_0.9"},
  {delay: "10", flags: "animated", fetchFormat: "gif"},
  {height: 200, width: 400, crop: "fill"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.image("docs/CldLogo3D", {transformation: [
  {variables: [["$new", "ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!"]]},
  {effect: "swap_image:image_$new;index_0"},
  {effect: "camera:zoom_0.9"},
  {delay: "10", flags: "animated", fetch_format: "gif"},
  {height: 200, width: 400, crop: "fill"}
  ]})

React (@cloudinary/react 1.x):

// This code example is not currently available.

React (cloudinary-react 1.x):

<Image publicId="docs/CldLogo3D" >
  <Transformation variables={[["$new", "ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!"]]} />
  <Transformation effect="swap_image:image_$new;index_0" />
  <Transformation effect="camera:zoom_0.9" />
  <Transformation delay="10" flags="animated" fetchFormat="gif" />
  <Transformation height="200" width="400" crop="fill" />
</Image>

Vue.js (@cloudinary/vue 1.x):

// This code example is not currently available.

Vue.js (cloudinary-vue 1.x (legacy)):

<cld-image public-id="docs/CldLogo3D" >
  <cld-transformation :variables="[['$new', 'ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!']]" />
  <cld-transformation effect="swap_image:image_$new;index_0" />
  <cld-transformation effect="camera:zoom_0.9" />
  <cld-transformation delay="10" flags="animated" fetch-format="gif" />
  <cld-transformation height="200" width="400" crop="fill" />
</cld-image>

Angular (@cloudinary/ng 1.x):

// This code example is not currently available.

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-image public-id="docs/CldLogo3D" >
  <cl-transformation variables="[['$new', 'ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!']]">
  </cl-transformation>
  <cl-transformation effect="swap_image:image_$new;index_0">
  </cl-transformation>
  <cl-transformation effect="camera:zoom_0.9">
  </cl-transformation>
  <cl-transformation delay="10" flags="animated" fetch-format="gif">
  </cl-transformation>
  <cl-transformation height="200" width="400" crop="fill">
  </cl-transformation>
</cl-image>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Variables("$new", ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!).Chain()
  .Effect("swap_image:image_$new;index_0").Chain()
  .Effect("camera:zoom_0.9").Chain()
  .Delay("10").Flags("animated").FetchFormat("gif").Chain()
  .Height(200).Width(400).Crop("fill")).BuildImageTag("docs/CldLogo3D")

iOS (cloudinary 3.x):

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .chain()
  .setEffect("swap_image:image_$new;index_0").chain()
  .setEffect("camera:zoom_0.9").chain()
  .setDelay("10").setFlags("animated").setFetchFormat("gif").chain()
  .setHeight(200).setWidth(400).setCrop("fill")).generate("docs/CldLogo3D")!, cloudinary: cloudinary)

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .variables(variable("$new","ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!")).chain()
  .effect("swap_image:image_$new;index_0").chain()
  .effect("camera:zoom_0.9").chain()
  .delay("10").flags("animated").fetchFormat("gif").chain()
  .height(200).width(400).crop("fill")).generate("docs/CldLogo3D");

Kotlin (kotlin-url-gen 1.x):

// This code example is not currently available.

Flutter (cloudinary_flutter 0.x):

// This code example is not currently available.

Dart (cloudinary_dart 0.x):

// This code example is not currently available.

AR/3D Viewer

You may be interested in using our AR/3D Viewer to display your models. Learn more...

✔️ Feedback sent!

✖️

Error

Unfortunately there's been an error sending your feedback.

Rate this page: