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

2018/12/28 10:09
阅读数 843

下面使用的是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
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部