Three.js combined with Ember.js

I've been brainstorming ways to merge Ember.js with Three.js. My goal is to render multiple elements, manage the data with Ember.js bindings and general pub/sub handling, while also being able to manipulate the views/elements with three.js using THREE.CSS3DObject.

Although I'm comfortable with Ember, Three.js is new territory for me. I'm curious if it's possible to have an element that exists in both the THREE.Scene and the Ember application namespace.

In the THREE.js periodic table example:

a DOM.element is created and then later styled with attributes (style, position etc).

var element = document.createElement( 'div' );
    element.className = 'element';
    element.style.backgroundColor = 'rgba(0,127,127,'+(Math.random()* 0.5 + 0.25 ) + ')';

Later, it is added as an element to the THREE.CSS3Object constructor:

var object = new THREE.CSS3DObject( element );

I'm considering creating the elements in an Ember containerView and then iterating over the childViews using jQuery, caching the currently iterated element as 'element' and then passing this to the THREE.CSS3DObject constructor.

I realize this might be a bit unconventional, but I wanted to show that I've thought about potential solutions before seeking help! Any suggestions or guidance, even if they're as out-there as mine, would be greatly appreciated. Thank you in advance.

Answer №1

The CSS3D renderer in Three.js acts as a simple layer on top of the browser's native renderer, ensuring that there are no conflicts when manipulating DOM elements using frameworks like Ember or jQuery.

After being processed by the CSS3DObject constructor, an element's 3D transformations are applied smoothly without any interference. Users can continue to modify its content and style as required.

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

The dropdown menu is unable to open directly below the main menu item

How can I make the submenu open to the left when hovering over a menu point, instead of directly under it? I have tried adjusting the position attributes but haven't found the right solution yet. The closest I got was by changing the display property ...

The HTML dropdown menu becomes crowded with numerous <li menu items, leading to it wrapping

One issue arises when the number of menu items exceeds the capacity to fit on a single line, causing them not to wrap from left to right onto the second line. The desired outcome is for the second line of the menu to start on the left just like the first l ...

Parent div is positioned absolutely with overflow set to hidden

I am facing a unique requirement where the parent div has an absolute position and the child div also has an absolute position. Inside the parent div, I have set overflow: hidden to hide the extra width of the child div. However, this setup is not working ...

Need assistance with creating a handle shape using ThreeJS

I need to design this unique handle shape in ThreeJS: https://i.sstatic.net/T57F0.jpg The handle shape I have envisioned consists of a combination of a plane geometry and twisted/squashed cones at each end with a smaller z position compared to the rest o ...

Encountering issues with the functionality of my Bootstrap navbar

After diving into the world of bootstrap, I encountered some challenges with the navigation bar in mobile view. Despite adding a navbar and a toggle button, it doesn't seem to be functioning correctly. Following tutorials and examples meticulously, bu ...

Problem with alternating row colors in my table

Trying to add some style to my table on the webpage by alternating row colors, but I'm running into some issues. I've followed tutorials and tried using different CSS selectors like nth-of-type(even), nth-of-type(2n+0), and nth-of-type(odd). Howe ...

Determine whether to show or hide a div based on the width of the

Is there a way to dynamically hide a div using Bootstrap 4 based on the screen width? Can this be achieved without using JavaScript? I am particularly interested in hiding certain text elements that are not relevant on smaller screens, such as mobile de ...

Determine whether the object is facing the specified position

I'm attempting to verify whether an object (this.target) is facing towards a particular position (newPosition). Here's what I currently have: new THREE.Matrix4().lookAt( newPosition, this.target.position, this.target.up ) == this.target.matrix ...

When an element is set to a fixed position while scrolling, it causes the element to flicker

After implementing the jQuery plugin stickyjs on my website, I noticed a strange issue. While it works perfectly fine on my Mac, when using the mouse scroll wheel on my PC, the element blinks once rapidly as it reaches the top of the page. Interestingly, d ...

Error: Collision detection in Three.js console output

I am attempting to create a collision detection system using Three.js (a WEBGL library). However, I keep encountering an error stating "cannot call method multiplyVector3 of undefined". Is there anyone who can help me identify what I may be doing incorrec ...

Adjust element based on the position of another element (sticky)

Is it possible to rotate a text block so that it remains anchored to the bottom of a red rectangle, even when the rectangle is rotated? Similar to how it works in Figma, but simpler. For example, if I rotate the rectangle by 180 degrees, the text should be ...

What are some techniques for designing a dynamic object that evolves over time in WebGL using Three.js and Tween.js?

Recently, I've started experimenting with Three.js and Tween.js and I'm interested in creating an animation where an object appears to "grow": such as a 3D ball transforming into a tube shape (or being pulled into a tube). Is it possible to achi ...

Triggering jQuery events can be customized by excluding certain elements using the

Is there a way to hide the div "popu" when clicking on the img "tri"? I've tried using .not() since the img is a child of the div popu, but it didn't work. Also, I need to make sure that clicking on the div "textb" does not trigger the hide actio ...

Navigation isn't aligning correctly on the right side

I am having trouble with my navigation menu not aligning properly to the right. <div class="logo"> <h2><i class="icon-reorder"></i> Frosty</h2> </div> <div class="nav"> <a href="#">Home</a> </div& ...

When Bootstrap 4 teams up with Autoprefixer, it results in malfunctioning old iPads

.row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } Recently, we implemented Bootstrap 4 and the Flex model at my company. We'v ...

I'm facing a problem with the margin and display setup in my assignment

I am encountering a bit of confusion regarding the margin when implementing the following code: Section { background-color: #FFFFFF; width="100%"; } p1 { font-family: Roboto; font-size: 22px; font-height: 1px; margin-top: 45px; margin-lef ...

CSS styles are not being displayed on elements that have been dynamically added using jQuery

I have searched through similar questions, but none of them addressed my issue. (they all seemed to be related to typos) This is just for fun. I am trying to create a table using jQuery based on JSON data. The problem is that the appended table rows do no ...

How to resize and center an image within a div element as they both scale proportionally

Can someone help me figure out how to center a resized image within its container, which should also be centered? I've been struggling with this for 7 hours and can't seem to get it right. Any assistance would be greatly appreciated :-) Here is ...

Step-by-step guide to creating a border around text with a number included in between the lines

Is there a way to replicate the appearance of the image shown below using CSS, Bootstrap, or other client-side methods? ...

The hover effects cease before the cursor is even shifted

Can someone explain why the hover effect stops before the mouse is moved off the element? I implemented the hover effect on a before pseudo element. ...