Three.js更新纹理图像

Question

我正在使用three.js创建一个类似于此的 Minecraft纹理编辑器.我只是试图获得基本的点击和绘画功能,但我似乎无法弄明白.我目前每个立方体的每个面都有纹理,并通过制作具有以下功能的着色器材料来应用它们.

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;
}

然后,当用户单击网格上的任何位置时,纹理文件本身将使用画布进行更新.更新发生,但除非刷新页面,否则更改不会显示在浏览器中.我已经找到了很多关于如何将纹理图像更改为新文件的示例,但没有找到如何在运行时在同一纹理文件中显示更改的示例,或者即使它是可能的.这是可能的,如果没有,有什么替代品吗？

Answer 1

更新纹理时,无论是基于画布,视频还是外部加载,都需要在纹理上将以下属性设置为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;

下次渲染场景时,它将显示新的纹理.