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);