12

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


次に、ユーザーがメッシュ上の任意の場所をクリックすると、キャンバスを使用してテクスチャ ファイル自体が更新されます。更新は行われますが、ページが更新されない限り、変更はブラウザーに表示されません。テクスチャ イメージを新しいファイルに変更する方法の例はたくさん見つかりましたが、実行時に同じテクスチャ ファイルの変更を表示する方法や、それが可能であったとしてもそうではありません。これは可能ですか?そうでない場合、どのような代替案がありますか?

4

2 に答える 2

21

テクスチャを更新するときは、キャンバス、ビデオ、または外部から読み込まれたものに基づいているかどうかにかかわらず、テクスチャの次のプロパティを 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;

次にシーンをレンダリングすると、新しいテクスチャが表示されます。

于 2013-08-27T20:25:55.333 に答える