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控制过程的图片轮播 运用 ...
随机推荐
- CSS常用属性-xy
一.文本Text CSS text-align 属性 文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...
- PostgreSQL注入基础
一般注入多用于在mssql和mysql两类数据库中,如mssql+asp.mysql+php则是最为常见的搭配环境.不同的网站应用的数据库也大不一样,根据数据库的处理能力.负载等多重因素决定.本文主要 ...
- Springboot中的事件Event
事件Event作为一种常用的线程通讯工具,在Springboot中可以方便地提供开发者进行线程交互. 1.事件定义 1 import org.springframework.context.Appli ...
- sourcetree 修改文件后提交上去,文件丢失
提交sourcetree 修改后,图片资源提交上去了,json文件没提交上去,原因是本地finder隐藏文件.gitignore_global中把一些文件类型都隐藏了不让提交. 具体使用default ...
- MDK5报错missing closing quote
用emwin做界面的时候遇到的错误,MDK5可能无法编译一些汉字编码,对应汉字在信息反馈中会显示为乱码,更会附带一些如“expected a "}"”这样的错误提示. 解决方法:O ...
- thinkphp5.0--编写api,返回json格式
前几天没有写php代码,今天写了一下,今天的任务主要是构建自己的异常体系类,出现一个问题,就是返回结果不是json格式,而是一个页面,我找了一两个小时,没有找到问题,以为代码的问题,用断点调试了一通, ...
- C#创建、读写、增加、删除XML操作
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...
- centos7 - mongodb3.6.5-配置文件
创建Linux管理员账号admin, 并加入wheel组,对mongodb, php等进行统一管理~ systemLog:destination: filelogAppend: truepath: / ...
- 《Java编程思想》读书笔记-赋值操作符
在最底层,Java中的数据是通过使用操作符来操作的.接下来我们逐一认识一些操作符. 怎么运用操作符 操作符接受一个或多个参数,并生成一个新值. 基本操作符 赋值操作符 符号:= 作用:取右边的值,把它 ...
- Hadoop、Strom集群实现日志自动清理
Hadoop+Storm集群,运行一段时间ZooKeeper等关键进程自动停止运行,经检测是系统磁盘不足 系统磁盘100%: 查找大文件后发现,空间均被ZooKeeper产生的log占用 find / ...