svgの色を動的に変更してthree.jsでテクスチャとして適用

Question

私はthree.jsを使ってコンフィギュレータを作成しようとしていますが、製品の色を変更する必要があります。テクスチャとしてSVGを使用することができ、SVGのFillプロパティを変更し、簡単にテクスチャを更新したが、イムは良い結果

私のように適用され、SVGと

-A 3Dモデルである持っているもの、現時点で

を持っていませんTextureLoaderでテクスチャを作成しますが、svgは外部ファイル（ "images/texture.svg"）に配置されます（three.jsはテクスチャのサイズを縮小していますが、マッピングの問題と思われます）

-The SVGは層に分離されているので、私は手動で色を変更し、それを

を適用する。しかし、それを動的にしようとしているイムは、あなたが色を選択することができ、それが自動的にテクスチャ

どれをとして適用SVGを更新しますアイデア？

ありがとうございます！

Answer 1

私は解決策を示すために他の誰かのバイブルをフォークしました。私は、SVGを変更し、モデル上のマテリアルを再描画するクリック機能を追加しました。

は、SVGの円の色を変更する例をhttp://jsfiddle.net/L4pepnj7/

どこかをクリックしてください。

SVGをencodedURIに変換する操作は、一定のループで行うことに集中しますが、レンダラーが独自の処理を行っている間に、クリックイベントに色の変更を加えることができます。 SVG要素の1つの色を変更する既存のフィドルに「clickBody」という関数を追加しました。

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();