0

有没有办法在 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

有人可以确认吗？

4

1 回答 1

2

像这样的东西应该工作：

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 ) );
于 2012-10-25T16:23:36.243 回答