108 lines
2.6 KiB
JavaScript
108 lines
2.6 KiB
JavaScript
var lastUpdate;
|
|
var container;
|
|
var camera, scene, renderer;
|
|
var uniforms;
|
|
|
|
function init() {
|
|
// basic setup
|
|
container = document.getElementById("container");
|
|
camera = new THREE.Camera();
|
|
camera.position.z = 1;
|
|
scene = new THREE.Scene();
|
|
var geometry = new THREE.PlaneBufferGeometry(2, 2);
|
|
|
|
const map = document.querySelector("#video");
|
|
map.oncanplay = function() {
|
|
map.play();
|
|
};
|
|
const texture = new THREE.VideoTexture(map);
|
|
texture.minFilter = THREE.LinearFilter;
|
|
|
|
const map2 = document.querySelector("#video2");
|
|
map2.oncanplay = function() {
|
|
map2.play();
|
|
};
|
|
const texture2 = new THREE.VideoTexture(map2);
|
|
texture2.minFilter = THREE.LinearFilter;
|
|
|
|
// shader stuff
|
|
uniforms = {
|
|
intensity: { type: "f", value: 0.75 },
|
|
dispFactor: { type: "f", value: 0.0 },
|
|
direction: { type: "b", value: false },
|
|
map1: { type: "t", value: texture },
|
|
map2: { type: "t", value: texture2 }
|
|
};
|
|
var material = new THREE.ShaderMaterial({
|
|
uniforms: uniforms,
|
|
vertexShader: document.getElementById("vertexShader").textContent,
|
|
fragmentShader: document.getElementById("fragmentShader").textContent
|
|
});
|
|
|
|
lastUpdate = new Date().getTime();
|
|
// put it together for rendering
|
|
var mesh = new THREE.Mesh(geometry, material);
|
|
scene.add(mesh);
|
|
renderer = new THREE.WebGLRenderer();
|
|
renderer.setPixelRatio(window.devicePixelRatio);
|
|
container.appendChild(renderer.domElement);
|
|
|
|
// event listeners
|
|
onWindowResize();
|
|
window.addEventListener("resize", onWindowResize, false);
|
|
|
|
// gui
|
|
this.GUI = new dat.GUI();
|
|
this.GUI.add(uniforms.intensity, "value", 0, 2, 0.01).name("intensity");
|
|
this.GUI.add(uniforms.dispFactor, "value", 0, 1, 0.01).name("transition");
|
|
|
|
this.guiObj = {
|
|
reverse: false
|
|
};
|
|
this.GUI.add(this.guiObj, "reverse")
|
|
.listen()
|
|
.onChange(() => {
|
|
uniforms.direction.value = this.guiObj.reverse;
|
|
});
|
|
|
|
var self = this;
|
|
var obj = {
|
|
animate: () => {
|
|
var t = 1;
|
|
if (this._value == 1) {
|
|
t = 0;
|
|
}
|
|
TweenMax.to(uniforms.dispFactor, 1.1, {
|
|
value: t,
|
|
ease: Expo.easeOut
|
|
});
|
|
|
|
if (this._value == 1) {
|
|
this._value = 0;
|
|
} else {
|
|
this._value = 1;
|
|
}
|
|
}
|
|
};
|
|
this.GUI.add(obj, "animate");
|
|
}
|
|
|
|
// events
|
|
function onWindowResize(evt) {
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
}
|
|
function animate() {
|
|
var currentTime = new Date().getTime();
|
|
var timeSinceLastUpdate = currentTime - lastUpdate;
|
|
lastUpdate = currentTime;
|
|
|
|
requestAnimationFrame(animate);
|
|
render(timeSinceLastUpdate);
|
|
}
|
|
function render(timeDelta) {
|
|
renderer.render(scene, camera);
|
|
}
|
|
|
|
// boot
|
|
init();
|
|
animate(); |