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: , height: },
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(, , , );
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.01, );
this.plane.rotation.x = -0.5 * Math.PI;
this.scene.add(this.plane);
three.js使用base64 图片创建Texture纹理的更多相关文章
- 图片上传前 压缩,base64图片压缩 Exif.js处理ios拍照倒置等问题
曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台,可惜没有及时做总结保留代码,只记得js利用了base64位压缩和Exif.js进行图片处理,还有其中让我头疼的ios拍照上传后会倒置等诸多问题 ...
- JS将本地图片转化成base64码
在图片上传的时候,有时候后台需要前台上传base64文件,这时候我们就需要将图片资源转化成base64,下面这段js代码就可实现此功能. 1.首先在html里定义一个input输入框: BASE64图 ...
- js获取base64格式图片预览上传并用php保存到本地服务器指定文件夹
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 利用cropper插件裁剪本地图片,然后将裁剪过后的base64图片上传至七牛云空间
现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头 ...
- C#MVC和cropper.js实现剪裁图片ajax上传的弹出层
首先使用cropper.js插件,能够将剪裁后的图片返回为base64编码,后台根据base64编码解析保存图片. jQuery.cropper: 是一款使用简单且功能强大的图片剪裁jquery插件 ...
- 基于vue + axios + lrz.js 微信端图片压缩上传
业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...
- 用js实现base64编码器
base-64作为常见的编码函数,在基本认证.摘要认证以及一些HTTP扩展中得到了大量应用.在前端领域,也常常把图片转换为base-64编码在网络中传输.本文将详细介绍base64的原理及用js实现b ...
- 完整说明使用SpringBoot+js实现滑动图片验证
常见的网站验证方式有手机短信验证,图片字符验证,滑块验证,滑块图片验证.本文主要讲解的是滑块图片验证的实现流程.包括后台和前端的实现. 实现效果 使用的API java.awt.image.Buffe ...
- 原生js+css3实现图片自动切换,图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
随机推荐
- Ricker wavelet 简介
本文依照参考文献简介 Ricker wavelet . 参考: [1] Frequency of the Ricker wavelet DOI: 10.1190/GEO2014-0441.1 [2] ...
- 正则表达式andJS内存空间详细图解
http://www.runoob.com/js/js-regexp.html https://blog.csdn.net/pingfan592/article/details/55189622
- 监控网络带宽 使用speedtest-cli命令
1.监控网络带宽 使用speedtest-cli命令 l 安装命令: yum install python-pip –y pip install speedtest-cli l 运行命令: speed ...
- 如何才能在python的路上走得更远
刚开始了新的课程,现在又没有什么心情学习了,不知点解就是提不起兴趣去学习,为什么呢?学习python如何才能提起劲,有什么方法可以提上劲学习?
- 处理文件中的" M-BM- "特殊符号
有时为了方便,会在Excel中进行代码拼装,比如说是建表SQL语句,但是在复制的代码过程中可能会带入不可见字符,造成代码无法运行. 本次代码中就需要了不可见的" M-BM- " 问 ...
- ubuntu18.04LTS修改键盘键位
在Linux中为了敲命令方便,所以需要做一下键盘键位调整: 1.Esc键和`(即数字键1前面的那个键)对换: 2.Caps Lock键和左Control键对换: 编辑键位文件: sudo vim /u ...
- python学习4---实现快速排序
1.QuickSort def Rand_Partition(A,p,r): """ 划分数组的元素下标q :param A: 数组 :param p: 数组左边界 :p ...
- Codeforces1113F. Sasha and Interesting Fact from Graph Theory(组合数学 计数 广义Cayley定理)
题目链接:传送门 思路: 计数.树的结构和边权的计数可以分开讨论. ①假设从a到b的路径上有e条边,那么路径上就有e-1个点.构造这条路径上的点有$A_{n-2}^{e-1}$种方案: ②这条路径的权 ...
- Python之PIL库的运用、GIF处理
一.PIL库简介 PIL(Python Image Library)库是Python语言的第三方库,它支持图像存储.显示和处理,它能够处理几乎所有图片格式,可以完成对图像的缩放.剪裁.折叠以及像图片添 ...
- ajax的小知识---总是得到重复的数据
按xmlhttp.open("GET","/try/ajax/demo_get.php",true);发送,可能会得到缓存中的结果; 可以改为xmlhttp.o ...