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控制过程的图片轮播 运用 ...
随机推荐
- Python SyntaxError: invalid token
python命名不能以数字开头,import时会报错
- uniapp如何将微信小程序API封装为Promise
var SYNC_API_RE = /requireNativePlugin|upx2px|hideKeyboard|canIUse|^create|Sync$|Manager$/; var CALL ...
- 项目里如何访问AppDelegate
项目里面访问AppDelegate做全局变量用有好几种方式 最原始就是 AppDelegate *appDelegate = (AppDelegate *)[[UIApplication shared ...
- Map<String,Integer>acount字符串出现的次数
- TensorFlow,Keras限制GPU显存
运行TensorFlow程序会占用过多的显卡比例,多人共同使用GPU的时候,会造成后面的人无法运行程序. 一.TensorFlow 1.预加载比例限制 tf_config = tensorflow.C ...
- oracle 常见查询题
查询比本部门平均薪水高的员工信息 解法一: select d.deptno,e.empno,e.ename,e.sal,d.avgsal from emp e, (select deptno,avg( ...
- wireshark相关知识
wireshark抓包原理如下 https://www.cnblogs.com/yhcreak/p/5911904.html
- C# 枚举用法
public static class EnumExtensions { public static string GetDescription(this Enum value) { return v ...
- antd-vue按需加载插件babel-plugin-import报错
报错.bezierEasingMixin().百度了一下是Less版本太高的原因,我都迷了,还有太新的过... 解决方法:将less版本降到3.0以下 因为我是用的npm生成的vue项目.所以cmd命 ...
- 软件开发者路线图梗概&书摘chapter6
安排你的课程:靠自己去寻求建议,安排课程 1.阅读列表:维护一张列表,更新未读和已读 保存在公共空间 得出模式.趋势.缺口,决定下一步,得到建议 参考书目形成优先级队列 从宽泛的读起,指导者推荐 能使 ...