Three js curved (bending) CSS3DObject
I am trying to flex three js CSS3DObject:
var element = document.createElement('iframe');
element.src = 'https://example.com/';
var cssObject = new THREE.CSS3DObject( element );
but I can't use a fold modifier on it like on other meshes like:
var dir = new THREE.Vector3( 0, 0, -1 );
var ax = new THREE.Vector3( 0, 1, 0 );
var ang = Math.PI / 4;
modifier.set( dir, ax, ang ).modify(mesh.geometry);
Is there a way to do this, or is it not possible?
The bending effect I'm trying to achieve is similar to this:
source to share
First, I would consider using a not fully curved surface, but a series of flat square elements arranged in a curved manner - a la helix in this example . This is the easiest method and you don't lose anything useful from a UX perspective.
The main problem is that it looks like it CSS3dobject
inherits elements Object3d
, but the css3d renderer does not use geometry anywhere, it just does matrix transformations in css elements, so doing transforms on geometry will have no effect on css elements as rendering only uses camera information to transform and move the css element. It takes a width, a height, and then moves them. All this is a plane.
If what you are trying to do is use iframe
because you want to reuse another website, you can try using a CSS clip to split the iframe into a series of chunks (duplicated elements added to the dom with different clip options), which then are arranged in a cylindrical shape. I made a fiddle with the main gist of what you could try. ... But if you take this pattern, bind locations / scrolling urls, etc. Together on these iframes, you can sync them up and then work out a trigger to put and rotate them, you might have what you're looking for - but its a hack.
But as I said, I would recommend using 2d elements positioned in 3d if you need to use css3d, or canvas rendering + raycasting for button clicks + js for functionality.
source to share