I am trying to bend a three js CSS3DObject:
var element = document.createElement('iframe'); element.src = 'https://example.com/'; var cssObject = new THREE.CSS3DObject( element ); but I cannot use the bend modifier on it, like I do on other meshes, e.g.:
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 some way to do it or it is not possible?
The bend effect I am trying to achieve is similar to this:
1 Answers
Answers 1
First, I would consider the possibility of using not a fully curved surface, but a series of flat square elements arranged in a curved manner- a la helix mode in this example. This is the easiest method and you don't lose anything of value from a UX perspective
The underlying issue is that it looks like the CSS3dobject does inherit Object3d elements, but the css3d renderer doesn't use geometry anywhere, it's just performing matrix transforms on the css elements, so performing transformations on geometry will have no effect on the css elements, since the renderer is only using camera information to transform and move the css element. It takes width, height, and then moves them around. Everything is a plane.
If what you're trying to do is to use the iframe because you want to re-use another website, you could maybe try using the CSS clip parameter to split the iframe into a series of chunks (duplicate elements added to the dom with different clip parameters) that you then arrange into a cylindrical shape. I made a fiddle with a basic gist of what you could try.. But if you take this template, bind the url locations/scrolling etc together on those iframes, you can keep them syncd, and then work out the trig to position and rotate them, you might have what you're looking for - but its hacky.
But like I said, i would recommend using 2d elements arranged in 3d if you have to use css3d, or the canvas renderer + raycasting for button clicks + js for functionality.
0 comments:
Post a Comment