ThreeJS从原始javascript ArrayBuffer加载Texuture

2019-06-24 00:19:23 阅读：815 来源： 互联网

给定一个Javascript ArrayBuffer,其中包含图像的二进制数据和扩展名(jpg,png等)
我想创建一个ThreeJS纹理(没有做任何HTTP请求或文件加载,因为我已经有了二进制信息).

例如,假设我有：

var binaryData = getBinaryData(); // this returns an ArrayBuffer with the image, for this example we assume is a PNG image.
var imageFormat = "png";

(我们还有其他纹理属性作为环绕模式,mipmaps等)

如何加载纹理？

任何帮助将不胜感激.

解决方法:

如果将二进制数据数组转换为base64字符串.然后,您可以将它附加到Image对象,然后使用具有Three.js纹理的Image对象.

// Convert the array of data into a base64 string
var stringData = String.fromCharCode.apply(null, new Uint16Array(jpgData));
var encodedData = window.btoa(stringData);
var dataURI = "data:image/jpeg;base64," + encodedData;

// Connect the image to the Texture
var texture = new THREE.Texture();

var image = new Image();
image.onload = function () {
    texture.image = image;
    texture.needsUpdate = true;
};
image.src = dataURI;

这是完整的代码(猫图像是故意低分辨率)：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var jpgData = new Uint8Array([255,216,255,224,0,16,74,70,73,70,0,1,1,0,0,1,0,1,0,0,255,254,0,62,67,82,69,65,84,79,82,58,32,103,100,45,106,112,101,103,32,118,49,46,48,32,40,117,115,105,110,103,32,73,74,71,32,74,80,69,71,32,118,54,50,41,44,32,100,101,102,97,117,108,116,32,113,117,97,108,105,116,121,10,255,219,0,67,0,8,6,6,7,6,5,8,7,7,7,9,9,8,10,12,20,13,12,11,11,12,25,18,19,15,20,29,26,31,30,29,26,28,28,32,36,46,39,32,34,44,35,28,28,40,55,41,44,48,49,52,52,52,31,39,57,61,56,50,60,46,51,52,50,255,219,0,67,1,9,9,9,12,11,12,24,13,13,24,50,33,28,33,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,255,192,0,17,8,0,24,0,24,3,1,34,0,2,17,1,3,17,1,255,196,0,31,0,0,1,5,1,1,1,1,1,1,0,0,0,0,0,0,0,0,1,2,3,4,5,6,7,8,9,10,11,255,196,0,181,16,0,2,1,3,3,2,4,3,5,5,4,4,0,0,1,125,1,2,3,0,4,17,5,18,33,49,65,6,19,81,97,7,34,113,20,50,129,145,161,8,35,66,177,193,21,82,209,240,36,51,98,114,130,9,10,22,23,24,25,26,37,38,39,40,41,42,52,53,54,55,56,57,58,67,68,69,70,71,72,73,74,83,84,85,86,87,88,89,90,99,100,101,102,103,104,105,106,115,116,117,118,119,120,121,122,131,132,133,134,135,136,137,138,146,147,148,149,150,151,152,153,154,162,163,164,165,166,167,168,169,170,178,179,180,181,182,183,184,185,186,194,195,196,197,198,199,200,201,202,210,211,212,213,214,215,216,217,218,225,226,227,228,229,230,231,232,233,234,241,242,243,244,245,246,247,248,249,250,255,196,0,31,1,0,3,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,2,3,4,5,6,7,8,9,10,11,255,196,0,181,17,0,2,1,2,4,4,3,4,7,5,4,4,0,1,2,119,0,1,2,3,17,4,5,33,49,6,18,65,81,7,97,113,19,34,50,129,8,20,66,145,161,177,193,9,35,51,82,240,21,98,114,209,10,22,36,52,225,37,241,23,24,25,26,38,39,40,41,42,53,54,55,56,57,58,67,68,69,70,71,72,73,74,83,84,85,86,87,88,89,90,99,100,101,102,103,104,105,106,115,116,117,118,119,120,121,122,130,131,132,133,134,135,136,137,138,146,147,148,149,150,151,152,153,154,162,163,164,165,166,167,168,169,170,178,179,180,181,182,183,184,185,186,194,195,196,197,198,199,200,201,202,210,211,212,213,214,215,216,217,218,226,227,228,229,230,231,232,233,234,242,243,244,245,246,247,248,249,250,255,218,0,12,3,1,0,2,17,3,17,0,63,0,225,109,238,89,177,194,175,3,160,56,198,63,90,232,23,193,58,181,198,129,246,255,0,48,91,73,52,196,37,147,225,119,192,49,243,111,45,158,73,29,187,142,213,204,197,117,246,11,104,101,154,88,124,180,145,72,81,247,136,207,183,30,181,239,190,36,188,211,99,68,185,242,148,164,113,121,145,180,127,119,102,51,159,166,43,139,15,77,89,201,149,177,226,44,230,81,37,188,214,234,251,91,107,28,228,238,29,206,79,255,0,90,138,154,242,120,230,19,72,176,198,190,103,207,251,179,157,217,25,200,205,21,196,147,111,64,122,144,216,248,87,251,98,55,143,85,185,158,210,220,169,116,40,60,204,55,24,227,191,83,233,94,129,117,168,19,225,187,125,29,165,23,119,73,103,37,164,183,112,40,10,160,0,17,182,158,229,120,227,184,162,138,214,150,42,106,45,89,21,73,123,73,53,35,137,26,4,176,69,228,137,51,110,16,236,221,130,216,3,140,154,40,162,176,246,175,153,232,67,220,255,217]);


// Convert the array of data into a base64 string
var stringData = String.fromCharCode.apply(null, new Uint16Array(jpgData));
var encodedData = window.btoa(stringData);
var dataURI = "data:image/jpeg;base64," + encodedData;

// Connect the image to the Texture
var texture = new THREE.Texture();

var image = new Image();
image.onload = function () {
	texture.image = image;
	texture.needsUpdate = true;
};
image.src = dataURI;


var geometry = new THREE.PlaneBufferGeometry(1, 1);
var material = new THREE.MeshBasicMaterial({map: texture});
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 1;

var render = function () {
	requestAnimationFrame( render );

	renderer.render(scene, camera);
};

render();

<html>
	<head>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
	</body>
</html>

标签：javascript,three-js,textures
来源： https://codeday.me/bug/20190623/1275562.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ThreeJS从原始javascript ArrayBuffer加载Texuture