Cập nhật hình ảnh Three.js

Question

Tôi đang sử dụng ba.js để tạo trình chỉnh sửa kết cấu minecraft, tương tự như this. Tôi chỉ cố gắng để có được chức năng nhấp chuột và sơn cơ bản xuống, nhưng tôi không thể tìm ra nó. Tôi hiện đang có kết cấu cho mỗi khuôn mặt của mỗi khối lập phương và áp dụng chúng bằng cách làm cho vật liệu đổ bóng với các chức năng sau đây.

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

Sau đó, khi người dùng nhấp vào bất kỳ nơi nào trên lưới, file hình ảnh chính nó là cập nhật bằng vải. Bản cập nhật xảy ra, nhưng thay đổi không hiển thị trong trình duyệt trừ khi trang được làm mới. Tôi đã tìm thấy rất nhiều ví dụ về cách thay đổi hình ảnh kết cấu thành một tệp mới, nhưng không tìm thấy cách hiển thị các thay đổi trong cùng một tệp kết cấu trong thời gian chạy hoặc thậm chí nếu có thể. Điều này có thể, và nếu không phải là lựa chọn thay thế?

Answer 1

Khi bạn cập nhật một kết cấu, cho dù nó dựa trên vải, video hoặc nạp từ bên ngoài, bạn cần phải thiết lập các tài sản trên các kết cấu sau để đúng:

Nếu một đối tượng được tạo ra như thế này:

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

sau khi kết cấu đã được thay đổi, thiết lập sau để đúng:

cube.material.map.needsUpdate = true;

Và lần sau khi bạn hiển thị cảnh, nó sẽ hiển thị kết cấu mới.

Answer 2

Dưới đây là tất cả những điều cơ bản về những gì bạn cần phải biết về "cập nhật" những thứ trong three.js: https://github.com/mrdoob/three.js/wiki/Updates