{"id":1192,"date":"2024-09-04T18:28:17","date_gmt":"2024-09-04T16:28:17","guid":{"rendered":"https:\/\/pacific-webtools.com\/web-extractor\/?p=1192"},"modified":"2024-09-07T15:23:46","modified_gmt":"2024-09-07T13:23:46","slug":"generateur-dourson-3d-ultra-realiste-en-three-js","status":"publish","type":"post","link":"https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/","title":{"rendered":"G\u00e9n\u00e9rateur d&rsquo;Ourson 3D Ultra R\u00e9aliste en Three.js"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1192\" class=\"elementor elementor-1192\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a1c52ee e-con-full e-flex e-con e-parent\" data-id=\"a1c52ee\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-47eaa7e elementor-widget elementor-widget-html\" data-id=\"47eaa7e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>G\u00e9n\u00e9rateur d'Ourson 3D Ultra R\u00e9aliste<\/title>\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/dat-gui\/0.7.7\/dat.gui.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/loaders\/GLTFLoader.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/controls\/OrbitControls.js\"><\/script>\n<style>\n    body, html {\n        margin: 0;\n        padding: 0;\n        font-family: Arial, sans-serif;\n        height: 100%;\n        overflow-x: hidden;\n        overflow-y: auto;\n    }\n    .container {\n        display: flex;\n        min-height: 100%;\n        flex-direction: row;\n        width: 100vw;\n        max-width: 100%;\n    }\n    .sidebar {\n        width: 350px;\n        background-color: #3295d4;\n        color: #fff;\n        padding: 20px;\n        overflow-y: auto;\n        flex: 0 0 auto;\n        transition: width 0.3s ease-in-out, margin-left 0.3s ease-in-out;\n        display: flex;\n        flex-direction: column;\n        height: 100vh;\n        position: sticky;\n        top: 0;\n    }\n    .sidebar-content {\n        flex-grow: 1;\n        overflow-y: auto;\n        display: flex;\n        flex-direction: column;\n    }\n    .sidebar.collapsed {\n        width: 50px;\n        padding: 0;\n    }\n    .main-content {\n        flex: 1;\n        background-color: #000000;\n        position: relative;\n        overflow: hidden;\n        min-height: 100vh;\n        display: flex;\n        flex-direction: column;\n    }\n    .control-group {\n        margin-bottom: 15px;\n    }\n    label {\n        display: block;\n        margin-bottom: 5px;\n    }\n    select, input[type=\"range\"], input[type=\"color\"], input[type=\"text\"], input[type=\"number\"], input[type=\"checkbox\"] {\n        width: 100%;\n        margin-bottom: 10px;\n    }\n    .code-section {\n        background-color: #16213e;\n        padding: 10px;\n        border-radius: 5px;\n        margin-top: 20px;\n        flex-shrink: 0;\n        overflow: auto;\n        cursor: pointer;\n        height: 200px;\n    }\n    .code-section pre {\n        color: #fff;\n        margin: 0;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n    }\n    @media (max-width: 767px) {\n        .container {\n            flex-direction: row;\n        }\n        .sidebar, .main-content {\n            width: 50%;\n            height: auto;\n        }\n        .sidebar {\n            position: static;\n            height: auto;\n        }\n        .main-content {\n            min-height: auto;\n        }\n    }\n    @media (min-width: 768px) {\n        .code-section {\n            height: 400px;\n        }\n    }\n    #toggleSidebar {\n        position: absolute;\n        top: 10px;\n        right: 10px;\n        z-index: 1000;\n        background-color: #16213e;\n        color: white;\n        border: none;\n        padding: 10px;\n        cursor: pointer;\n        transition: transform 0.3s ease-in-out;\n    }\n    .sidebar.collapsed #toggleSidebar {\n        transform: rotate(180deg);\n    }\n    .sidebar-content {\n        transition: opacity 0.3s ease-in-out;\n    }\n    .sidebar.collapsed .sidebar-content {\n        opacity: 0;\n        pointer-events: none;\n    }\n    #canvas-container {\n        width: 100%;\n        height: 100%;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n    .notification {\n        position: fixed;\n        bottom: 20px;\n        left: 50%;\n        transform: translateX(-50%);\n        background-color: #4CAF50;\n        color: white;\n        padding: 15px;\n        border-radius: 5px;\n        display: none;\n        z-index: 1000;\n    }\n    .how-it-works {\n        background-color: #f0f0f0;\n        padding: 4rem 2rem;\n        text-align: center;\n    }\n    .how-it-works h2 {\n        color: #3295d4;\n        margin-bottom: 3rem;\n        font-size: 2.5rem;\n        position: relative;\n        display: inline-block;\n    }\n    .how-it-works h2::after {\n        content: '';\n        position: absolute;\n        width: 50%;\n        height: 2px;\n        background-color: #3295d4;\n        bottom: -10px;\n        left: 25%;\n        transition: width 0.3s ease-in-out;\n    }\n    .how-it-works h2:hover::after {\n        width: 80%;\n        left: 10%;\n    }\n    .card-container {\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: center;\n        gap: 2rem;\n    }\n    .card {\n        background-color: white;\n        border-radius: 8px;\n        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n        padding: 2rem;\n        width: 300px;\n        text-align: center;\n        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;\n    }\n    .card:hover {\n        transform: translateY(-10px);\n        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\n    }\n    .card i {\n        font-size: 3rem;\n        color: #3295d4;\n        margin-bottom: 1.5rem;\n        transition: transform 0.3s ease-in-out;\n    }\n    .card:hover i {\n        transform: scale(1.2);\n    }\n    .card h3 {\n        color: #333;\n        margin-bottom: 1.5rem;\n        font-size: 1.5rem;\n    }\n    .card p {\n        color: #666;\n        font-size: 0.9rem;\n        line-height: 1.6;\n    }\n    @media (max-width: 767px) {\n        .card-container {\n            flex-direction: column;\n            align-items: center;\n        }\n        \n        .card {\n            width: 100%;\n            max-width: 300px;\n        }\n    }\n<\/style>\n<\/head>\n<body>\n<div class=\"container\">\n    <div id=\"sidebar\" class=\"sidebar\">\n        <button id=\"toggleSidebar\"><i class=\"fas fa-chevron-left\"><\/i><\/button>\n        <div class=\"sidebar-content\">\n            <div id=\"controls\">\n                <div class=\"control-group\">\n                    <label for=\"furColor\">Couleur du pelage:<\/label>\n                    <input type=\"color\" id=\"furColor\" value=\"#8B4513\">\n                <\/div>\n                <div class=\"control-group\">\n                    <label for=\"furLength\">Longueur du pelage:<\/label>\n                    <input type=\"range\" id=\"furLength\" min=\"0.1\" max=\"2\" step=\"0.1\" value=\"1\">\n                <\/div>\n                <div class=\"control-group\">\n                    <label for=\"eyeStyle\">Style des yeux:<\/label>\n                    <select id=\"eyeStyle\">\n                        <option value=\"simple\">Simple<\/option>\n                        <option value=\"detailed\">D\u00e9taill\u00e9<\/option>\n                    <\/select>\n                <\/div>\n                <div class=\"control-group\">\n                    <label for=\"eyeColor\">Couleur des yeux:<\/label>\n                    <input type=\"color\" id=\"eyeColor\" value=\"#000000\">\n                <\/div>\n                <div class=\"control-group\" id=\"pupilColorGroup\" style=\"display: none;\">\n                    <label for=\"pupilColor\">Couleur de la pupille:<\/label>\n                    <input type=\"color\" id=\"pupilColor\" value=\"#000000\">\n                <\/div>\n                <div class=\"control-group\">\n                    <label for=\"pupilSize\">Taille des pupilles:<\/label>\n                    <input type=\"range\" id=\"pupilSize\" min=\"0.1\" max=\"1\" step=\"0.1\" value=\"0.5\">\n                <\/div>\n                <div class=\"control-group\">\n                    <label for=\"noseColor\">Couleur du nez:<\/label>\n                    <input type=\"color\" id=\"noseColor\" value=\"#FFC0CB\">\n                <\/div>\n                <div class=\"control-group\">\n                    <label for=\"bearSize\">Taille de l'ourson:<\/label>\n                    <input type=\"range\" id=\"bearSize\" min=\"0.5\" max=\"2\" step=\"0.1\" value=\"1\">\n                <\/div>\n                <div class=\"control-group\">\n                    <label for=\"mouthStyle\">Style de bouche:<\/label>\n                    <select id=\"mouthStyle\">\n                        <option value=\"none\">Aucun<\/option>\n                        <option value=\"tongue\">Langue tir\u00e9e<\/option>\n                    <\/select>\n                <\/div>\n                <div class=\"control-group\">\n                    <label for=\"enableRotation\">\n                        <input type=\"checkbox\" id=\"enableRotation\" checked>\n                        Activer la rotation avec la souris\n                    <\/label>\n                <\/div>\n                <div class=\"control-group\">\n                    <label for=\"transparentBackground\">\n                        <input type=\"checkbox\" id=\"transparentBackground\">\n                        Fond transparent\n                    <\/label>\n                <\/div>\n                <div class=\"control-group\">\n                    <label for=\"animationStyle\">Style d'animation:<\/label>\n                    <select id=\"animationStyle\">\n                        <option value=\"none\">Aucune<\/option>\n                        <option value=\"dance\">Danse<\/option>\n                        <option value=\"jump\">Saut<\/option>\n                    <\/select>\n                <\/div>\n                <div class=\"control-group\">\n                    <label for=\"accessory\">Accessoire:<\/label>\n                    <select id=\"accessory\">\n                        <option value=\"none\">Aucun<\/option>\n                        <option value=\"glasses\">Lunettes<\/option>\n                        <option value=\"bowtie\">N\u0153ud papillon<\/option>\n                    <\/select>\n                <\/div>\n                <div id=\"glassesControls\" style=\"display: none;\">\n                    <div class=\"control-group\">\n                        <label for=\"glassesColor\">Couleur des lunettes:<\/label>\n                        <input type=\"color\" id=\"glassesColor\" value=\"#000000\">\n                    <\/div>\n                    <div class=\"control-group\">\n                        <label for=\"glassesSize\">Taille des lunettes:<\/label>\n                        <input type=\"range\" id=\"glassesSize\" min=\"0.5\" max=\"1.5\" step=\"0.1\" value=\"1\">\n                    <\/div>\n                <\/div>\n                <div id=\"bowtieControls\" style=\"display: none;\">\n                    <div class=\"control-group\">\n                        <label for=\"bowtieColor\">Couleur du n\u0153ud papillon:<\/label>\n                        <input type=\"color\" id=\"bowtieColor\" value=\"#FF0000\">\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"code-section\" id=\"codeSection\">\n                <pre id=\"generatedCode\"><\/pre>\n            <\/div>\n        <\/div>\n    <\/div>\n    <div id=\"preview\" class=\"main-content\">\n        <div id=\"canvas-container\"><\/div>\n    <\/div>\n<\/div>\n<div class=\"notification\" id=\"notification\">Code copi\u00e9 dans le presse-papiers!<\/div>\n<div class=\"how-it-works\">\n    <h2>Comment \u00e7a marche ?<\/h2>\n    <div class=\"card-container\">\n        <div class=\"card\">\n            <i class=\"fas fa-code\"><\/i>\n            <h3>Int\u00e9gration du code<\/h3>\n            <p>Pour int\u00e9grer l'animation 3D Three.js, commencez par inclure la biblioth\u00e8que Three.js dans votre projet HTML. Utilisez une balise script pour charger Three.js depuis un CDN ou votre serveur local. Ensuite, cr\u00e9ez un conteneur HTML o\u00f9 l'animation sera rendue. Initialisez la sc\u00e8ne, la cam\u00e9ra et le rendu Three.js dans votre code JavaScript. D\u00e9finissez les dimensions de votre animation et ajoutez des \u00e9v\u00e9nements pour g\u00e9rer le redimensionnement de la fen\u00eatre.<\/p>\n        <\/div>\n        <div class=\"card\">\n            <i class=\"fas fa-cube\"><\/i>\n            <h3>Cr\u00e9ation de la sc\u00e8ne 3D<\/h3>\n            <p>Cr\u00e9ez votre sc\u00e8ne 3D en ajoutant des objets, des lumi\u00e8res et des mat\u00e9riaux. Utilisez les g\u00e9om\u00e9tries Three.js pour d\u00e9finir la forme de vos objets, comme des sph\u00e8res ou des cubes. Appliquez des mat\u00e9riaux pour d\u00e9finir l'apparence des objets, en ajustant les couleurs, les textures et les propri\u00e9t\u00e9s de r\u00e9flexion. Ajoutez des sources de lumi\u00e8re pour \u00e9clairer votre sc\u00e8ne. Positionnez la cam\u00e9ra pour obtenir le point de vue souhait\u00e9 sur votre sc\u00e8ne 3D.<\/p>\n        <\/div>\n        <div class=\"card\">\n            <i class=\"fas fa-sliders-h\"><\/i>\n            <h3>Personnalisation<\/h3>\n            <p>Personnalisez votre animation en ajoutant des contr\u00f4les interactifs. Utilisez des biblioth\u00e8ques comme dat.GUI pour cr\u00e9er des interfaces utilisateur permettant de modifier les propri\u00e9t\u00e9s des objets en temps r\u00e9el. Impl\u00e9mentez des fonctions pour mettre \u00e0 jour les mat\u00e9riaux, les positions ou les \u00e9chelles des objets en fonction des entr\u00e9es de l'utilisateur. Ajoutez des animations en utilisant la classe AnimationMixer de Three.js pour cr\u00e9er des mouvements fluides et des transitions entre diff\u00e9rents \u00e9tats de votre sc\u00e8ne 3D.<\/p>\n        <\/div>\n        <div class=\"card\">\n            <i class=\"fas fa-mobile-alt\"><\/i>\n            <h3>Responsivit\u00e9<\/h3>\n            <p>Assurez-vous que votre animation 3D est responsive et s'adapte \u00e0 diff\u00e9rentes tailles d'\u00e9cran. Utilisez des \u00e9v\u00e9nements de redimensionnement pour ajuster la taille du rendu et le rapport d'aspect de la cam\u00e9ra lorsque la fen\u00eatre du navigateur change de taille. Optimisez les performances en ajustant la qualit\u00e9 du rendu ou la complexit\u00e9 des objets en fonction des capacit\u00e9s de l'appareil. Consid\u00e9rez l'utilisation de contr\u00f4les tactiles pour les appareils mobiles, en impl\u00e9mentez des gestionnaires d'\u00e9v\u00e9nements tactiles pour la rotation et le zoom de la sc\u00e8ne.<\/p>\n        <\/div>\n    <\/div>\n<\/div>\n<script>\nlet scene, camera, renderer, bear, eyeL, eyeR, pupilL, pupilR, nose, mouth, body;\nlet furMaterial, eyeMaterial, pupilMaterial, noseMaterial, mouthMaterial;\nlet controls;\nlet animationMixer, animationAction;\nlet accessory;\n\nfunction init() {\n    scene = new THREE.Scene();\n    camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);\n    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });\n    renderer.setSize(window.innerWidth, window.innerHeight);\n    document.getElementById('canvas-container').appendChild(renderer.domElement);\n\n    const light = new THREE.PointLight(0xffffff, 1);\n    light.position.set(5, 5, 5);\n    scene.add(light);\n\n    const ambientLight = new THREE.AmbientLight(0x404040);\n    scene.add(ambientLight);\n\n    camera.position.z = 5;\n\n    controls = new THREE.OrbitControls(camera, renderer.domElement);\n    controls.enableDamping = true;\n    controls.dampingFactor = 0.25;\n    controls.screenSpacePanning = false;\n    controls.maxPolarAngle = Math.PI \/ 2;\n    controls.enabled = true;\n\n    controls.addEventListener('change', updateGeneratedCode);\n\n    createBear();\n    centerBear();\n    animate();\n\n    window.addEventListener('resize', onWindowResize, false);\n}\n\nfunction createBear() {\n    const bodyGeometry = new THREE.SphereGeometry(1, 32, 32);\n    furMaterial = new THREE.MeshStandardMaterial({ \n        color: 0x8B4513,\n        roughness: 0.8,\n        metalness: 0.2\n    });\n    bear = new THREE.Group();\n    body = new THREE.Mesh(bodyGeometry, furMaterial);\n    bear.add(body);\n    scene.add(bear);\n\n    createEyes();\n\n    const noseGeometry = new THREE.SphereGeometry(0.1, 32, 32);\n    noseMaterial = new THREE.MeshPhongMaterial({ color: 0xFFC0CB });\n    nose = new THREE.Mesh(noseGeometry, noseMaterial);\n    nose.position.set(0, 0.2, 1);\n    bear.add(nose);\n\n    const earGeometry = new THREE.SphereGeometry(0.2, 32, 32);\n    const earL = new THREE.Mesh(earGeometry, furMaterial);\n    const earR = new THREE.Mesh(earGeometry, furMaterial);\n    earL.position.set(-0.7, 0.7, 0);\n    earR.position.set(0.7, 0.7, 0);\n    bear.add(earL);\n    bear.add(earR);\n\n    mouthMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });\n    updateMouth('none');\n\n    const torsoGeometry = new THREE.SphereGeometry(0.8, 32, 32);\n    const torso = new THREE.Mesh(torsoGeometry, furMaterial);\n    torso.position.set(0, -1.2, 0);\n    bear.add(torso);\n\n    const armGeometry = new THREE.SphereGeometry(0.3, 32, 32);\n    const armL = new THREE.Mesh(armGeometry, furMaterial);\n    const armR = new THREE.Mesh(armGeometry, furMaterial);\n    armL.position.set(-0.9, -1, 0);\n    armR.position.set(0.9, -1, 0);\n    bear.add(armL);\n    bear.add(armR);\n\n    const legGeometry = new THREE.SphereGeometry(0.4, 32, 32);\n    const legL = new THREE.Mesh(legGeometry, furMaterial);\n    const legR = new THREE.Mesh(legGeometry, furMaterial);\n    legL.position.set(-0.5, -2.2, 0);\n    legR.position.set(0.5, -2.2, 0);\n    bear.add(legL);\n    bear.add(legR);\n\n    animationMixer = new THREE.AnimationMixer(bear);\n}\n\nfunction createEyes() {\n    const eyeGeometry = new THREE.SphereGeometry(0.15, 32, 32);\n    eyeMaterial = new THREE.MeshPhongMaterial({ color: 0x000000 });  \/\/ Changed to black\n    eyeL = new THREE.Mesh(eyeGeometry, eyeMaterial);\n    eyeR = new THREE.Mesh(eyeGeometry, eyeMaterial);\n    eyeL.position.set(-0.3, 0.5, 0.8);\n    eyeR.position.set(0.3, 0.5, 0.8);\n    bear.add(eyeL);\n    bear.add(eyeR);\n\n    const pupilGeometry = new THREE.SphereGeometry(0.05, 32, 32);\n    pupilMaterial = new THREE.MeshPhongMaterial({ color: 0x000000 });\n    pupilL = new THREE.Mesh(pupilGeometry, pupilMaterial);\n    pupilR = new THREE.Mesh(pupilGeometry, pupilMaterial);\n    pupilL.position.set(-0.3, 0.5, 0.95);\n    pupilR.position.set(0.3, 0.5, 0.95);\n    bear.add(pupilL);\n    bear.add(pupilR);\n\n    \/\/ Initialiser les yeux en mode simple\n    updateEyeStyle('simple');\n}\n\nfunction updateEyeStyle(style) {\n    if (style === 'simple') {\n        eyeL.material = eyeMaterial;\n        eyeR.material = eyeMaterial;\n        pupilL.visible = false;\n        pupilR.visible = false;\n        document.getElementById('pupilColorGroup').style.display = 'none';\n    } else {\n        eyeL.material = new THREE.MeshPhongMaterial({ color: 0xFFFFFF });\n        eyeR.material = new THREE.MeshPhongMaterial({ color: 0xFFFFFF });\n        pupilL.visible = true;\n        pupilR.visible = true;\n        document.getElementById('pupilColorGroup').style.display = 'block';\n    }\n}\n\nfunction centerBear() {\n    const box = new THREE.Box3().setFromObject(bear);\n    const center = box.getCenter(new THREE.Vector3());\n    bear.position.sub(center);\n    camera.position.y = 0;\n    camera.lookAt(bear.position);\n}\n\nfunction animate() {\n    requestAnimationFrame(animate);\n    controls.update();\n    if (animationMixer) {\n        animationMixer.update(0.016);\n    }\n    renderer.render(scene, camera);\n}\n\nfunction onWindowResize() {\n    camera.aspect = window.innerWidth \/ window.innerHeight;\n    camera.updateProjectionMatrix();\n    renderer.setSize(window.innerWidth, window.innerHeight);\n}\n\nfunction updateMouth(style) {\n    if (mouth) bear.remove(mouth);\n\n    switch (style) {\n        case 'none':\n            \/\/ Pas de bouche\n            break;\n        case 'tongue':\n            mouth = new THREE.Group();\n            const tongueGeometry = new THREE.SphereGeometry(0.1, 32, 16, 0, Math.PI * 2, 0, Math.PI \/ 2);\n            const tongue = new THREE.Mesh(tongueGeometry, new THREE.MeshPhongMaterial({ color: 0xFF69B4 }));\n            tongue.rotation.x = Math.PI;\n            tongue.position.set(0, -0.05, 0.95);\n            const smileLine = new THREE.Mesh(new THREE.TorusGeometry(0.2, 0.02, 16, 100, Math.PI), mouthMaterial);\n            smileLine.rotation.x = Math.PI;\n            smileLine.position.set(0, 0, 0.9);\n            mouth.add(tongue);\n            mouth.add(smileLine);\n            bear.add(mouth);\n            break;\n    }\n}\n\nfunction updateAnimation(style) {\n    if (animationAction) {\n        animationAction.stop();\n    }\n\n    let animationClip;\n    switch (style) {\n        case 'dance':\n            animationClip = createDanceAnimation();\n            break;\n        case 'jump':\n            animationClip = createJumpAnimation();\n            break;\n        default:\n            return;\n    }\n\n    animationAction = animationMixer.clipAction(animationClip);\n    animationAction.play();\n}\n\nfunction createDanceAnimation() {\n    const times = [0, 0.5, 1];\n    const values = [\n        0, 0, 0,\n        0, 0.2, 0,\n        0, 0, 0\n    ];\n    const positionKF = new THREE.VectorKeyframeTrack('.position', times, values);\n    \n    const rotationTimes = [0, 0.25, 0.5, 0.75, 1];\n    const rotationValues = [\n        0, 0, 0,\n        0, 0, Math.PI \/ 8,\n        0, 0, 0,\n        0, 0, -Math.PI \/ 8,\n        0, 0, 0\n    ];\n    const rotationKF = new THREE.VectorKeyframeTrack('.rotation', rotationTimes, rotationValues);\n\n    return new THREE.AnimationClip('dance', 1, [positionKF, rotationKF]);\n}\n\nfunction createJumpAnimation() {\n    const times = [0, 0.25, 0.5, 0.75, 1];\n    const values = [\n        0, 0, 0,\n        0, 0.5, 0,\n        0, 0.7, 0,\n        0, 0.5, 0,\n        0, 0, 0\n    ];\n    const positionKF = new THREE.VectorKeyframeTrack('.position', times, values);\n\n    return new THREE.AnimationClip('jump', 1, [positionKF]);\n}\n\nfunction updateAccessory(type) {\n    if (accessory) {\n        bear.remove(accessory);\n    }\n\n    switch (type) {\n        case 'glasses':\n            accessory = createGlasses();\n            break;\n        case 'bowtie':\n            accessory = createBowTie();\n            break;\n        default:\n            accessory = null;\n    }\n\n    if (accessory) {\n        bear.add(accessory);\n    }\n}\n\nfunction createGlasses() {\n    const glassesGroup = new THREE.Group();\n    \n    const frameGeometry = new THREE.TorusGeometry(0.2, 0.02, 16, 100);\n    const frameMaterial = new THREE.MeshPhongMaterial({ color: document.getElementById('glassesColor').value });\n    \n    const leftLens = new THREE.Mesh(frameGeometry, frameMaterial);\n    leftLens.position.set(-0.3, 0.5, 0.9);\n    \n    const rightLens = new THREE.Mesh(frameGeometry, frameMaterial);\n    rightLens.position.set(0.3, 0.5, 0.9);\n    \n    const bridgeGeometry = new THREE.CylinderGeometry(0.01, 0.01, 0.3, 32);\n    const bridge = new THREE.Mesh(bridgeGeometry, frameMaterial);\n    bridge.rotation.z = Math.PI \/ 2;\n    bridge.position.set(0, 0.5, 0.9);\n    \n    glassesGroup.add(leftLens);\n    glassesGroup.add(rightLens);\n    glassesGroup.add(bridge);\n\n    const glassesSize = parseFloat(document.getElementById('glassesSize').value);\n    glassesGroup.scale.set(glassesSize, glassesSize, glassesSize);\n    \n    return glassesGroup;\n}\n\nfunction createBowTie() {\n    const bowTieGroup = new THREE.Group();\n    \n    const bowGeometry = new THREE.SphereGeometry(0.15, 32, 16, 0, Math.PI * 2, 0, Math.PI \/ 2);\n    const bowMaterial = new THREE.MeshPhongMaterial({ color: document.getElementById('bowtieColor').value });\n    \n    const leftBow = new THREE.Mesh(bowGeometry, bowMaterial);\n    leftBow.rotation.z = Math.PI \/ 4;\n    leftBow.position.set(-0.15, -0.7, 0.9);\n    \n    const rightBow = new THREE.Mesh(bowGeometry, bowMaterial);\n    rightBow.rotation.z = -Math.PI \/ 4;\n    rightBow.position.set(0.15, -0.7, 0.9);\n    \n    const knot = new THREE.Mesh(new THREE.SphereGeometry(0.06), bowMaterial);\n    knot.position.set(0, -0.7, 0.95);\n    \n    bowTieGroup.add(leftBow);\n    bowTieGroup.add(rightBow);\n    bowTieGroup.add(knot);\n    \n    return bowTieGroup;\n}\n\nfunction updateGeneratedCode() {\n    const code = `\nconst scene = new THREE.Scene();\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);\nconst renderer = new THREE.WebGLRenderer({ antialias: true, alpha: ${document.getElementById('transparentBackground').checked} });\nrenderer.setSize(window.innerWidth, window.innerHeight);\ndocument.body.appendChild(renderer.domElement);\n\nconst light = new THREE.PointLight(0xffffff, 1);\nlight.position.set(5, 5, 5);\nscene.add(light);\n\nconst ambientLight = new THREE.AmbientLight(0x404040);\nscene.add(ambientLight);\n\ncamera.position.set(${camera.position.x.toFixed(2)}, ${camera.position.y.toFixed(2)}, ${camera.position.z.toFixed(2)});\n\nconst bear = new THREE.Group();\nscene.add(bear);\n\nconst bodyGeometry = new THREE.SphereGeometry(1, 32, 32);\nconst furMaterial = new THREE.MeshStandardMaterial({ \n    color: '${document.getElementById('furColor').value}',\n    roughness: 0.8,\n    metalness: 0.2\n});\nconst body = new THREE.Mesh(bodyGeometry, furMaterial);\nbear.add(body);\n\n\/\/ ... (le reste du code pour cr\u00e9er l'ours)\n\nconst animationStyle = '${document.getElementById('animationStyle').value}';\n\/\/ ... (code pour l'animation)\n\nconst accessoryType = '${document.getElementById('accessory').value}';\nif (accessoryType === 'glasses') {\n    const glassesColor = '${document.getElementById('glassesColor').value}';\n    const glassesSize = ${document.getElementById('glassesSize').value};\n    \/\/ ... (code pour cr\u00e9er les lunettes)\n} else if (accessoryType === 'bowtie') {\n    const bowtieColor = '${document.getElementById('bowtieColor').value}';\n    \/\/ ... (code pour cr\u00e9er le n\u0153ud papillon)\n}\n\nfunction animate() {\n    requestAnimationFrame(animate);\n    \/\/ ... (code pour l'animation)\n    renderer.render(scene, camera);\n}\n\nanimate();\n`;\n\n    document.getElementById('generatedCode').textContent = code;\n}\n\ninit();\n\ndocument.getElementById('furColor').addEventListener('input', (e) => {\n    furMaterial.color.setHex(e.target.value.replace('#', '0x'));\n    updateGeneratedCode();\n});\n\ndocument.getElementById('furLength').addEventListener('input', (e) => {\n    bear.scale.set(e.target.value, e.target.value, e.target.value);\n    updateGeneratedCode();\n});\n\ndocument.getElementById('eyeStyle').addEventListener('change', (e) => {\n    updateEyeStyle(e.target.value);\n    updateGeneratedCode();\n});\n\ndocument.getElementById('eyeColor').addEventListener('input', (e) => {\n    const color = e.target.value;\n    if (document.getElementById('eyeStyle').value === 'simple') {\n        eyeMaterial.color.setHex(color.replace('#', '0x'));\n    } else {\n        pupilMaterial.color.setHex(color.replace('#', '0x'));\n    }\n    updateGeneratedCode();\n});\n\ndocument.getElementById('pupilColor').addEventListener('input', (e) => {\n    pupilMaterial.color.setHex(e.target.value.replace('#', '0x'));\n    updateGeneratedCode();\n});\n\ndocument.getElementById('pupilSize').addEventListener('input', (e) => {\n    const size = parseFloat(e.target.value);\n    pupilL.scale.set(size, size, size);\n    pupilR.scale.set(size, size, size);\n    updateGeneratedCode();\n});\n\ndocument.getElementById('noseColor').addEventListener('input', (e) => {\n    noseMaterial.color.setHex(e.target.value.replace('#', '0x'));\n    updateGeneratedCode();\n});\n\ndocument.getElementById('bearSize').addEventListener('input', (e) => {\n    const size = parseFloat(e.target.value);\n    bear.scale.set(size, size, size);\n    updateGeneratedCode();\n});\n\ndocument.getElementById('mouthStyle').addEventListener('change', (e) => {\n    updateMouth(e.target.value);\n    updateGeneratedCode();\n});\n\ndocument.getElementById('enableRotation').addEventListener('change', (e) => {\n    controls.enabled = e.target.checked;\n    updateGeneratedCode();\n});\n\ndocument.getElementById('transparentBackground').addEventListener('change', (e) => {\n    renderer.setClearColor(0x000000, e.target.checked ? 0 : 1);\n    updateGeneratedCode();\n});\n\ndocument.getElementById('animationStyle').addEventListener('change', (e) => {\n    updateAnimation(e.target.value);\n    updateGeneratedCode();\n});\n\ndocument.getElementById('accessory').addEventListener('change', (e) => {\n    const accessoryType = e.target.value;\n    updateAccessory(accessoryType);\n    document.getElementById('glassesControls').style.display = accessoryType === 'glasses' ? 'block' : 'none';\n    document.getElementById('bowtieControls').style.display = accessoryType === 'bowtie' ? 'block' : 'none';\n    updateGeneratedCode();\n});\n\ndocument.getElementById('glassesColor').addEventListener('input', (e) => {\n    updateAccessory('glasses');\n    updateGeneratedCode();\n});\n\ndocument.getElementById('glassesSize').addEventListener('input', (e) => {\n    updateAccessory('glasses');\n    updateGeneratedCode();\n});\n\ndocument.getElementById('bowtieColor').addEventListener('input', (e) => {\n    updateAccessory('bowtie');\n    updateGeneratedCode();\n});\n\ndocument.getElementById('toggleSidebar').addEventListener('click', () => {\n    const sidebar = document.getElementById('sidebar');\n    sidebar.classList.toggle('collapsed');\n});\n\ndocument.getElementById('codeSection').addEventListener('click', () => {\n    const codeElement = document.getElementById('generatedCode');\n    const range = document.createRange();\n    range.selectNode(codeElement);\n    window.getSelection().removeAllRanges();\n    window.getSelection().addRange(range);\n    document.execCommand('copy');\n    window.getSelection().removeAllRanges();\n    \n    const notification = document.getElementById('notification');\n    notification.style.display = 'block';\n    setTimeout(() => {\n        notification.style.display = 'none';\n    }, 2000);\n});\n\nupdateGeneratedCode();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d3d15d9 e-flex e-con-boxed e-con e-parent\" data-id=\"d3d15d9\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-21d3ea4 elementor-widget elementor-widget-heading\" data-id=\"21d3ea4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Derniers mod\u00e8les d'animation 3D Three.js :<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f5ff182 elementor-grid-eael-col-3 elementor-grid-tablet-eael-col-2 elementor-grid-mobile-eael-col-1 elementor-invisible elementor-widget elementor-widget-eael-post-grid\" data-id=\"f5ff182\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;eael_post_grid_columns&quot;:&quot;eael-col-3&quot;,&quot;_animation&quot;:&quot;lightSpeedIn&quot;,&quot;eael_post_grid_columns_tablet&quot;:&quot;eael-col-2&quot;,&quot;eael_post_grid_columns_mobile&quot;:&quot;eael-col-1&quot;}\" data-widget_type=\"eael-post-grid.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"eael-post-grid-f5ff182\" class=\"eael-post-grid-container\">\n            <div class=\"eael-post-grid eael-post-appender eael-post-appender-f5ff182 eael-post-grid-style-three\" data-layout-mode=\"masonry\"><article class=\"eael-grid-post  eael-post-grid-column eael-pg-post-1192 category-animation-3d-three-js-html-css-js-generator\" data-id=\"1192\">\n        <div class=\"eael-grid-post-holder\">\n            <div class=\"eael-grid-post-holder-inner\"><div class=\"eael-entry-media\"><div class=\"eael-entry-overlay zoom-in\"><i class=\"fas fa-code\" aria-hidden=\"true\"><\/i><a href=\"https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/\"><\/a><\/div><div class=\"eael-entry-thumbnail eael-image-ratio\">\n                 <img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"197\" src=\"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/teddy-bear-animation-3D-Three-js-generator-300x197.png\" class=\"attachment-medium size-medium wp-image-1194\" alt=\"\" srcset=\"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/teddy-bear-animation-3D-Three-js-generator-300x197.png 300w, https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/teddy-bear-animation-3D-Three-js-generator-1024x672.png 1024w, https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/teddy-bear-animation-3D-Three-js-generator-768x504.png 768w, https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/teddy-bear-animation-3D-Three-js-generator.png 1168w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\n             <\/div>\n        <\/div><div class=\"eael-entry-wrapper\"><header class=\"eael-entry-header\"><h4 class=\"eael-entry-title\"><a class=\"eael-grid-post-link\" href=\"https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/\" title=\"G\u00e9n\u00e9rateur d&rsquo;Ourson 3D Ultra R\u00e9aliste en Three.js\">G\u00e9n\u00e9rateur d&rsquo;Ourson 3D Ultra R\u00e9aliste en Three.js<\/a><\/h4><\/header><div class=\"eael-entry-content\">\n                        <div class=\"eael-grid-post-excerpt\"><a href=\"https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/\" class=\"eael-post-elements-readmore-btn\">Personnalisez le mod\u00e8le<\/a><\/div>\n                    <\/div><\/div><\/div>\n        <\/div>\n    <\/article><\/div>\n            <div class=\"clearfix\"><\/div>\n        <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-11f55ef e-flex e-con-boxed e-con e-parent\" data-id=\"11f55ef\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f0df20a elementor-widget elementor-widget-html\" data-id=\"f0df20a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>3D Teddy Bear Animation<\/title>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\\\/script>\r\n<\/head>\r\n<body>\r\n    <div id=\"canvas-container\" style=\"width: 100%; height: 100vh;\"><\/div>\r\n    <script>\r\n    const scene = new THREE.Scene();\r\n    const camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);\r\n    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });\r\n    renderer.setSize(window.innerWidth, window.innerHeight);\r\n    document.getElementById('canvas-container').appendChild(renderer.domElement);\r\n\r\n    const light = new THREE.PointLight(0xffffff, 1);\r\n    light.position.set(5, 5, 5);\r\n    scene.add(light);\r\n\r\n    const ambientLight = new THREE.AmbientLight(0x404040);\r\n    scene.add(ambientLight);\r\n\r\n    camera.position.set(0.00, 0.00, 5.00);\r\n\r\n    const bear = new THREE.Group();\r\n    scene.add(bear);\r\n\r\n    const bodyGeometry = new THREE.SphereGeometry(1, 32, 32);\r\n    const furMaterial = new THREE.MeshStandardMaterial({ \r\n        color: '#8b4513',\r\n        roughness: 0.8,\r\n        metalness: 0.2\r\n    });\r\n    const body = new THREE.Mesh(bodyGeometry, furMaterial);\r\n    bear.add(body);\r\n\r\n    \/\/ Create eyes\r\n    const eyeGeometry = new THREE.SphereGeometry(0.15, 32, 32);\r\n    const eyeMaterial = new THREE.MeshPhongMaterial({ color: '#000000' });\r\n    const eyeL = new THREE.Mesh(eyeGeometry, eyeMaterial);\r\n    const eyeR = new THREE.Mesh(eyeGeometry, eyeMaterial);\r\n    eyeL.position.set(-0.3, 0.5, 0.8);\r\n    eyeR.position.set(0.3, 0.5, 0.8);\r\n    bear.add(eyeL);\r\n    bear.add(eyeR);\r\n\r\n    \/\/ Create nose\r\n    const noseGeometry = new THREE.SphereGeometry(0.1, 32, 32);\r\n    const noseMaterial = new THREE.MeshPhongMaterial({ color: '#ffc0cb' });\r\n    const nose = new THREE.Mesh(noseGeometry, noseMaterial);\r\n    nose.position.set(0, 0.2, 1);\r\n    bear.add(nose);\r\n\r\n    \/\/ Create ears\r\n    const earGeometry = new THREE.SphereGeometry(0.2, 32, 32);\r\n    const earL = new THREE.Mesh(earGeometry, furMaterial);\r\n    const earR = new THREE.Mesh(earGeometry, furMaterial);\r\n    earL.position.set(-0.7, 0.7, 0);\r\n    earR.position.set(0.7, 0.7, 0);\r\n    bear.add(earL);\r\n    bear.add(earR);\r\n\r\n    \/\/ Create mouth based on style\r\n    const mouthStyle = 'none';\r\n    if (mouthStyle === 'tongue') {\r\n        const mouth = new THREE.Group();\r\n        const tongueGeometry = new THREE.SphereGeometry(0.1, 32, 16, 0, Math.PI * 2, 0, Math.PI \/ 2);\r\n        const tongue = new THREE.Mesh(tongueGeometry, new THREE.MeshPhongMaterial({ color: 0xFF69B4 }));\r\n        tongue.rotation.x = Math.PI;\r\n        tongue.position.set(0, -0.05, 0.95);\r\n        const smileLine = new THREE.Mesh(new THREE.TorusGeometry(0.2, 0.02, 16, 100, Math.PI), new THREE.MeshBasicMaterial({ color: 0x000000 }));\r\n        smileLine.rotation.x = Math.PI;\r\n        smileLine.position.set(0, 0, 0.9);\r\n        mouth.add(tongue);\r\n        mouth.add(smileLine);\r\n        bear.add(mouth);\r\n    }\r\n\r\n    \/\/ Set bear size\r\n    bear.scale.set(1, 1, 1);\r\n\r\n    \/\/ Add accessories\r\n    const accessoryType = 'none';\r\n    if (accessoryType === 'glasses') {\r\n        const glassesGroup = new THREE.Group();\r\n        const frameGeometry = new THREE.TorusGeometry(0.2, 0.02, 16, 100);\r\n        const frameMaterial = new THREE.MeshPhongMaterial({ color: '#000000' });\r\n        const leftLens = new THREE.Mesh(frameGeometry, frameMaterial);\r\n        leftLens.position.set(-0.3, 0.5, 0.9);\r\n        const rightLens = new THREE.Mesh(frameGeometry, frameMaterial);\r\n        rightLens.position.set(0.3, 0.5, 0.9);\r\n        const bridgeGeometry = new THREE.CylinderGeometry(0.01, 0.01, 0.3, 32);\r\n        const bridge = new THREE.Mesh(bridgeGeometry, frameMaterial);\r\n        bridge.rotation.z = Math.PI \/ 2;\r\n        bridge.position.set(0, 0.5, 0.9);\r\n        glassesGroup.add(leftLens);\r\n        glassesGroup.add(rightLens);\r\n        glassesGroup.add(bridge);\r\n        glassesGroup.scale.set(1, 1, 1);\r\n        bear.add(glassesGroup);\r\n    } else if (accessoryType === 'bowtie') {\r\n        const bowTieGroup = new THREE.Group();\r\n        const bowGeometry = new THREE.SphereGeometry(0.15, 32, 16, 0, Math.PI * 2, 0, Math.PI \/ 2);\r\n        const bowMaterial = new THREE.MeshPhongMaterial({ color: '#ff0000' });\r\n        const leftBow = new THREE.Mesh(bowGeometry, bowMaterial);\r\n        leftBow.rotation.z = Math.PI \/ 4;\r\n        leftBow.position.set(-0.15, -0.7, 0.9);\r\n        const rightBow = new THREE.Mesh(bowGeometry, bowMaterial);\r\n        rightBow.rotation.z = -Math.PI \/ 4;\r\n        rightBow.position.set(0.15, -0.7, 0.9);\r\n        const knot = new THREE.Mesh(new THREE.SphereGeometry(0.06), bowMaterial);\r\n        knot.position.set(0, -0.7, 0.95);\r\n        bowTieGroup.add(leftBow);\r\n        bowTieGroup.add(rightBow);\r\n        bowTieGroup.add(knot);\r\n        bear.add(bowTieGroup);\r\n    }\r\n\r\n    \/\/ Add animation\r\n    const animationStyle = 'none';\r\n    let animationClip;\r\n    if (animationStyle === 'dance') {\r\n        const times = [0, 0.5, 1];\r\n        const values = [0, 0, 0, 0, 0.2, 0, 0, 0, 0];\r\n        const positionKF = new THREE.VectorKeyframeTrack('.position', times, values);\r\n        const rotationTimes = [0, 0.25, 0.5, 0.75, 1];\r\n        const rotationValues = [0, 0, 0, 0, 0, Math.PI \/ 8, 0, 0, 0, 0, 0, -Math.PI \/ 8, 0, 0, 0];\r\n        const rotationKF = new THREE.VectorKeyframeTrack('.rotation', rotationTimes, rotationValues);\r\n        animationClip = new THREE.AnimationClip('dance', 1, [positionKF, rotationKF]);\r\n    } else if (animationStyle === 'jump') {\r\n        const times = [0, 0.25, 0.5, 0.75, 1];\r\n        const values = [0, 0, 0, 0, 0.5, 0, 0, 0.7, 0, 0, 0.5, 0, 0, 0, 0];\r\n        const positionKF = new THREE.VectorKeyframeTrack('.position', times, values);\r\n        animationClip = new THREE.AnimationClip('jump', 1, [positionKF]);\r\n    }\r\n\r\n    let mixer;\r\n    if (animationClip) {\r\n        mixer = new THREE.AnimationMixer(bear);\r\n        const action = mixer.clipAction(animationClip);\r\n        action.play();\r\n    }\r\n\r\n    function animate() {\r\n        requestAnimationFrame(animate);\r\n        if (mixer) mixer.update(0.016);\r\n        renderer.render(scene, camera);\r\n    }\r\n\r\n    animate();\r\n\r\n    window.addEventListener('resize', () => {\r\n        camera.aspect = window.innerWidth \/ window.innerHeight;\r\n        camera.updateProjectionMatrix();\r\n        renderer.setSize(window.innerWidth, window.innerHeight);\r\n    });\r\n    <\\\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>G\u00e9n\u00e9rateur d&rsquo;Ourson 3D Ultra R\u00e9aliste Couleur du pelage: Longueur du pelage: Style des yeux: SimpleD\u00e9taill\u00e9 Couleur des yeux: Couleur de la pupille: Taille des pupilles: Couleur du nez: Taille de l&rsquo;ourson: Style de bouche: AucunLangue tir\u00e9e Activer la rotation avec la souris Fond transparent Style d&rsquo;animation: AucuneDanseSaut Accessoire: AucunLunettesN\u0153ud papillon Couleur des lunettes: Taille des [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1194,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"footnotes":""},"categories":[14,5],"tags":[],"class_list":["post-1192","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation-3d-three-js","category-html-css-js-generator"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>G\u00e9n\u00e9rateur d&#039;Ourson 3D Ultra R\u00e9aliste en Three.js - Web Extractor<\/title>\n<meta name=\"description\" content=\"Cr\u00e9ez un ourson 3D ultra r\u00e9aliste et interactif en utilisant Three.js. Personnalisez la couleur du pelage la taille, les accessoires...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"G\u00e9n\u00e9rateur d&#039;Ourson 3D Ultra R\u00e9aliste en Three.js - Web Extractor\" \/>\n<meta property=\"og:description\" content=\"Cr\u00e9ez un ourson 3D ultra r\u00e9aliste et interactif en utilisant Three.js. Personnalisez la couleur du pelage la taille, les accessoires...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Extractor\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-04T16:28:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-07T13:23:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/teddy-bear-animation-3D-Three-js-generator.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1168\" \/>\n\t<meta property=\"og:image:height\" content=\"767\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/\",\"url\":\"https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/\",\"name\":\"G\u00e9n\u00e9rateur d'Ourson 3D Ultra R\u00e9aliste en Three.js - Web Extractor\",\"isPartOf\":{\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/teddy-bear-animation-3D-Three-js-generator.webp\",\"datePublished\":\"2024-09-04T16:28:17+00:00\",\"dateModified\":\"2024-09-07T13:23:46+00:00\",\"author\":{\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/#\/schema\/person\/0f95670ed0b3b265a488dae146fdda48\"},\"description\":\"Cr\u00e9ez un ourson 3D ultra r\u00e9aliste et interactif en utilisant Three.js. Personnalisez la couleur du pelage la taille, les accessoires...\",\"breadcrumb\":{\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/#primaryimage\",\"url\":\"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/teddy-bear-animation-3D-Three-js-generator.webp\",\"contentUrl\":\"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/teddy-bear-animation-3D-Three-js-generator.webp\",\"width\":1168,\"height\":767},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/pacific-webtools.com\/web-extractor\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"G\u00e9n\u00e9rateur d&rsquo;Ourson 3D Ultra R\u00e9aliste en Three.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/#website\",\"url\":\"https:\/\/pacific-webtools.com\/web-extractor\/\",\"name\":\"Web Extractor\",\"description\":\"Extracteur de Code\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pacific-webtools.com\/web-extractor\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/#\/schema\/person\/0f95670ed0b3b265a488dae146fdda48\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/94a5a2d7ac834dce40e1e25743dcb576?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/94a5a2d7ac834dce40e1e25743dcb576?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/pacific-webtools.com\/web-extractor\"],\"url\":\"https:\/\/pacific-webtools.com\/web-extractor\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"G\u00e9n\u00e9rateur d'Ourson 3D Ultra R\u00e9aliste en Three.js - Web Extractor","description":"Cr\u00e9ez un ourson 3D ultra r\u00e9aliste et interactif en utilisant Three.js. Personnalisez la couleur du pelage la taille, les accessoires...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/","og_locale":"fr_FR","og_type":"article","og_title":"G\u00e9n\u00e9rateur d'Ourson 3D Ultra R\u00e9aliste en Three.js - Web Extractor","og_description":"Cr\u00e9ez un ourson 3D ultra r\u00e9aliste et interactif en utilisant Three.js. Personnalisez la couleur du pelage la taille, les accessoires...","og_url":"https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/","og_site_name":"Web Extractor","article_published_time":"2024-09-04T16:28:17+00:00","article_modified_time":"2024-09-07T13:23:46+00:00","og_image":[{"width":1168,"height":767,"url":"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/teddy-bear-animation-3D-Three-js-generator.webp","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"admin","Dur\u00e9e de lecture estim\u00e9e":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/","url":"https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/","name":"G\u00e9n\u00e9rateur d'Ourson 3D Ultra R\u00e9aliste en Three.js - Web Extractor","isPartOf":{"@id":"https:\/\/pacific-webtools.com\/web-extractor\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/#primaryimage"},"image":{"@id":"https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/#primaryimage"},"thumbnailUrl":"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/teddy-bear-animation-3D-Three-js-generator.webp","datePublished":"2024-09-04T16:28:17+00:00","dateModified":"2024-09-07T13:23:46+00:00","author":{"@id":"https:\/\/pacific-webtools.com\/web-extractor\/#\/schema\/person\/0f95670ed0b3b265a488dae146fdda48"},"description":"Cr\u00e9ez un ourson 3D ultra r\u00e9aliste et interactif en utilisant Three.js. Personnalisez la couleur du pelage la taille, les accessoires...","breadcrumb":{"@id":"https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/#primaryimage","url":"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/teddy-bear-animation-3D-Three-js-generator.webp","contentUrl":"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/teddy-bear-animation-3D-Three-js-generator.webp","width":1168,"height":767},{"@type":"BreadcrumbList","@id":"https:\/\/pacific-webtools.com\/web-extractor\/generateur-dourson-3d-ultra-realiste-en-three-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pacific-webtools.com\/web-extractor\/"},{"@type":"ListItem","position":2,"name":"G\u00e9n\u00e9rateur d&rsquo;Ourson 3D Ultra R\u00e9aliste en Three.js"}]},{"@type":"WebSite","@id":"https:\/\/pacific-webtools.com\/web-extractor\/#website","url":"https:\/\/pacific-webtools.com\/web-extractor\/","name":"Web Extractor","description":"Extracteur de Code","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pacific-webtools.com\/web-extractor\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/pacific-webtools.com\/web-extractor\/#\/schema\/person\/0f95670ed0b3b265a488dae146fdda48","name":"admin","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/pacific-webtools.com\/web-extractor\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/94a5a2d7ac834dce40e1e25743dcb576?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/94a5a2d7ac834dce40e1e25743dcb576?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/pacific-webtools.com\/web-extractor"],"url":"https:\/\/pacific-webtools.com\/web-extractor\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/posts\/1192"}],"collection":[{"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/comments?post=1192"}],"version-history":[{"count":19,"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/posts\/1192\/revisions"}],"predecessor-version":[{"id":1285,"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/posts\/1192\/revisions\/1285"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/media\/1194"}],"wp:attachment":[{"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/media?parent=1192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/categories?post=1192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/tags?post=1192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}