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";