Javascript Three.js更新纹理图像
我正在使用three.js创建minecraft纹理编辑器,类似于。我只是想把基本的点击和画图功能弄下来,但我似乎弄不明白。我目前为每个立方体的每个面都有纹理,并通过使用以下函数制作着色器材质来应用它们Javascript Three.js更新纹理图像,javascript,three.js,textures,Javascript,Three.js,Textures,我正在使用three.js创建minecraft纹理编辑器,类似于。我只是想把基本的点击和画图功能弄下来,但我似乎弄不明白。我目前为每个立方体的每个面都有纹理,并通过使用以下函数制作着色器材质来应用它们 this.createBodyShaderTexture = function(part, update) { sides = ['left', 'right', 'top', 'bottom', 'front', 'back']; images = []; for (i
this.createBodyShaderTexture = function(part, update)
{
sides = ['left', 'right', 'top', 'bottom', 'front', 'back'];
images = [];
for (i = 0; i < sides.length; i++)
{
images[i] = 'img/'+part+'/'+sides[i]+'.png';
}
texCube = new THREE.ImageUtils.loadTextureCube(images);
texCube.magFilter = THREE.NearestFilter;
texCube.minFilter = THREE.LinearMipMapLinearFilter;
if (update)
{
texCube.needsUpdate = true;
console.log(texCube);
}
return texCube;
}
this.createBodyShaderMaterial = function(part, update)
{
shader = THREE.ShaderLib['cube'];
shader.uniforms['tCube'].value = this.createBodyShaderTexture(part, update);
shader.fragmentShader = document.getElementById("fshader").innerHTML;
shader.vertexShader = document.getElementById("vshader").innerHTML;
material = new THREE.ShaderMaterial({fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: shader.uniforms});
return material;
}
SkinApp.prototype.onClick =
function(event)
{
event.preventDefault();
this.change(); //makes texture file a simple red square for testing
this.avatar.remove(this.HEAD);
this.HEAD = new THREE.Mesh(new THREE.CubeGeometry(8, 8, 8), this.createBodyShaderMaterial('head', false));
this.HEAD.position.y = 10;
this.avatar.add(this.HEAD);
this.HEAD.material.needsUpdate = true;
this.HEAD.dynamic = true;
}
this.createBodyShaderTexture=函数(部分,更新)
{
侧面=[‘左’、‘右’、‘上’、‘下’、‘前’、‘后’];
图像=[];
对于(i=0;i
然后,当用户单击网格上的任何位置时,将使用画布更新纹理文件本身。更新已发生,但除非刷新页面,否则更改不会显示在浏览器中。我已经找到了很多关于如何将纹理图像更改为新文件的示例,但没有介绍如何在运行时显示同一纹理文件中的更改,或者即使可能也没有。这是可能的,如果没有,还有什么替代方案?以下是关于“更新”three.js中内容的所有基本知识:当您更新纹理时,无论是基于画布、视频还是外部加载,您都需要将纹理的以下属性设置为true: 如果对象是这样创建的:
var canvas = document.createElement("canvas");
var canvasMap = new THREE.Texture(canvas)
var mat = new THREE.MeshPhongMaterial();
mat.map = canvasMap;
var mesh = new THREE.Mesh(geom,mat);
更改纹理后,将以下设置为true:
cube.material.map.needsUpdate=true代码>
下次渲染场景时,它将显示新的纹理。我以前看过该页面,但所有方法似乎都不起作用。当我单击时,我尝试创建一个全新的网格、材质和着色器材质,但即使更新标志设置为true,更改也不会显示在屏幕上。谢谢,这非常有效!我认为这与我使用ShaderMaterial有关,但它与MeshBasicMaterial配合得很好;material.needsUpdate=true
@shaqb4然后向上投票并接受此答案!这就是我们如何利用stackoverflow。哇,没想到我没有接受这个。谢谢你的提醒!