how do i implement this Philips / Black Friday with three js
What did you try so far? Are you stuck on something specific?
- make a scene
- make sure you have some lights, or things will be black (no light).
- Make a box.
- Then make 4 planes.
- Apply a texture to each plane with the image you want (jpeg).
- Simple texture example (but use ImageLoader instead of TGALoader for standad image types)
- Then rotate the box or planes.
- add pointer event handlers to rotate the cubes
Here’s a simple example with Lume 3D HTML, which uses Three.js for rendering under the hood, but it is not plain Three.js. At least it can show the basic idea:
2 Likes
I think three.js is not needed here at all, such effect can be created using only CSS transforms and, perhaps, gsap for smoothness.
1 Like
True that, but I would stay clear and far from CSS 3D. It does not work as you might expect in all browsers, and you may end up getting disappointed when it breaks and there’s nothing you can do because its in the native browser code.
With CSS 3D you also won’t be able to easily add anything fun like lights, shadows, shine, reflection, fog, 3D curved surfaces, etc.
This bug in Safari has kept CSS 3D totally broken in Custom Elements for years, that they’re finally fixing in the upcoming Safari 18:
https://x.com/trusktr/status/1831014168822272386
And there are other cross-browser bugs that have been around for a long long time that, when they happen, are out of your control and leaving your app feeling like it is trash when really its the browser’s implementation. For example:
https://x.com/trusktr/status/1831080283703287912
And last but not least, besides the bugs, the spec itself has dumb things in it. For example, the spec authors decided that giving opacity to a parent element should flatten transforms.
Here’s an example of what I mean. In this CSS 3D editor, watch what happens when I change the opacity of a 3D shape:
There are workarounds for it, but it was needlessy breaking for CSS 3D content on the web, and the feature itself is just wildly bonkers.
Like, imagine if Three.js would flatten your 3D model if you applied opacity to it. 
I’ve been working with CSS 3D for years, and its basically just been disappointing.
Forget about CSS 3D, at least today: it still has dumb issues 1.5 decades after it came out, basically the worse 3D engine compared to all others of this day.
When you write 3D with Three.js, Lume, react-three-fiber, PlayCanvas, Babylon.js, etc, you’ll get a much more powerful 3D system that works across all devices and OSes with minimal differences if any.
If you can just roll with Three.js or any high-level WebGL lib, you’re gonna just live a happier life learning cool tricks and making awesome stuff that works consistently (well, nothing’s perfect, but far better than CSS 3D).