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控制过程的图片轮播 运用 ...
随机推荐
- iOS开发,改变系统铃声音量和静音,并非媒体播放音量
使用AVSystemController可以改变系统声音,而且是铃声,并非媒体播放的声音. 它可以让iPhone手机静音.但是,AVSystemController存在于私有Celestial框架中. ...
- ElasticSearch CPU和内存占用高的优化记录
公司最近使用ElasticSearch作为数据报表汇总引擎.上线三个月累计数据800万,但是今天突然大面积出现查询超时,上服务器查看服务运行情况,发现cpu使用率高达300% mem 使用率也到了90 ...
- leftBarButtonItem 的颜色
修改系统:leftBarButtonItem, rightBarButtonItem 的颜色 在你需要修改的页面,ViewDidload()方法里面贴上下面代码 self.navigationCont ...
- 【leetcode】475. Heaters
problem 475. Heaters solution1: class Solution { public: int findRadius(vector<int>& house ...
- android 事件绑定
layout布局设计了页面,如何绑定事件,与用户进行交互需要在Activity中进行处理. 下面的layout,有两个按钮. <LinearLayout android:layout_width ...
- libnids校验和引起回放包不能正常捕捉
如题 取消校验和校验即可: struct nids_chksum_ctl temp;temp.netaddr = 0;temp.mask = 0;temp.action = 1;nids_regist ...
- Jump跳板机的搭建和部署
Jump跳板机简绍 概括 Jumpserver 是一款由python编写开源的跳板机(堡垒机)系统,实现了跳板机应有的功能.基于ssh协议来管理,客户端无需安装agent. Jumpserver ...
- 在Django中使用ForeignKey()报错问题的解决
在Django2的models中建立一对多的关系使用ForeignKey(): student = models.ForeignKey("Classes") 报错: TypeErr ...
- 入学java的第一天
登录http://www.oracle.com,下载JDK(J2SE) JDK 1.0,1.1,1.2,1.3,1.4 1.5(JDK5.0) 支持注解.支持泛型 1.6(JDK6.0)Server2 ...
- 4. Traffic monitoring tools (流量监控工具 10个)
4. Traffic monitoring tools (流量监控工具 10个)EttercapNtop SolarWinds已经创建并销售了针对系统管理员的数十种专用工具. 安全相关工具包括许多网络 ...