three.js使用base64 图片创建Texture纹理

下面使用的是literallycanvas绘图,然后获取绘图结果为base64内容

var lc = LC.init(
  document.getElementById('canvas-output'),
  {
    imageURLPrefix: '../libs/literallycanvas-0.4.14/img',
    keyboardShortcuts: false,
    tools: [LC.tools.Pencil, LC.tools.Eraser, LC.tools.Line,LC.tools.Rectangle,LC.tools.Text,LC.tools.Polygon,],
    imageSize: {width: 500, height: 300},
    keyboardShortcuts:false,
    primaryColor:'#ff1177'
  }
);
lc.on('drawingChange', function() {
  map3d.planeImage.src = lc.getImage().toDataURL();
});

下面是使用图片纹理创建一个平面

// 地图平面
var self=this;
this.planeImage.onload = function() {
  self.planeTexture.needsUpdate = true;
};
this.planeTexture.image = this.planeImage;
this.planeTexture.wrapS = this.planeTexture.wrapT = THREE.MirroredRepeatWrapping;

var planeGeometry = new THREE.PlaneGeometry(250, 150, 1, 1);
var planeMaterialL = new THREE.MeshLambertMaterial({ color: 0xffffff, side: THREE.DoubleSide });
var planeMaterialB = new THREE.MeshBasicMaterial({ 
  map:  this.planeTexture,
  transparent: true,
});

this.plane = new THREE.SceneUtils.createMultiMaterialObject(planeGeometry,[planeMaterialL,planeMaterialB]);//new THREE.Mesh(planeGeometry, planeMaterialL);
this.plane.position.set(0, -0.01, 0);
this.plane.rotation.x = -0.5 * Math.PI;
this.scene.add(this.plane);

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
private async parseMaterial(osgStateSet: any) { let material = new THREE.MeshBasicMaterial({ // side: THREE.DoubleSide, }); //THREE.FrontSide 背面 // THREE.BackSide 前面 // THREE.DoubleSide 双面 let osgImage = osgStateSet.TextureAttributeList[0].value.StateAttribute.Image; // let texture = this.parseImage(osgImage); let fileName = osgImage.Name; const isJPEG = fileName.search(/.jpe?g($|?)/i) > 0; const isPNG = fileName.search(/.png($|?)/i) > 0; if (!isPNG && !isJPEG) { return; } let mimeType = isPNG ? 'image/png' : 'image/jpeg'; let imageUri: any = new Blob([osgImage.Data], { type: mimeType }); let base64 = await this.blobToBase64(imageUri); // debugger let imageUrl: any = URL.createObjectURL(imageUri); try { let texture = new THREE.TextureLoader().load(base64, () => { texture.needsUpdate = true; // texture.format = THREE.RGBAFormat; texture.type = THREE.UnsignedShort5551Type; texture.minFilter = THREE.LinearMipmapNearestFilter; texture.magFilter = THREE.LinearMipmapNearestFilter; texture.generateMipmaps = false; // texture.format = THREE.RGBAIntegerFormat; // texture.minFilter = THREE.NearestFilter; // texture.magFilter = THREE.NearestFilter; // texture.minFilter = THREE.LinearMipMapLinearFilter; // texture.magFilter = THREE.LinearFilter; // texture.wrapS = THREE.RepeatWrapping; // texture.wrapT = THREE.RepeatWrapping; // texture.anisotropy = 1; // texture.generateMipmaps = false; // texture.encoding = THREE.sRGBEncoding; }); imageUri = null; osgImage = null; imageUrl = null; if (texture) { material.map = texture; } } catch (e) { console.log('纹理加载出错', e); } osgStateSet = null; return material; } private blobToBase64(blob: any) { return new Promise((resolve, reject) => { const fileReader = new FileReader(); // readAsDataURL fileReader.readAsDataURL(blob); fileReader.onload = (e: any) => { resolve(e.target.result); }; }); }没有显示base64图片纹理,也没有报错,请找出问题,并给出详细代码
06-12

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值