下面使用的是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);