h5 换脸 php,HTML5/WebGL变脸(换脸)动画
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
var faceData, otherData;
var camera, scene, renderer;
var geometry, material, mesh;
var image;
var imgCount = 0;
var MAX_COUNT = 2;
var uvs = [];
var faceMeshes = [];
var faceDatas = [, {
total: 10,
width: 106,
height: 106,
x: 600,
y: 49
}, {
total: 13,
width: 108,
height: 108,
x: 833,
y: 55
}, {
total: 15,
width: 106,
height: 106,
x: 234,
y: 68
}, {
total: 4,
width: 59,
height: 59,
x: 747,
y: 140
}, {
total: 12,
width: 109,
height: 109,
x: 395,
y: 112
}, {
total: 16,
width: 110,
height: 110,
x: 61,
y: 134
}]
var mouse = new THREE.Vector2(9999, 9999);
var raycaster = new THREE.Raycaster();
var isMouseEnter = false;
var INTERSECTED;
function init() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1000;
scene = new THREE.Scene();
geometry = new THREE.PlaneBufferGeometry(image.width, image.height);
var texture = new THREE.Texture(image);
texture.needsUpdate = true;
texture.minFilter = THREE.LinearFilter
material = new THREE.MeshBasicMaterial({
map: texture
});
THREE.ShaderMaterial.prototype.updateFace = function() {
var randomTarget = uvs[parseInt(uvs.length * Math.random())];
this.uniforms.uRandomStart.value = randomTarget.uvStart.clone();
this.uniforms.uRandomEnd.value = randomTarget.uvEnd.clone();
TweenMax.fromTo(this.uniforms.uRate, 0.6, {
value: 0.0
}, {
value: 1.0,
onComplete: this.updateFace2,
onCompleteScope: this
});
}
THREE.ShaderMaterial.prototype.updateFace1 = function() {
var randomTarget = uvs[parseInt(uvs.length * Math.random())];
this.uniforms.uStart.value = randomTarget.uvStart.clone();
this.uniforms.uEnd.value = randomTarget.uvEnd.clone();
TweenMax.fromTo(this.uniforms.uRate, 0.8, {
value: 0.0
}, {
value: 1.0,
delay: 0.2,
onComplete: this.updateFace2,
onCompleteScope: this,
ease: Quint.easeInOut
});
}
THREE.ShaderMaterial.prototype.updateFace2 = function(isNoDelay) {
var randomTarget = uvs[parseInt(uvs.length * Math.random())];
this.uniforms.uRandomStart.value = randomTarget.uvStart.clone();
this.uniforms.uRandomEnd.value = randomTarget.uvEnd.clone();
TweenMax.to(this.uniforms.uRate, 0.8, {
value: 0.0,
delay: isNoDelay ? 0.0 : 0.2,
onComplete: this.updateFace1,
onCompleteScope: this,
ease: Quint.easeInOut
});
}
THREE.ShaderMaterial.prototype.mouseEnter = function(intersected) {
TweenLite.killTweensOf(this.uniforms.uRate);
this.uniforms.uRandomStart.value.x = this.uniforms.uStart.value.x * this.uniforms.uRate.value + this.uniforms.uRandomStart.value.x * (1 - this.uniforms.uRate.value);
this.uniforms.uRandomStart.value.y = this.uniforms.uStart.value.y * this.uniforms.uRate.value + this.uniforms.uRandomStart.value.y * (1 - this.uniforms.uRate.value);
this.uniforms.uRandomEnd.value.x = this.uniforms.uEnd.value.x * this.uniforms.uRate.value + this.uniforms.uRandomEnd.value.x * (1 - this.uniforms.uRate.value);
this.uniforms.uRandomEnd.value.y = this.uniforms.uEnd.value.y * this.uniforms.uRate.value + this.uniforms.uRandomEnd.value.y * (1 - this.uniforms.uRate.value);
this.uniforms.uStart.value = intersected.material.originalUv.start.clone();
this.uniforms.uEnd.value = intersected.material.originalUv.end.clone();
TweenMax.fromTo(this.uniforms.uRate, 0.6, {
value: 0.0
}, {
value: 1.0,
ease: Quint.easeInOut
});
}
THREE.ShaderMaterial.prototype.mouseOut = function() {
TweenLite.killTweensOf(this.uniforms.uRate);
this.uniforms.uStart.value.x = this.uniforms.uStart.value.x * this.uniforms.uRate.value + this.uniforms.uRandomStart.value.x * (1 - this.uniforms.uRate.value);
this.uniforms.uStart.value.y = this.uniforms.uStart.value.y * this.uniforms.uRate.value + this.uniforms.uRandomStart.value.y * (1 - this.uniforms.uRate.value);
this.uniforms.uEnd.value.x = this.uniforms.uEnd.value.x * this.uniforms.uRate.value + this.uniforms.uRandomEnd.value.x * (1 - this.uniforms.uRate.value);
this.uniforms.uEnd.value.y = this.uniforms.uEnd.value.y * this.uniforms.uRate.value + this.uniforms.uRandomEnd.value.y * (1 - this.uniforms.uRate.value);
var randomTarget = uvs[parseInt(uvs.length * Math.random())];
this.uniforms.uRandomStart.value = randomTarget.uvStart.clone();
this.uniforms.uRandomEnd.value = randomTarget.uvEnd.clone();
TweenMax.fromTo(this.uniforms.uRate, 0.6, {
value: 1.0
}, {
value: 0.0,
ease: Quint.easeInOut,
onComplete: this.updateFace1,
onCompleteScope: this
});
// this.updateFace2(true)
}
faceDatas.forEach(function(data) {
var xPos = data.width / 2 + data.x - image.width / 2;
var yPos = -(data.height / 2 + data.y) + image.height / 2;
var uvStart = new THREE.Vector2((data.x) / image.width, 1.0 - (data.y + data.height) / image.height);
var uvEnd = new THREE.Vector2((data.x + data.width) / image.width, 1.0 - data.y / image.height);
uvs.push({
uvStart: uvStart,
uvEnd: uvEnd
});
var geo = new THREE.PlaneBufferGeometry(data.width, data.height);
var shaderMaterial = new THREE.ShaderMaterial({
uniforms: {
tex: {
value: texture
},
uRate: {
value: 0
},
uStart: {
value: uvStart.clone()
},
uEnd: {
value: uvEnd.clone()
},
uRandomStart: {
value: null
},
uRandomEnd: {
value: null
}
},
vertexShader: document.getElementById("shader-vs").text,
fragmentShader: document.getElementById("shader-fs").text
});
shaderMaterial.originalUv = {
start: uvStart.clone(),
end: uvEnd.clone()
};
var mesh = new THREE.Mesh(geo, shaderMaterial);
mesh.position.set(xPos, yPos, 0);
faceMeshes.push(mesh);
scene.add(mesh);
});
faceMeshes.forEach(function(mesh) {
mesh.material.updateFace();
})
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000);
document.body.appendChild(renderer.domElement);
document.addEventListener('mousemove', onDocumentMouseMove, false);
requestAnimationFrame(loop);
}
function loop() {
requestAnimationFrame(loop);
raycaster.setFromCamera(mouse, camera)
var intersects = raycaster.intersectObjects(faceMeshes);
if (intersects.length == 1) {
if (INTERSECTED != intersects[0].object) {
if (!isMouseEnter) {
isMouseEnter = true;
INTERSECTED = intersects[0].object;
document.body.style.cursor = "pointer";
faceMeshes.forEach(function(mesh) {
mesh.material.mouseEnter(INTERSECTED);
})
}
}
} else {
document.body.style.cursor = "default";
// window.removeEventListener("click", onClick);
if (isMouseEnter) {
faceMeshes.forEach(function(mesh) {
mesh.material.mouseOut();
})
isMouseEnter = false;
INTERSECTED = null;
}
}
renderer.render(scene, camera);
}
function onDocumentMouseMove(event) {
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}
window.addEventListener("resize", function(ev) {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
image = new Image();
image.onload = init;
image.crossOrigin = "Anonymous";
image.src = "/uploads/161001/normal1.jpg";
h5 换脸 php,HTML5/WebGL变脸(换脸)动画相关推荐
- html如何实现3d动画,基于webGL和HTML5的网页3D动画的设计与实现.pdf
ISSN 1009-3044 E-mail: eduf@ 第 卷第 期 年 月 7 28 (2011 10 ) 与技术 Computer Knowledge and Technology 电脑知识与技 ...
- html5动画变形效果,碉堡了,基于HTML5 WebGL的图像扭曲变形动画开源特效
简要说明 这是一款基于HTML5 WebGL的图像扭曲变形动画特效.该特效中,通过Three.js来制作从一幅缩略图,扭曲变形为全屏大图的动画特效,共有6种炫酷的动画效果. 视频加载中... 该特效提 ...
- 视频透明代码html5,webgl 实现透明视频 动画
导言: 目前动画效果越来越酷炫,动画的绘制难度也逐渐增大,本期我们讲下透明视频,动画的另一种方案, 本文通过webgl来实现透明动画视频. 最终效果demo (如果没反应,点一下屏幕) 需求是啥? 比 ...
- Web 3D机房,智能数字机房HTML5 WebGL(ThreeJS)匠心打造
在H5使用3D技术门槛比较低了,它的基础是WebGL(ThreeJS),一个OpenGL的浏览器子集,支持大部分主要3D功能接口.目前主流的浏览器都有较好的支持,IE需要11.最近web 3D机房研发 ...
- 6个超炫酷的HTML5电子书翻页动画【转】
6个超炫酷的HTML5电子书翻页动画 WebGL 演示网址:http://bookcase.chromeexperiments.com 相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏 ...
- 8个超震撼的HTML5和纯CSS3动画源码
HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家 ...
- c#web页面显示弹窗_基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用
前言 在目前大数据时代背景之下,数据可视化的需求也变得越来越庞大,在数据可视化的背景之下,通过智能机器间的链接并最终将人机链接,结合软件和大数据分析的工业互联网也将变得越来越容易实现! 国家也敏锐意识 ...
- 基于 HTML5 WebGL 的高炉炼铁厂可视化系统
前言 在当今 工业4.0 新时代的推动下,不仅迎来了 工业互联网 的发展,还开启了5G时代的新次元.而伴随着带宽的提升,网络信息飞速发展,能源管控上与实时预警在工业互联网中也占着举足轻重的地位,而对于 ...
- 工业互联网新发展:基于 HTML5 WebGL 的高炉炼铁厂可视化系统
前言 在当今 工业4.0 新时代的推动下,不仅迎来了 工业互联网 的发展,还开启了 5G 时代 的新次源.而伴随着带宽的提升,网络信息飞速发展,能源管控上与实时预警在工业互联网中也占着举足轻重的地位, ...
最新文章
- 据说这是程序员为什么改行送外卖的原因
- Selenium无法点击元素,报错:ElementClickInterceptedException:element click intercepted
- 入门Python,限时1元!
- How to Configure Eclipse for Python --- 在eclipse中如何配置pydev
- Android 系统调试(1)---禁止Selinux 的方法
- mysql数据库无法被其他ip访问的解决方法
- 华为NP课程笔记5-中间系统到中间系统实验
- 2022-2028年全球与中国MEMS话筒行业竞争格局与投资战略研究
- BJFU_数据结构习题_274六度空间理论
- 本体论:Gene Ontology (基因本体)
- [后缀数组][trie合并][启发式合并][并查集] LOJ #6198. 谢特
- [HLSL]HLSL 入门参考 (dx11龙书附录B译文)
- 苹果服务器国内维护,苹果中国iCloud服务器数据开始转移,这些问题你要注意!...
- c语言中的正弦函数与余弦函数
- CSS颜色代码大全及a标签超链接颜色改变
- opencv打开摄像头失败的一种可能cv2.error: Unknown C++ exception from OpenCV code
- msql中常用的DDL语句
- JZOJ6362. 【NOIP2019模拟2019.9.18】数星星(star)
- revit 对计算机最低配置,Revit 软件对电脑配置的要求
- C语言函数体内无条件的大括号
热门文章
- 星志远电商:拼多多头像如何保存?
- [附源码]计算机毕业设计JAVA高校资源共享平台
- 新研究显示尿石素A (Mitopure®)可改善线粒体健康,减少关节软骨损伤并减轻骨关节炎疼痛
- 【历史上的今天】1 月 15 日:维基百科上线;信息安全大师出生;英特尔推出 Viiv
- 2020年,冯唐49岁:我给20、30岁IT职场年轻人的建议
- Shiro--解决is not eligible for getting processed by all BeanPostProcessors
- Asp.net Core 入门实战
- SRS Audio Sandbox(终极的音频增强软件)
- 大话西游手游服务器合服信息查询,大话西游手游合区查询 6月21日合区服务器列表...
- linux 段错误分析