動態紋理更改不能用於三個JS

Question

我嘗試在三個js中動態更改紋理/圖像。

我得到了下面的錯誤

THREE.ImageUtils.loadTexture已被棄用。改用THREE.TextureLoader（）。

我下面的代碼

src="http://localhost/3d_view/textures/wall/wall6.jpg"; 
mesh1.material.map = THREE.ImageUtils.loadTexture(src); 
mesh1.material.needsUpdate = true; 

我做錯了，請人幫我。

Answer 1

嘗試用以下...

var image = new Image(); 

image.src = "....../xyz.png"; 

$(image).load(function() { 
    // ... 
    var _tempMap = new THREE.ImageUtils.loadTexture(getBase64Image(image)); 

    mesh1.material = new THREE.MeshLambertMaterial({map: _tempMap, overdraw:0.5}); //Your desire material you can use. 
}); 


function getBase64Image(img) { 
    // Create an empty canvas element 
    var canvas = document.createElement("canvas"); 
    canvas.width = img.width; 
    canvas.height = img.height; 

    // Copy the image contents to the canvas 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img, 0, 0); 

    // Get the data-URL formatted image 
    // Firefox supports PNG and JPEG. You could check img.src to 
    // guess the original format, but be aware the using "image/jpg" 
    // will re-encode the image. 
    var dataURL = canvas.toDataURL("image/png"); 

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 
}