Glass Demo, My beloved glass demo
Hold Click+Drag to move background
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.160.1/build/three.module.js';
import {
PillGeometry
} from "./PillGeometry.js";
let texture;
const renderer = new THREE.WebGLRenderer({
alpha: true,
stencil: true
});
renderer.setSize(document.body.scrollWidth, document.body.scrollHeight);
renderer.domElement.setAttribute('data-html2canvas-ignore', 'true');
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(
-document.body.scrollWidth / 2, document.body.scrollHeight / 2,
document.body.scrollWidth / 2, -document.body.scrollHeight / 2,
0, 20000
);
camera.position.set(0, 0, 100)
const createGlassMaterial = () => {
const material = new THREE.MeshPhysicalMaterial({
roughness: 0.3,
transmission: 1,
thickness: 32,
ior: 2,
reflectivity: 0.9,
dispersion: 10
});
material.needsUpdate = true;
return material;
}
let glassMesh = new THREE.Mesh(new PillGeometry(
640,
480,
24,
86,
16,
), createGlassMaterial());
glassMesh.position.set(0, 0, 0);
camera.lookAt(glassMesh.position);
const geometry = new THREE.PlaneGeometry(window.innerWidth, window.innerHeight);
const material = new THREE.MeshBasicMaterial({
transparent: false
});
material.needsUpdate = true;
const plane = new THREE.Mesh(geometry, material);
plane.position.set(0, 0, -53);
scene.add(plane);
scene.add(glassMesh);
const updateTexture = (canvas) => {
const newTexture = new THREE.CanvasTexture(canvas);
newTexture.minFilter = THREE.LinearFilter;
newTexture.encoding = THREE.sRGBEncoding;
if (texture) texture.dispose();
texture = newTexture;
material.map = texture;
material.needsUpdate = true;
glassMesh.material.stencilWrite = true;
glassMesh.material.stencilFunc = THREE.AlwaysStencilFunc;
glassMesh.material.stencilRef = 1;
glassMesh.material.stencilZPass = THREE.ReplaceStencilOp;
glassMesh.renderOrder = 1;
material.stencilWrite = true;
material.stencilFunc = THREE.EqualStencilFunc;
material.stencilRef = 1;
material.stencilZPass = THREE.KeepStencilOp;
plane.renderOrder = 2;
}
let image;
let fps = 5;
setInterval(() => {
html2canvas(document.body, {
imageTimeout: 1000 / fps,
scrollY: 0
}).then(function(canvas) {
// canvasImage.src = canvas.toDataURL('image/png');
updateTexture(canvas)
});
}, 1000 / fps)
let dskjfldskjf = 1;
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
glassMesh.rotation.set(0, 0, dskjfldskjf)
dskjfldskjf += 0.01;
const zoom = baseZoom + Math.sin(t) * amplitude;
document.body.style.zoom = zoom;
t += speed / 60;
requestAnimationFrame(animateZoom);
}
animate();
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, document.body.scrollHeight);
camera.left = -window.innerWidth / 2;
camera.right = window.innerWidth / 2;
camera.top = window.innerHeight / 2;
camera.bottom = -window.innerHeight / 2;
camera.updateProjectionMatrix();
plane.geometry = new THREE.PlaneGeometry(window.innerWidth, window.innerHeight);
});
let t = 0;
const baseZoom = 1; // Base zoom level
const amplitude = 0.1; // How much it zooms in and out
const speed = 2 * Math.PI / 2; // Full wave every 2 seconds
-->