![](/img/trans.png)
[英]Dynamically Change Three.js texture in externally loaded Collada file
[英]Change color of an svg dynamically and apply as texture in three.js
我正在嘗試使用three.js創建一個配置器,但我需要改變產品的顏色,雖然我可以使用svg作為紋理,更改svg的填充屬性並更新紋理很容易,但我沒有很好的結果
目前我所擁有的是
- 帶有紋理加載器的 svg 的 3D 模型,但 svg 放置在外部文件中(“images/texture.svg”)(也是 Three.js 正在減小紋理的大小,但我認為它是一個映射問題)
- svg 是分層的,所以我可以手動更改顏色並應用它
但我試圖讓它變得動態,你選擇一種顏色,它會自動更新作為紋理應用的 svg
有任何想法嗎?
謝謝!
我分叉了別人的小提琴來展示解決方案。 我添加了一個點擊功能,可以修改 SVG 並在模型上重新繪制材質。
見http://jsfiddle.net/L4pepnj7/
單擊示例上的任意位置以更改 SVG 中圓圈的顏色。
將 SVG 轉換為 encodingURI 的操作在一個恆定循環中是密集的,但是您可以在渲染器做自己的事情時將顏色更改放在單擊事件中。 我在現有的小提琴中添加了一個名為“clickBody”的函數,該函數更改了其中一個 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();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.