Trouble with CSS animations in ThreeJS's CSS3DRenderer

Seeking a way to incorporate plain text (2D or 3D) into a threeJS scene while applying CSS effects, I stumbled upon this resource. It seemed to offer the solution I was looking for. However, when I tried to apply an animate.css class (a well-known CSS animation library) to an HTML element, the position of my CSS3D Object was unexpectedly reset and flipped.

   'http://jsfiddle.net/kd9Tc/4/'

Note: I believe the code example provided illustrates clearly what I am attempting to achieve - applying CSS text effects within a WebGL scene while incorporating camera movement and tweening. Initially, I experimented with THREE.TextGeometry, but encountered issues as I needed the text to be in a language other than English, which led to incorrect display results. Additionally, I have a good understanding of CSS transforms and find them easier to work with. Although I appreciate the camera movement capabilities offered by threeJS, I am uncertain if it is the most suitable tool for this task.

Thanks.

cssthree.js

Answer №1

When applying a CSS transform on an element rendered by ThreeJS' CSS3DRenderer, it can override the initial translation and rotation set by the renderer.

Upon reviewing your fiddle and examining the CSS3DRenderer on GitHub, it appears that the renderer manipulates the CSS translation and rotation of elements internally before rendering them, which may not align with the expected behavior based on ThreeJS coordinates.

Specific lines on GitHub referencing this behavior.

To effectively apply CSS transforms in CSS3DRenderer without overriding the translation and rotation, consider using the following as the relative origin for each transform:

translate3d(-50%, -50%, 0) rotateX(180deg) rotateY(180deg)

For instance, instead of:

-webkit-transform: none;
transform: none;

Use:

-webkit-transform: translate3d(-50%, -50%, 0) rotateX(180deg) rotateY(180deg);
transform: translate3d(-50%, -50%, 0) rotateX(180deg) rotateY(180deg);

Modified version of the fiddle with working solution.

If desired, consider extending CSS3DRenderer to dynamically correct rotate transforms instead of only during instantiation.

Reason behind this behavior

It is likely that the renderer was initially designed for transformations to be applied via JavaScript rather than CSS.

If you prefer using CSS transforms, feel free to continue. Alternatively, for more dynamic animations, consider using TweenJS in conjunction with ThreeJS for better compatibility. (Link to website in profile)

P.S.

@KianP Impressive work on the fiddle! Your experimentation with Animate.css and ThreeJS is commendable and can be successful once you adjust the positioning as recommended above.

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

Adjust the background color of Bootstrap 4 checkboxes

I'm trying to figure out how I can modify the background color of a Bootstrap 4 checkbox in this specific scenario. .custom-control-label::before, .custom-control-label::after { top: .8rem; width: 1.25rem; height: 1.25rem; } <link rel="style ...

htmlcssbootstrap-4

What is the reason behind the issue where max-height disrupts border-radius?

My inline svg is styled with the following CSS: .img { border-radius: 15px; overflow: hidden; max-width: 70vw; margin-top: 6vh; max-height: 50vh; z-index: -1; text-align: center; } Everything seems to work as expected, except f ...

htmlcss

Tips for customizing the appearance of a disabled checkbox

I'm curious if you have any ideas on how to customize the appearance of a disabled checkbox? For example: <input type="checkbox" value="All Terrain Vehicle" name="exfilter_All Terrain Vehicle" id="exfilter_All_Terrain_Vehicle" ...

htmlcss

Explore three stylish ways to showcase dynamic JavaScript content using CSS

Objective: For Value 1, the CSS class should be badge-primary For Value 2, the CSS class should be badge-secondary For all other values, use the CSS class badge-danger This functionality is implemented in the handleChange function. Issue: Current ...

javascriptcssreactjs

Move the camera in Three.js along a path between two vectors

I created a basic scene and came across a tutorial at to help me move the camera: var timer = new Date().getTime() * 0.0005; camera.position.x = Math.floor(Math.cos( timer ) * 200); camera.position.z = Math.floor(Math.sin( timer ) * 200); However, I n ...

javascript3dthree.js

Using Express.js to serve simple SVG files (Technique involving Cheerio.js)

My goal is to manipulate SVGs before sending them through Express.js. The code snippet I am using is as follows: app.get("/iconic/styles/:style/:base/:icon", function (req, res) { var style = req.params.style; var base = req.params.base; var i ...

htmlcssnode.jsexpresssvg

Exporting Maya files to Three.js JSON format allows for seamless integration of

Having an issue when exporting my model from Maya to JSON for ThreeJS. Many vertices appear to be in incorrect positions: You can download the model obj here: You can download the model js here: When I export, the options are: uv face vertex norma ...

three.jsmaya

Using Bootstrap to align items to the right in a navigation bar

I've been attempting to align certain elements to the right in the navbar using Bootstrap by utilizing mr-auto, but it doesn't seem to be functioning properly. What steps should I take to ensure it works correctly? Below is a snippet of my index. ...

htmlcsstwitter-bootstrapbootstrap-5

Maintaining the style of `li` elements within a `ul` list while ensuring they all

Struggling to create a menu list item with 4 items that won't fit on one line? Nested divs didn't work when adding padding. Here is my latest HTML and CSS: HTML: <div id="header"> <ul id="menu"> <li><a href="#"& ...

htmlcss

What steps can I take to ensure that the elements are in the same row instead of being displayed in three separate rows?

(I'm a beginner in web development and need some help) Is there a way to align elements into the same row instead of stacking them up in separate rows? I'm working on creating a header bar similar to the one on the Naive UI Documentation Website. ...

htmlcsstypescriptvue.js

Resize a responsive grid of images

Within my slider, I have three slides with 3 images each. The layout consists of one large image on the left and two smaller ones on the right. To ensure responsiveness, I've used max-width: 100% on the images so they can scale down proportionally as ...

jquerycssresponsive-design

CSS for when the mouse hovers over an element

Two php files and a js file are involved in this scenario. The issue at hand is that when the div is clicked, it navigates to a new page with an appended # to the URL, causing it to scroll to the specified comment ID. However, instead of scrolling to the c ...

javascriptphpcsscursor

How can I display two different styles on a single page in ASP.NET MVC without any conflicts between CSS classes?

Currently, I am developing a web-based application that is capable of generating documents containing specific data. A new functionality has been introduced in the document generator, allowing users to input an Atlassian Confluence link into a designated t ...

c#htmlcssasp.net

React Bootstrap encountered rendering issues

Recently, I decided to delve into the world of React Bootstrap and started my learning journey. To get started, I followed some tutorials on <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="vi ...

javascriptcsstwitter-bootstrapreactjsreact-bootstrap

Implement JQuery UI Accordion to enhance navigation on mobile devices

I am implementing the JQuery UI Accordion to expand content on a website. Below is the basic markup structure: <div class="accordion"> <h2>Heading</h2> <div>Content</div> <h2>Heading</h2> <div& ...

jqueryhtmlcssjquery-ui

Ways to resize column widths in tree views on Odoo version 10?

I have been struggling to adjust the column width of the columns in my tree view. I have attempted a few different solutions: Trying to change the width attribute in the field tag: width="100px" or width="15%%" Using the style att ...

csstreeviewodooodoo-10odoo-view

Adjusting grids in Bootstrap according to device orientation

I have a vision for a webpage layout that will feature two columns in landscape mode and switch to one column in portrait mode. Here is an outline of what I have in mind: Landscape: <body> <div class="container-fluid"> <div cl ...

htmlcsstwitter-bootstrap

The alignment issue persists with the menu header, as the div is not functioning correctly

I've been struggling to properly align my menu on the website. As it stands, when a user arrives and is not logged in, they see the header below: https://i.stack.imgur.com/mTKse.png Once the user logs in, the login/register text is replaced by a dro ...

cssreactjsmaterial-ui

Ensure the table row remains on one page when printing or viewing the print preview

I'm currently dealing with an html report that contains a table, which can be seen here http://jsfiddle.net/fhwoo3rg/2/embedded/result/ The issue arises when trying to print the report, as it breaks in the middle of a table row like this: https://i ...

htmlcsshtml-table

Issues with CSS causing image resizing problems on Chrome, looking for solutions

On my website, I have favicons from various external domains. However, there seems to be an issue with resizing them when they are not 16px in size. Sometimes only the top or bottom half of the image is displayed, but upon refreshing the page, the entire i ...

htmlcssimage