Three.js 更新纹理图片

Posted 2023-02-27

【中文标题】Three.js 更新纹理图片

【英文标题】：Three.js Update Texture image

【发布时间】：2013-08-28 11:43:26

【问题描述】：

我正在使用three.js 创建一个Minecraft 纹理编辑器，类似于this。我只是想降低基本的点击和绘画功能，但我似乎无法弄清楚。我目前为每个立方体的每个面都有纹理，并通过使用以下功能制作着色器材质来应用它们。

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;

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

【参考方案1】：

以下是关于在 three.js 中“更新”内容的所有基本知识：https://threejs.org/docs/#manual/introduction/How-to-update-things

【讨论】：

我以前看过那个页面，但似乎没有一种方法有效。当我单击时，我尝试创建一个全新的网格、材质和着色器材质，但即使更新标志设置为 true，更改也不会显示在屏幕上。

【参考方案2】：

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

下次渲染场景时，它会显示新的纹理。

【讨论】：

谢谢，效果很好！我认为这与我使用 ShaderMaterial 有关，但它适用于 MeshBasicMaterial。

我实际上不得不同时做material.map.needsUpdate = true; material.needsUpdate = true

@shaqb4 然后投票赞成这个答案并接受它！这就是我们在 *** 上滚动的方式。

哇，没想到我没有接受这个。感谢您提及！