Spin/rotate images in a gallery?

Ask the community
1

I work with an artist who has her portfolio on her website. She creates a lot of 3D art, and would like to have her images spin and rotate so that viewers can see the dimension to the pieces, and view all sides. Is this possible with Wix? Thanks!

2

Everything can be done! There are no boundaries, even not on a Wix-Webpage.

Ok, what kind of options do you have?
Well, this will depend on what format you will use!

a) IMAGES like: png, jpg, bmp, jpeg and so on
b) prepared MODELS (already in 3D)

Meaning, if you really want to generate a cool stunning looking 3D-Presentation of your stuff (no matter waht, it could be a 3D-ELEPHANT, or CAR, or TREE), you should first render your PHOTOS/IMAGES by a 3D-rendering tool, which would generate 3D-Models out of your pics/images —> from 2D to 3D <—

I would suggest → threeJS ←

And here another option: Using Sketchfab (Simplest and Professional)

  1. Prepare the 3D Model
  • Export the 3D artwork from your software (Blender, Maya, etc.) in a compatible format: .glb, .gltf, .obj.
  • Make sure textures and lighting are included.
  1. Upload to Sketchfab
  • Go to Sketchfab.
  • Create a free or paid account.
  • Upload your 3D model.
  • In the 3D Settings, you can set:
    • Auto-rotate (optional)
    • Lighting
    • Camera angles
  1. Get the Embed Code
  • After uploading, click Embed.
  • Copy the iframe code (it looks like <iframe src="https://sketchfab.com/models/XXXX/embed" width="640" height="480"></iframe>).
  1. Add to Wix
  • Open your Wix Editor.
  • Go to the page where you want the model.
  • Click Add → Embed → Embed a Widget → HTML iframe.
  • Paste the Sketchfab iframe code.
  • Adjust the width and height to fit your design.
  1. Preview and Test
  • Preview your page.
  • Users should now be able to rotate, zoom, and pan the model interactively.

But back to ThreeJS: Using Wix Velo + three.js (Custom Interactive 3D)

This is a more advanced, fully customizable approach:

  1. Enable Velo by Wix
  • In the Wix Editor, go to Dev Mode → Enable Velo.
  1. Add an HTML Canvas
  • Go to Add → Embed → Custom Embeds → HTML iframe.
  • This will hold your 3D canvas.
  1. Include three.js
  • In the HTML iframe, include three.js via CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>
  1. Load the 3D Model
  • Use three.js GLTFLoader to load your .glb or .gltf file:
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const loader = new THREE.GLTFLoader();
loader.load('path/to/your/model.glb', function(gltf){
    scene.add(gltf.scene);
});

camera.position.z = 5;

function animate() {
    requestAnimationFrame(animate);
    scene.rotation.y += 0.01; // auto-rotate
    renderer.render(scene, camera);
}
animate();
  • Replace 'path/to/your/model.glb' with your uploaded file URL (host it in Wix Media Manager).
  1. Add Controls (Optional)
  • For manual rotation and zoom, add OrbitControls:
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.update();
  1. Adjust Styling
  • Make the iframe responsive by setting width: 100%; height: 100% in Wix settings.

However, in both of cases you will first need to convert your images into 3D (glb) files.
Those glbs can be used by ThreeJS to visualize your pic in 3D, turning it interactively 360° around all of axis (x,y,z)

And here a smal —>HOW2 <— to generate those mentioned glb-files…

Here’s a step-by-step guide to convert existing 3D artwork into .glb files suitable for Wix embeds:

1. Using Blender (Free & Popular)

Blender can take almost any 3D file and export it as .glb or .gltf.

Steps:

  1. Download & Install Blender
  1. Import Your 3D Model
  • Open Blender → File → Import → select your model format (.obj, .fbx, etc.).
  1. Check Materials & Textures
  • Ensure all textures are applied correctly in Blender.
  • For best results, pack textures: File → External Data → Pack All Into .blend
  1. Set Scene & Orientation
  • Position the model in front of the camera.
  • Make sure the model is centered and upright.
  1. Export as .glb
  • File → Export → glTF 2.0 (.glb/.gltf)
  • Choose glb (Binary) format (single file, easier to embed).
  • Check Include → Selected Objects (if you only want the model).
  • Check Transform → +Y Up for correct orientation.
  • Click Export GLB

2. Using Online Converters (Quick & Simple)

If you already have .obj or .fbx files, you can convert online:

Steps:

  1. Upload your 3D file.
  2. Convert to .glb.
  3. Download the .glb file and use it in Sketchfab or three.js.

3. Using Sketchfab (Direct Upload)

Sketchfab can also take .obj, .fbx, .blend, etc., and host it directly. You don’t have to manually export .glb unless you want a self-hosted file.

  • Upload the original file.
  • Sketchfab automatically converts it to a web-friendly 3D format.
  • You can then embed it on Wix using the iframe.

Gemini_Generated_Image_o6en98o6en98o6en
Gemini_Generated_Image_o6en98o6en98o6en896×1152 42.9 KB

Good luck!

3

How far is the 3D-Gallary ?

Just working on an APP, which can transform 2D images insto 3D mesh models.

If interested –> send a message.