在已创建的 jsc3d 3d 对象上添加图像
image addition on already created jsc3d 3d object
是否可以在已经由 jsc3d 创建的 3d object.For 示例中添加外部图像或文本,如果任何 canvas 图像数据需要存储在创建的 3d 对象上,那么可以吗?
是的,有可能。
如果您查看 Texture 的 jsc3d 实现,您会看到纹理已经有底层 canvas.
假设您有一个名为 "myTexture" 的 canvas 和一个名为 "myMesh" 的网格,为了简单起见,您只需要一个固定大小为 128x128 像素的纹理,这会将你的 canvas 绘制到你的网格上:
var canvas = document.getElementById('myTexture');
var context = canvas.getContext('2d');
var dim = 128;
var imgData = context.getImageData(0,0,dim,dim);
var data = imgData.data;
var size = data.length / 4;
var texture = new JSC3D.Texture;
texture.data = new Array(size);
var alpha;
for(var i=0, j=0; i<size; i++, j+=4) {
alpha = data[j + 3];
texture.data[i] = alpha << 24 | data[j] << 16 | data[j+1] << 8 | data[j+2];
if(alpha < 255)
texture.hasTransparency = true;
}
texture.width = dim;
texture.height = dim;
myMesh.setTexture(texture);
viewer.update();
.data 循环取自 JSC3D.Texture.prototype.createFromImage(致谢 humu2009,jsc3d 的创建者)。
是否可以在已经由 jsc3d 创建的 3d object.For 示例中添加外部图像或文本,如果任何 canvas 图像数据需要存储在创建的 3d 对象上,那么可以吗?
是的,有可能。 如果您查看 Texture 的 jsc3d 实现,您会看到纹理已经有底层 canvas.
假设您有一个名为 "myTexture" 的 canvas 和一个名为 "myMesh" 的网格,为了简单起见,您只需要一个固定大小为 128x128 像素的纹理,这会将你的 canvas 绘制到你的网格上:
var canvas = document.getElementById('myTexture');
var context = canvas.getContext('2d');
var dim = 128;
var imgData = context.getImageData(0,0,dim,dim);
var data = imgData.data;
var size = data.length / 4;
var texture = new JSC3D.Texture;
texture.data = new Array(size);
var alpha;
for(var i=0, j=0; i<size; i++, j+=4) {
alpha = data[j + 3];
texture.data[i] = alpha << 24 | data[j] << 16 | data[j+1] << 8 | data[j+2];
if(alpha < 255)
texture.hasTransparency = true;
}
texture.width = dim;
texture.height = dim;
myMesh.setTexture(texture);
viewer.update();
.data 循环取自 JSC3D.Texture.prototype.createFromImage(致谢 humu2009,jsc3d 的创建者)。