Three CSS Layout

Resources
, , ,
1

Hi everyone,

Through multiple posts on this forum, I’ve noticed a recurring need for a straightforward solution to overlay Three.js objects onto an HTML layout. In response, I’ve created a pair of utility classes – CSSLayout and its child, CSSLayoutObject – designed to simplify this process. These classes seamlessly integrate with Three.js, allowing for effortless overlay creation, responsive design implementation, and dynamic transformations with animations and transitions using CSS3 and HTML5.

Here you can find the github repo, with an interactive demo, a simple template, and a basic jsFidlle.

Feedback and suggestions are more than welcome.

7 Likes
2

This looks like very useful !

As a side note, the red objects are too round and their rotation around the vertical axes is hard to perceive. I have the impression that the objects are fixed, but their stripes are moving over the fixed shape.

image

1 Like
3

The stripes were intentional, to reflect the rotation, didn’t expect them to be perceived this way. I’ll see what I can do about it.

In the meanwhile, you can check the other animations, floating, pulse, bounce … All CSS keyframes animations.

update:
@PavelBoytchev, I’m more worried about the drop down menu, is it clear that it’s clickable, or should I make it, more obvious.

Screenshot from 2024-03-10 10-11-11

1 Like
4

The menu is fine. Didn’t cause me any problem. From interface point of view I had a slight confusion with the (<-|->) marker in the middle – I thought it is a slider to be moved left-and-right.

Is it possible to contain the graphics within each block? [Object fit] option does not make any visual change.

1 Like
5

It should emulate CSS object-fit, try different aspect ratios between the html layout and the three.js. The following has the HTML layout aspect at 16:9 and the three.js at 1:1.

aspects
aspects1847×900 112 KB

But I can see that cover is not centered on the three.js side. I should fix this.

update:

Now I remember, Cover is not centered because of the scroll:

2 Likes