Three.jsテクスチャ画像の更新

Question

私は、012.に似た、minecraftテクスチャエディタを作成するのにthree.jsを使用しています。私はちょうど基本的なクリックアンドペイント機能をダウンさせようとしていますが、私はそれを理解していないようです。私は現在、各キューブの各面にテクスチャを持っており、次の機能を持つシェーダ素材を作成することによってそれらを適用します。

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

ユーザーがメッシュ上の任意の場所をクリックすると次に、テクスチャファイル自体は、キャンバスを使用してアップデートです。更新は行われますが、ページが更新されない限り、変更はブラウザーに表示されません。テクスチャイメージを新しいファイルに変更する方法の例はたくさんありますが、実行時に同じテクスチャファイルに変更を表示する方法や、可能であれば変更を表示する方法の例はたくさんあります。これは可能なのでしょうか？あなたはテクスチャを更新すると、そのキャンバス、ビデオまたは外部ロードに基づいて、あなたがする必要があるかどうか、https://github.com/mrdoob/three.js/wiki/Updates

Answer 1

：ここ

Answer 2

あなたはthree.jsで「更新」のものについて知っているかのすべての基本でありますtrueにテクスチャ上の次のプロパティを設定します。

オブジェクトは、次のように作成された場合：テクスチャは、変更を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); 

：

cube.material.map.needsUpdate = true;

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