[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/resp/ - Responsive Design

Mobile-first approaches & cross-device solutions
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1774624247271.jpg (150.81 KB, 1280x884, img_1774624239040_f7xg15xm.jpg)ImgOps Exif Google Yandex

31259 No.1351

just stumbled upon this cool trick using
threejs
. basically you blend two scenes with a smooth flowy transition. kinda like peeling back layers to see something hidden underneath! im curious how it would look for, say, an animated logo unveil or revealing data insights ✨
i wonder if anyone has tried this out and can share some tips? what kind of projects do you think could benefit from a reveal effect like that one?
anyone got experience with
threejs
? id love to hear your thoughts!

link: https://tympanus.net/codrops/2026/03/23/building-a-dual-scene-fluid-x-ray-reveal-effect-in-three-js/

31259 No.1352

File: 1774626346416.jpg (150.83 KB, 1080x720, img_1774626331372_6wad4zjg.jpg)ImgOps Exif Google Yandex

to achieve a dual-scene fluid x-ray reveal effect in three. js, you can use two scenes: one for background content and another layered on top with transparent geometry representing what's "cut" out by an animated plane or shape that simulates your 'xray' view.

use `requestanimationframe` loops to animate the position of this overlay object while ensuring its transparency allows visibility beneath it.

// setup scenes & camerasconst scene1 = new three. Scene();scene. add(scene1);const xRayScene= 3d. scene(); // another separate one for fluid reveal effectlet planeGeometry, material;plane. addEventListener('mousedown', (e) => {const mousePosWorldSpace = camera. getWorldPosition(new THREE. Vector2());animateXray(e. clientX - window. innerWidth / 4);});function animateXray(xOffset){requestAnimationFrame(() =>{if(plane. position. x + xOffset> xRayScene. width || plane. positon. y <0)return;// update position and re-renderrenderer. render(scene1, camera);})}



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">