Bent CSS3DObject in Three.js

I'm attempting to manipulate a CSS3DObject in Three.js by bending it:

var element = document.createElement('iframe');
element.src = 'https://example.com/';
var cssObject = new THREE.CSS3DObject( element );

However, I'm unable to apply the bend modifier to it as I do with other meshes, for example:

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 method to achieve this effect, or is it simply not feasible?

The bend effect I'm aiming for is similar to the one shown in this image:

https://i.sstatic.net/aPrPl.jpg

Answer №1

Instead of using a completely curved surface, you could try arranging flat square elements in a curved manner, similar to the helix mode in this example. This method is simple and maintains a good user experience.

The issue here is that while the CSS3dobject inherits Object3d elements, the css3d renderer doesn't utilize geometry for transformations. Instead, it performs matrix transforms on the css elements based on camera information. This means transforming geometry will not affect css elements as everything is treated as a plane.

If you're considering using an iframe to embed content from another website, you could experiment with splitting the iframe into chunks using the CSS clip parameter and arranging them in a cylindrical shape. Check out this fiddle for a basic example. However, this approach may require syncing the iframes and manually positioning them, which can be a bit complex.

In the end, I suggest using 2d elements arranged in a 3d space if you must stick with css3d. Alternatively, consider using the canvas renderer with raycasting for interactive elements and JavaScript for functionality.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In Vue, applying CSS styles to D3's SVG elements may not work as expected when using the scoped attribute

Here is the code snippet of my component: <template> <div id="something" class="card"> </div> </template> const height = 200; const width = 200; let graph = d3 .select('#something') .append('svg') ...

Suggestions for creating a <div> that takes up the entire space when using the display property set to flex

html, body { height: 100%; margin: 0px; } .container { display: flex; width: 100%; height: 100%; background-color: yellow; } .box { flex-shrink: 0; } <div> <div class="container"> <div class="box"&g ...

Utilizing thumbnails and avatars within ion-slide in Ionic 2

When using Ionic 2, the 'ion-slide' element does not render avatar and thumbnail images in the expected sizes, instead displaying them in larger sizes. Here is the code snippet: <ion-slides> <ion-slide> <ion-item ...

Elements of <nav> within a <footer> section

I've recently started using HTML5 display elements like header, footer, and nav. While reading about the nav element in particular, I found this interesting information in the HTML5 spec: The nav element is primarily intended for major navigation b ...

There seems to be an issue with the functionality of the Bootstrap Modal

I've been working on incorporating bootstrap login Modal functionality into my code, but for some reason, the screen is not displaying it. Here's what shows up on the screen: https://i.sstatic.net/UIU2w.png The red box in the image indicates whe ...

The result of Coordinates.speed is consistently null

I'm working on a project that involves changing the speed of background particles based on the user's device speed (like when they are in a car or bus). I thought the Geolocation API would be a perfect fit, specifically the Coordinates.speed prop ...

What is the best way to incorporate an external .css file into my Angular project by referencing its URL?

I'm managing a collection of CSS files online and I need to incorporate each one into my project based on its specific requirements. One component in particular is connected to different numerical IDs in the router. I am looking for a way to dynamica ...

Eliminating the bottom border of all buttons, except for the last three buttons in the list, solely using pure JavaScript, unless alternative methods are available

I have 3 sets of buttons, with each set containing 9 buttons stacked in 3 columns inside an ordered list (ol) within list items (li). I have removed the bottom border of the buttons to avoid double borders since they are stacked on top of each other withou ...

Equal spacing title in horizontal menu with Bootstrap design

Is there a way to evenly distribute menu links with varying text lengths in equal width bootstrap columns? Adjusting the column class between col-md-1 and col-md-3 doesn't seem to give accurate spacing. If you want to see, I've set up a fiddle h ...

Transitioning from container to container-fluid class for tablets using bootstrap

I'm currently utilizing the container class in my project and I'm looking for an elegant way to switch it to container-fluid or adjust the width to resemble container-fluid when the website is viewed on a tablet, so it utilizes the full width of ...

NavigateToTop/BackToTheBeginning

I'm facing a challenge with a page layout that involves two vertical div's - one for the menu on the left and another for loading content on the right. My goal is to utilize the .scrollintoview() function on the menu div so that when a link is cl ...

Scroll upwards within a nested div

Is there a way to smoothly animate the content of the inner div upward without requiring any button clicks? Also, is there a method to trigger an event once the animation has completed? ...

Tips for using unique fonts in email text display

As I was editing a Mailer template in core php, I found myself wanting to set a custom font for the text displayed in the mail template similar to how we do it for websites using CSS and imported fonts. Below is the code snippet that I have been using: & ...

Tips for adjusting the height of a Safari extension during runtime

After successfully developing a Safari extension, I am facing an issue with adjusting the width and height of the popover dynamically at runtime. Can anyone provide insights on how to modify the dimensions of the popover based on its content? ...

error message: "The mtlLoader Module does not have the export named 'MTLLoader'"

I am struggling with getting the mtlLoader module to work in three.js. I am a beginner and I am trying to import the mtlLoader module from the latest three.js-master repository on the official website. However, I keep encountering this error message when I ...

Points unable to connect

I am having trouble intersecting Three.Points, but I have no issue with intersecting THREE.Mesh. Here is my code - can someone please help me understand what mistake I might be making? When I try to intersect the Points, all I get is 0. function initial ...

Expand a section of the background picture

I am working with an image that contains multiple flag images: https://i.stack.imgur.com/xg0iM.jpg I have a div element with the dimensions: width:100px; height:50px. My goal is to resize each flag to fit inside it: .flag{ wi ...

What could be causing my CSS div class to cover up the image in the background?

Within my HTML code, I have a <div> that contains a whole partial view: <div class="bkgImg"> /* content goes here */ </div> Inside this main <div>, there are two additional <div> elements - one without a class and one wi ...

A div with an absolute position containing a header, content, and footer

How can I place a header, content, and footer inside a div element with absolute positioning, where the position value cannot be changed? The header and footer have fixed heights, and the content should occupy the remaining space. The header should always ...

Ways to modify the color of a container's border by interacting with radio buttons through JavaScript

I'm currently facing a challenge with creating a settings dropdown menu that allows users to select different themes. Each theme is supposed to modify the background color and border color, but I have successfully implemented only the background color ...