Question

有没有办法在Three.js中使用TEXTURE_2D作为纹理？

我有非常高分辨率的图像，我试图在Three.js图像查看器中使用。性能现在是一个问题，所以我试图将图像转换为POT，看看它是否有任何区别。我使用的是此处建议的脚本：http://www.khronos.org/webgl/wiki/WebGL_and_OpenGL_Differences

function createTextureFromImage(image) {
   var gl = renderer.context;
   var texture = gl.createTexture();
   gl.bindTexture(gl.TEXTURE_2D, texture);
   if (!isPowerOfTwo(image.width) || !isPowerOfTwo(image.height)) {
       // Scale up the texture to the next highest power of two dimensions.
       var canvas2 = document.createElement("canvas");
       canvas2.width = nextHighestPowerOfTwo(image.width);
       canvas2.height = nextHighestPowerOfTwo(image.height);
       var ctx = canvas2.getContext("2d");
       ctx.drawImage(image, 0, 0, image.width, image.height);
       image = canvas2;
   }
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
   gl.generateMipmap(gl.TEXTURE_2D);
   gl.bindTexture(gl.TEXTURE_2D, null);
   return texture;
}

但我无法想象如何使用THREE.Texture返回纹理对象。有什么想法吗？

编辑1： 我正在查看Three.js代码，发现它隐含地做了类似于我想要实现的内容： https://github.com/mrdoob/three.js/blob/master/src/loaders/Loader.js

有人可以确认吗？

Answer 1

这样的事情应该有效：

function createTextureFromImage( image ) {

   var canvas = document.createElement( "canvas" );

   canvas.width = nextHighestPowerOfTwo( image.width );
   canvas.height = nextHighestPowerOfTwo( image.height );

   var ctx = canvas2.getContext( "2d" );

   ctx.drawImage( image, 0, 0, image.width, image.height );

   return canvas;
}

var texture = new THREE.Texture( createTextureFromImage( image ) );

使用带有Three.js的TEXTURE_2D

1 个答案: