Adjust the positioning of the cube in ThreeJS window

Currently, I am using Three.JS and facing an issue with adjusting the cube to fit the window size perfectly. The challenge is that the cube needs to maintain aspect ratio relative to the window (window.innerWidth and window.innerHeight), while also adjusting its Z position based on the display ratio.

cube = new THREE.Mesh( new THREE.CubeGeometry( windowWidth, windowHeight, 200, 6, 6, 6, materials ), new THREE.MeshFaceMaterial() ); 
cube.position.y = ???; 
cube.position.z = ???;

function onWindowResize() {

   camera.aspect = window.innerWidth / window.innerHeight;
   renderer.setSize( window.innerWidth, window.innerHeight );
   camera.updateProjectionMatrix();
   cube.position.y = ???; 
   cube.position.z = ???;
}

I would appreciate any suggestions or solutions you may have in mind for this issue. Thank you!

javascriptwebglthree.js

Answer №1

It seems like you're experiencing difficulties with the positioning of cube Z. Instead of setting the position on windowresize(), I would suggest doing it within an animate function like this:

function animate() {
    cube.position.z = camera.position.z  
}

I apologize, but I'm having trouble comprehending beyond this point.

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

Several dropdowns causing issues with jQuery and Bootstrap functionality

Can anyone help me identify where I might be making a mistake? The issue is with my fee calculator that increments fees as the user progresses through the form. In this scenario, there is a checkbox that, when clicked, is supposed to display a div showing ...

javascriptjquery

Having success in FF and Chrome, but encountering issues in IE? What could be causing this disparity

My partner wrote a script, but he is currently offline so I am trying to troubleshoot the issue on my own. Here is the current code we are working with: function checkProgress(Progress) { // Retrieve progress status $.get('http://www.site.c ...

javascriptajaxinternet-explorer

Developing user registration and authentication using Backbone.js in conjunction with Django Rest Framework

In the process of developing my app, I am utilizing backbone.js for the frontend and django-rest-framework for the backend. My goal is to enable user registration, login, logout functionality, and be able to verify whether a user is logged in using backbon ...

javascriptdjangobackbone.jsdjango-rest-framework

Managing object methods in ReactJS state

Currently, I am utilizing the Google Maps API and have the following piece of code implemented: class App extends React.Component { state = { polygon: null, }; checkPoly() { if (this.state. ...

javascriptreactjs

Rendering Next.js app within HTML markup provided as a string

I am facing a challenge with integrating my Next.js app into an external HTML markup. The provided markup structure consists of the following files: header.txt <html> <head> <title>Some title</title> </head> < ...

javascriptreactjsnext.jsserver-side-renderinghtml-react-parser

Could the lack of component rerendering when updating state during delete in Angular services be causing issues?

I have two components that are interacting with each other: todos.services.ts: import { Injectable } from '@angular/core'; import { TodoItem } from '../interfaces/todo-item'; @Injectable({ providedIn: 'root', }) export cla ...

javascriptangularcomponentsstaterender

Authentication in JavaScript using JSON strings: two objects are being authenticated

Currently, I am in the process of authentication using $.ajax({ type: "GET", url: urlString, async: false, beforeSend: function(x) { }, dataType: "json", username: "<a href="/cdn-cgi/l/email-protection" class="__c ...

javascriptajaxjsonhtmlparsing

CSS Text ellipsis displays only the beginning of each paragraph

I want to add ellipsis to a text, but it keeps including the first line of all paragraphs. What I actually need is for only the first line of the content to have the ellipsis applied. Here is an example of the content: When using websocket to send message ...

javascripthtmljquerycssbootstrap-5

What steps can be taken to ensure Vue application admin page contents are not displayed without proper authentication?

By implementing role-based authentication in Vue app, we can efficiently manage routes and components visibility between regular users and administrators. As the number of roles increases, the application size grows, making it challenging to control CRUD ...

javascriptexpressvue.jsserver-side-rendering

Incorporating a different moment locale may disrupt the original date format

There's a strange issue with the moment library that I can't seem to figure out: I have this date: Wed Feb 28 2018 16:24:37 GMT+0100 (CET) But when I add import 'moment/locale/fr';, the same date changes to Sun Jan 28 2018 16:24:37 GM ...

javascriptreactjsdatemomentjslocale

Is this loader going through a triple loop?

<style> .loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-repeat: no-repeat; background: url('images/page-loader.gif'); } </style> <script src="//ajax.googleapis.com/ajax/libs/jque ...

javascripthtmlcsstwitter-bootstrap-3

Javascript AppendChild Problem with Internet Explorer

When it comes to this particular snippet of code, everything seems to run smoothly in Firefox and Chrome. However, Internet Explorer is causing some major headaches. var anotherDiv= document.getElementById("anotherDiv"); var destination = document.getElem ...

javascriptinternet-explorerhtmlinternet-explorer-8appendchild

Ways to have a list component smoothly descend when a dropdown menu is activated

I have a situation where I have a list with two buttons, and each button triggers the same dropdown content in a sidebar component. The issue is that when I click on one button to open the dropdown, the second button does not move down to make space for it ...

javascripthtmlcssreactjs

Styled Components do not have the ability to define :hover states

export const WatchVideoButtonWrapper = styled.div` position: absolute; bottom: 80px; right: 33px; background-color: ${(props) => props.bgColor}; color: ${(props) => props.color}; border-radius: 100px; transition: all 0.1s; ...

javascriptcssreactjsanimationstyled-components

Tips for creating query requests in ExpressJS

Can someone provide the correct command to write in an ExpressJS file in order to expose a single HTTP endpoint (/api/search?symbol=$symbol&period=$period)? Here is what's currently working: app.get('/api/search/', (req, res) => ...

javascriptnode.jsexpress

Using JavaScript within WordPress to achieve a seamless scrolling effect

I am seeking to implement a Smooth Scroll effect on my website located at . The site is built on WordPress and I am facing difficulty in connecting JavaScript/jQuery in WordPress. I have come across various WordPress plugins, but they either do not meet my ...

javascriptjquerywordpresssmooth-scrolling

Having multiple jQuery animations running concurrently can lead to choppy transitions on a webpage

Here's a snippet of code that I'm working with: <hgroup id="ticker"> <div> <h1>First <span>Div</span></h1> <h2>This is the First Div</h2> <h6>This is the First Heading</h6> </div ...

javascriptjqueryhtmlanimation

What is the best way to extract the ID from an event in TypeScript?

HTML Code: <ion-checkbox color="dark" checked="false" id="1on" (ionChange)="onTap($event)" ></ion-checkbox> TypeScript Code: onTap(e) { console.log(e); console.log(e.checked); } I am trying to retrieve the id of the checkbox. H ...

javascriptangulartypescriptionic2

"Double the Data: A D3.js JSON Tale of Two Creators

I found inspiration from this example: http://bl.ocks.org/mbostock/1062288 to create a collapsible Force Layout. One challenge I'm facing is how to display a graph where a single node is connected to two parent nodes. father father | | ...

javascriptjsond3.jsforce-layout

Effective ways to fill a Map<string, string> with input data

Check out this Stackblitz Here is the model I am working with: export class Items { items: Map<string, string>; createdBy: string; deliveredBy: string; } I am trying to dynamically generate input fields based on items in an array, but struggl ...

javascriptangular