Issue with sizing and panning when using a combination of Three.js and CSS3Renderer

This issue is specific to Chrome.

Here's what I have experimented with:

I am utilizing the webGL renderer to position a plane geometry in a 3D environment using threejs. This particular code is running within a class, with the scene as one of its members:

var planeMaterial   = new THREE.MeshBasicMaterial({color: 0x000000, transparent:true, opacity:0.5, side: THREE.DoubleSide });
var planeWidth = 1080;
var planeHeight = planeWidth;
var planeGeometry = new THREE.PlaneGeometry( planeWidth, planeHeight );
var planeMesh = new THREE.Mesh( planeGeometry, planeMaterial );
this.scene.add(planeMesh);

Everything runs smoothly and without any issues.

I also include the CSS3DRenderer.js and insert an iframe element.

Within the class, there exists a separate scene meant for holding HTML elements:

// create a new scene to hold CSS
this.cssScene = new THREE.Scene();

An element is created to be used within the CSS scene:

//create the iframe to contain the html
var element = document.createElement('img');
element.src = "http://cdn.freshome.com/wp-content/uploads/2013/11/color-wheel.jpg";
var elementWidth = planeHeight;
//Use the planeMesh size
element.style.width  = planeWidth + "px";
element.style.height = planeHeight + "px";
//give it a z-index so we can place it behind our webGL canvas element
element.style.zIndex = "1";

The next step involves creating the CSS3DObject to position the element accordingly:

var cssObject = new THREE.CSS3DObject( element );

The position and rotation are aligned with the planeMesh and added to the scene along with rendering options:

cssObject.position = planeMesh.position;
cssObject.rotation = planeMesh.rotation;
this.cssScene.add(cssObject);
this.rendererCSS = new THREE.CSS3DRenderer();

this.rendererCSS.setSize( (window.innerWidth), window.innerHeight);
this.rendererCSS.domElement.style.position = 'absolute';
this.rendererCSS.domElement.style.zIndex = 1;
this.rendererCSS.domElement.style.top = 0;
this.rendererCSS.domElement.style.left = 0;
this.rendererCSS.domElement.style.margin = 0;
this.rendererCSS.domElement.style.padding = 0;
this.container.appendChild(this.rendererCSS.domElement);

The outcome

While Firefox displays correctly, Chrome does not.

The difference in size also affects camera panning, causing the CSS3DObject to deviate from the planeMesh in Chrome only. Firefox pans both renderers, webGL, and CSS, perfectly in sync.

A screenshot below exemplifies the size discrepancy in Chrome when applying a wireframe to the planeMesh, showcasing that Chrome fails to fill the same space. The calculated inconsistency amounts to approximately 12-13% too small.

https://i.sstatic.net/9NiWT.jpg

The Inquiry: Do I need to apply a specific unit of measurement in Chrome to ensure consistent 3D rendering in alignment with webGL?

Answer №1

In the case that you are utilizing the THREE.CSS3DRenderer and encountering issues with scaling, double-check to ensure that your webpage is not zoomed in.

This information pertains to three.js version r.71

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

Is there a way to adjust the orientation of a <video> element without affecting the orientation of the video controls?

<video controls> </video> video { transform: scaleX(-1) } This CSS code flips the video horizontally, but it also flips the control buttons along with it. I attempted to flip the wrapper element containing the video using .wrapper {transfor ...

How about mixing up your backgrounds with an overlay effect for a unique look?

Hey there, I'm currently working on adding random backgrounds to my website through an overlay, but I've hit a roadblock when it comes to displaying them. Here is the code I'm working with: .css / .php #intro { background: ...

Mongoose discovers an unexpected empty array

My task is to locate a SoldProduct with an intimeOrderNumber value of '3'. var query = { intimeOrderNumber: '3' }; However, my search result returns an empty array. SoldProduct.find(query, function(err, soldProducts) { if (err) { ...

The text is exceeding the boundaries of its container, displaying in a single line that extends beyond the page

I am currently working on incorporating text into the project-details section by utilizing a rich text uploading field in Django admin. Despite inputting the text as a paragraph in the Django admin project description, it displays as a single line that ove ...

What is the process for incorporating JavaScript-generated coordination into an HTML form?

As a newcomer to Javascript, I am on a mission to integrate geo coordination directly into an HTML form input field. After learning from W3Schools how to generate user latitude and longitude Coordination, I am now eager to input them directly into an HTML ...

Storing complex data structures in Firebase using VUEX

I am struggling to properly store my 'players' data within my team data structure. Currently, it is being saved with the team id but I need it to be nested inside of teams. Essentially, I want the players to seamlessly integrate and be appended ...

Leverage the power of getServerSideProps when working with Dynamic Routes

I have been working on implementing getServerSideProps in my file named [username].js which utilizes dynamic routing. Next.js requires the use of both getStaticPaths() and getStaticProps({ params }) for dynamic routing. However, there seems to be an issu ...

Ways to expand CRA ESLint guidelines using the EXTEND_ESLINT environmental variable

Facebook's Create React App (CRA) recently introduced a new feature allowing users to customize the base ESLint rules. Recognizing that some cases may require further customization, it is now possible to extend the base ESLint config by setting the ...

What makes components declared with "customElements.define()" limited in their global usability?

I've been tackling a project in Svelte, but it involves some web components. The current hurdle I'm facing is with web components defined using the customElements.define() function in Typescript, as they are not accessible unless specifically im ...

Maintain the selected list item after filtering in AngularJS

I am facing an issue with highlighting selected items in a list. I have three first names: Roy, Sam, David displayed in a ul as list items. Initially, I can toggle each li on click just fine. However, after performing a search and returning to the list, th ...

Troubleshooting: Why is my AngularJS Controller not functioning properly

I attempted to run a basic Angular example utilizing a controller, but it does not appear to be functioning correctly. Below is the HTML code: <!DOCTYPE html> <html ng-app = "app"> <head> <title></title> ...

The issue with jQuery click function seems to be limited to Firefox

After a long hiatus from posting here, I hope this isn't breaking any rules. For those who prefer visual examples, you can visit the live page at: The drop-down menu functions perfectly in IE, Chrome, and Safari, but seems to be causing issues in Fir ...

Delete an item from an array based on its index within the props

I am attempting to remove a specific value by its index in the props array that was passed from another component. const updatedData = [...this.props.data].splice([...this.props.data].indexOf(oldData), 1); const {tableData, ...application} = oldData; this ...

What is the best way to limit input to only numbers and special characters?

Here is the code snippet I am working with: <input style="text-align: right;font-size: 12px;" class='input' (keyup.enter)="sumTotal($event)" type="text" [ngModel]="field.value" (focusin)="focusin()" (focusout)="format()" (keyup.ente ...

Incorporate a NodeJS express object into AngularJS 1.6

I am currently facing a challenge with passing parameters from a NodeJS API to AngularJS so that I can retrieve data for a specific page. My situation is an extension of the issue discussed in this question: How do I pass node.js server variables into my a ...

How to trigger a JavaScript function using a link in CakePHP?

When working with Html, <a href="some_url"> Contact Seller </a> In the realm of Cakephp, <?php echo $this->Html->link('Contact Seller', array('controller'=>'pages', 'action'=>'conta ...

AngularJs can manipulate the visibility of elements by showing or hiding them based

I wanted to create a simple hover effect where only the child element of each <li> is displayed when I hover over it. Initially, I set up a ng-show value of false for all elements and tried to change it to true on hover. However, this caused all chil ...

How can I alter the icon's color?

Is it possible for the icon's color to change to red when the condition is greater than 0, and to gray when the condition is equal to zero? <TouchableOpacity onPress={() => { if (Object.values(selectedIt ...

Removing an element from an array of objects in Javascript

My situation involves an array containing objects: var items = [{ id: 1, text: "test1" }, { id: 2, text: "test2" }, { id: 3, text: "test3"}]; In addition, I have this specific object: var itemToRemove = { id: 2, text: "test2" }; My objective is to veri ...

What does getsession.insert in the Ace Editor return?

Seeking clarification on the return values of the addMarker and insert functions in ace editor's edit session. The official documentation lacks detail, leaving me uncertain. Refer to the edit session API for more information. I've encountered i ...