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控制过程的图片轮播 运用 ...
随机推荐
- 排序算法C++实现
先按照王道系列的伪代码,写了一下常见的排序算法.代码先放这儿,先不做算法分析,回头再来分析消化. // 排序算法.cpp : 定义控制台应用程序的入口点. // #include "stda ...
- [C# 基础知识系列]专题七: 泛型深入理解(一) (转载)
引言: 在上一个专题中介绍了C#2.0 中引入泛型的原因以及有了泛型后所带来的好处,然而上一专题相当于是介绍了泛型的一些基本知识的,对于泛型的性能为什么会比非泛型的性能高却没有给出理由,所以在这个专题 ...
- webpos登录不上
jo=new JSONObject(((java.sql.Clob)s).getSubString(1, (int) ((java.sql.Clob)s).length()));
- JSON的介绍与细节
一.关于JSON JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.采用完全独立于编程语言的文本格式来存储和表示数据.简洁和清晰的层次结构 ...
- test for open live writer
this is a test article post by open live writer.
- 爬虫基础之urllib库(代码演示)
# 自定义opener from urllib.request import ProxyHandler,build_opener from urllib.error import URLError ...
- Oracle数据仓库套件
OBIEE RPD:定义不同分析的主题角度,确定相应的事实表和维度表 报表层:选取需要的维度和度量,根据筛选器选取需要的数据 可视化:用图形展示数据,支持常见的图形:如折线图,饼图,堆叠图等. ODI ...
- python 各种开源库
测试开发 来源:https://www.jianshu.com/p/ea6f7fb69501 Web UI测试自动化 splinter - web UI测试工具,基于selnium封装. 链接 sel ...
- 12集合(2)-----Set
一.总体分类 Collection(包括方法add,remove,contains,clear,size) List(接口) LinkedList ArrayList Vector---Stack 2 ...
- [Java Web学习]Tomcat启动时报war exploded: Error during artifact deployment
报错:Artifact FirstWeb:war exploded: Error during artifact deployment. See server log for details. SEV ...