动态纹理变化在三个JS中不起作用

时间:2016-09-07 05:28:41

标签: javascript three.js

我尝试在三个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;

我做错了,任何人都请帮助我。

1 个答案:

答案 0 :(得分:-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,/, "");
}
相关问题