Intégration d'image sur une autre

up merci à ceux qui m'aideront

Alors une version simple mais pas opti:

Tu charge la première photo, tu retires la première photo, tu charges la deuxième photo, tu retires la deuxieme photo, et ainsi de suite en boucle infinie pour donner l'impression que ça tourne

Et la version qui demande de savoir faire de la modélisation 3d mais au moins ce sera propre:

Tu modélises ton mug sur Blender ou autre logiciel de modélisation 3d, tu installes ThreeJS dans ton projet, tu charges la scene de ton mug avec sa rotation et c'est bon :)

Merci pour ta réponse
Je ne suis pas sur que cette méthode me corresponde, ça à l'air bien compliqué pour ce que je veux faire
J'ai déjà une 20aine d'image du mug qui tourne sur lui même, la difficulté est d'intégrer sur chaque face du mug une image qu'un utilisateur veut importer, et qu'elle se calque bien en fonction de l'orientation du mug

Mmmh alors dans ce cas le système des photos qui tournent avec un timer ce serait compliqué, le problème de calque sera toujours présent, ça ressemble beaucoup a une vue 3d d'un mug le système voulu, le mieux reste de passer par ThreeJS

Pour la partie modélisation, tu peux trouver des modèles de mug sur internet, il y a celui la par exemple: https://sketchfab.com/3d-models/plain-mug-19c8fe5702b544d0a1409d3dac1cf90e (faut la version glTF ou source OBJ, a voir le quel sera le plus simple)

Et pour la scene tu as une scene préconfigurée:

https://gist.github.com/charliegerard/72d7a9cce283feaa46c1ba889e2e17a5

Tu n'a plus qu'a charger le modèle ajouter un event pour y placer l'image et à l'ajouter à la scène :p

bon et oublies pas d'importer ThreeJS quand même x) npm install three et import THREE from 'three'

A part ça je ne vois pas d'autre solution :/

Pour le site que tu as montré, alors ont dirait qu'il utilise justement de la modélisation 3d, il charge le modèle 3D et y colle l'image, par contre au lieux de mettre directement la scene dans un canvas il met en cache des screen du modèle 3d sous tous les angles puis il détruit le modèle 3D

Et si c'est trop compliqué, faudra peut être trouver un service sur internet qui propose ça (peut être qu'il existe un service gratuit, à voir)

Super merci beaucoup @popotte, je vais voir ce que je peux faire ! :)

Re !
J'ai avancé sur le projet, mais j'avoue bloquer un peu sur l'intégration de l'image sur le modèle 3D
Voici le code que je possède actuellement

Je n'ai aucune difficulté à importer une image, le problème est de la calquer sur le mug

<<script type="module">
import * as THREE from 'https://cdn.skypack.dev/three@0.129.0/build/three.module.js';
import { OBJLoader } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/OBJLoader.js';

let container;

let camera, scene, renderer;

let mouseX = 0, mouseY = 0;

let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;

let object;

init();
animate();

function init() {

    container = document.getElementById('container');
    document.body.appendChild(container);

    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 200;

    // scene

    scene = new THREE.Scene();

    const ambientLight = new THREE.AmbientLight(0xD3D3D3, 0.8);
    scene.add(ambientLight);

    const pointLight = new THREE.PointLight(0xD3D3D3, 0.4);
    camera.add(pointLight);
    scene.add(camera);

    // manager

    function loadModel() {
        object.position.y = -50;
        scene.add(object);

    }

    const manager = new THREE.LoadingManager(loadModel);

    manager.onProgress = function (item, loaded, total) {

        console.log(item, loaded, total);

    };

    function onProgress(xhr) {

        if (xhr.lengthComputable) {

            const percentComplete = xhr.loaded / xhr.total * 100;
            console.log('model ' + Math.round(percentComplete, 2) + '% downloaded');

        }
    }

    function onError() {
    }

    const loader = new OBJLoader(manager);
    loader.load('http://localhost/img/untitled.obj', function (obj) {

        object = obj;

    }, onProgress, onError);

    //

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);

    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);

    document.addEventListener('mousemove', onDocumentMouseMove);

    //
}

function onWindowResize() {

    windowHalfX = 250;

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.autoClear = false; // to allow overlay

    renderer.setSize(window.innerWidth, window.innerHeight);

}

function onDocumentMouseMove(event) {

    mouseX = (event.clientX - windowHalfX);

}

//

function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {

    camera.position.x += (mouseX - camera.position.x);
    camera.lookAt(scene.position);

    renderer.render(scene, camera);

}

</script>
<div id="container"></div>