Changer la couleur d'un svg dynamiquement et appliquer comme texture dans trois.js

Question

J'essaie de créer un configurateur avec three.js mais je suis au point où je dois changer la couleur du produit dinamycally, je pense que je peut utiliser un svg comme texture, modifiez la propriété de remplissage de la svg et mettre à jour la texture facilement, mais je ne suis pas d'avoir de bons résultats

au moment ce que j'ai est

-Un modèle 3D avec un svg appliqué comme texture avec un TextureLoader, mais le svg est placé dans un fichier externe ("images/texture.svg") (aussi trois.js réduit la taille de la texture, mais je pense que c'est un problème de mapping)

svg -Le est séparé en couches, donc je peux changer manuellement la couleur et l'appliquer

Mais im essayant de le rendre dynamique, vous choisissez une couleur et il met à jour automatiquement le svg appliqué comme texture

Tous des idées?

Merci!

Answer 1

J'ai fourchu le violon de quelqu'un d'autre pour montrer la solution. J'ai ajouté une fonction de clic qui modifie le SVG et redessine le matériel sur le modèle.

Voir http://jsfiddle.net/L4pepnj7/

Cliquez dans l'exemple pour changer la couleur du cercle dans le SVG.

L'opération qui convertit le SVG en un encodedURI est intensive à avoir dans une boucle constante, mais vous pouvez mettre le changement de couleur dans un événement click alors que le rendu fait son propre truc. J'ai ajouté une fonction appelée "clickBody" au violon existant qui change la couleur de l'un des éléments SVG.

var mesh; 
var scene = new THREE.Scene(); 

var camera = new THREE.PerspectiveCamera(50, 500/400, 0.1, 1000); 
camera.position.z = 10; 

var renderer = new THREE.WebGLRenderer({ 
    antialias: true 
}); 
renderer.setSize(500, 400); 
document.body.appendChild(renderer.domElement); 

var svg = document.getElementById("svgContainer").querySelector("svg"); 
var svgData = (new XMLSerializer()).serializeToString(svg); 

var canvas = document.createElement("canvas"); 
var svgSize = svg.getBoundingClientRect(); 
canvas.width = svgSize.width; 
canvas.height = svgSize.height; 
var ctx = canvas.getContext("2d"); 

var img = document.createElement("img"); 
var material; 
img.setAttribute("src", "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(svgData)))); 

img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
    var texture = new THREE.Texture(canvas); 
    texture.needsUpdate = true; 
    var geometry = new THREE.SphereGeometry(3, 50, 50, 0, Math.PI * 2, 0, Math.PI * 2); 
    material = new THREE.MeshBasicMaterial({ 
     map: texture 
    }); 
    material.map.minFilter = THREE.LinearFilter; 
    mesh = new THREE.Mesh(geometry, material); 
    scene.add(mesh); 
}; 



var colors = ["red", "orange", "yellow", "green", "blue"]; 


var c = 0; 

function clickBody() { 
    document.getElementById("test").setAttribute("fill", colors[c]); 
    var svgData = (new XMLSerializer()).serializeToString(svg); 
    img.setAttribute("src", "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(svgData)))); 
    img.onload = function() { 
     ctx.drawImage(img, 0, 0); 
     var texture = new THREE.Texture(canvas); 
     material.map = texture; 
     material.map.needsUpdate = true; 
     renderer.render(scene, camera); 
    } 
    c = c + 1; 
    if (c == colors.length) { 
     c = 0; 
    } 
} 
document.body.addEventListener("click", clickBody) 

var render = function() { 
    requestAnimationFrame(render); 
    mesh.rotation.y += 0.01; 
    renderer.render(scene, camera); 
}; 


render();