"Combining Three.js for dynamic rendering with Bootstrap grids for responsive

Experimenting with three.js and bootstrap, I encountered an issue where the cube appears flattened when using bootstrap grids:

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

Oddly, resizing the window fixes the problem:

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

Attempts to remedy this in css were unsuccessful, here's what I tried:

CSS

@media(min-width:768px) { 

canvas {
    display: block;
    width: 100% !important;
    height: 33% !important;
}
}

canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

Any suggestions on how to fix this?

EDIT:

I also attempted to adjust the js code without success:

JS:

renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.getElementById('render').appendChild( renderer.domElement );
    window.addEventListener( 'resize', onWindowResize, false );

    render();
}

function onWindowResize() {

if (window.matchMedia('(min-width:768px)').matches) {
    renderer.setSize(window.innerWidth, window.innerHeight * 0.33);
    camera.updateProjectionMatrix();
    camera.aspect = window.innerWidth / window.innerHeight;
    render();
}

else {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    render();
}

}
javascripthtmlcsstwitter-bootstrapthree.js

Answer №1

The reason for your issue may be due to the use of window.innerWidth and window.innerHeight. It appears that you have placed your three.js canvas inside a div, in which case these properties may not work as expected.

Instead of relying on window.innerWidth and window.innerHeight, consider using the width and height of the container div by accessing something like 

document.getElementById('myDiv').style.height
or 
document.getElementById('myDiv').clientHeight
.

Answer №2

Utilizing bootstrap and CSS, I found a solution that worked for me:

#webgl_container{
  width:100%;
  min-width:300px;
  height:640px;
  margin:auto;
}

#webglworld{
  min-width:400px;
  width:100%;
  height:600px;
  margin:auto;
}

Here's how it looks in HTML:

<div id= "webgl_container" class="row">
 <div id="webglworld">
 </div>
<div>

And the accompanying JavaScript code:

function init() {
    scale = 10;
    WEBGL_ID = "webglworld";
    webgl_div= document.getElementById(WEBGL_ID);
    set_height_and_width();
    aspectRatio = WIDTH / HEIGHT;
....
    renderer.setSize(WIDTH, HEIGHT);
    webgl_div.appendChild(renderer.domElement);
....}

function set_height_and_width(){
    var dimensions = webgl_div.getBoundingClientRect();
    HEIGHT = dimensions.height;
    WIDTH = dimensions.width;
    ......}

function onWindowResize() {
    set_height_and_width();
    renderer.setSize(WIDTH, HEIGHT);
    camera.aspect = WIDTH / HEIGHT; ......

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

Iterate through each element in the array and manipulate the corresponding data

I am trying to figure out a way to assign a unique id to each item in an array and send it to the "script.js" file for individual data processing. <script href="script.js"></sciprt> script.js: $(function(){ $('#box' ...

javascriptphpjquery

dealing with a situation where the call to the getElementsByTagname method returns null

Here is a snippet of JavaScript code that I am working with: <script language="JavaScript" type="text/javascript"> var sendReq = getXmlHttpRequestObject(); var receiveReq = getXmlHttpRequestObject(); var lastMessage = 0; var mTimer; ...

htmlxmlajax

Unraveling the mysteries of interpreting the jsben.ch benchmark results

After testing three fibonacci algorithms on jsben.ch, it's clear that the first one is the fastest and even received an award icon: https://i.sstatic.net/ilfDz.png However, I'm curious about the numbers next to the code block results. What do t ...

javascriptalgorithmbenchmarkingfibonacci

Obtaining the blog slug dynamically upon clicking with ReactJS

Currently, I am developing a project using Reactjs and Nextjs. One of the tasks at hand is to obtain the "slug" value after clicking on a blog post. However, at this moment, the value returned is undefined despite trying the following code: <h4 onClic ...

javascriptreactjsnext.js

Using a function as a prop in Vue js to retrieve data from an API

I am facing an issue with a component that I want to decouple from the data fetching implementation. My goal is to be able to pass a data fetching callback as a prop. The reason for this is so that I can easily mock the data fetching process in storybook. ...

javascriptvue.jsstorybook

How can one extract the text from a title tag nested within a text tag using Selenium WebDriver?

How can I extract the text "Open" from a title tag inside of a text tag using Selenium Webdriver and print it? The HTML code is as follows: enter image description here After trying different xpaths, I get 2 results: //div[@class='visual visual-card ...

javahtmlseleniumselenium-webdriverxpath

Is there a way to execute a Python script upon the loading of an HTML page?

I am trying to create a Python variable and then display it using console.log() in JavaScript. While I understand how to access the variable in JavaScript, I'm unsure of how to execute the Python script when the page loads. Can anyone provide guidance ...

javascriptpythonhtml

How can JavaScript be used to activate HTML5 AppCache?

<html manifest="example.appcache"> Is it possible to use javascript to include the manifest="example.appcache" part? ...

html

What could be causing the animation: fill property to malfunction in CSS (SVG)?

My SVG code has an ID called "logo" <svg id= "logo" width="918" height="114" viewBox="0 0 918 114" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="path-1-outside-1" ...

csssvg

What is the best approach to handling this situation in React?

I'm currently developing a React application where the user must select a specific character: comma (,) semicolon (;) colon (:) Other If the user selects 'Other,' a new input field appears, allowing the user to input a custom character. A ...

javascriptreactjsreact-hooksfrontend

Tips for managing a controller response that delivers a file within ASP.NET MVC

I am utilizing a controller to return a file in the following manner: byte[] fileBytes=System.IO.File.ReadAllBytes(Path.Combine(Server.MapPath("~/Images/"), photoPath)); string fileName = prop; return File(fileBytes, System.Net.Mi ...

htmlcssasp.netasp.net-mvcrazor

Is there a way to randomly rearrange an array of objects when the page loads, then iterate over the rearranged array without triggering a console warning about "two children with the same key"?

When shuffling the array and mapping over it in my application, I am able to correctly display the shuffled data using translate3d for a slider effect. However, I keep receiving a growing list of console warnings: "Encountered two children with the s ...

javascriptreactjskeyshuffle

Text will not align with the top left corner of the Text Box

There is an input description box on my website that has a specific height and width, along with its own unique style. Currently, the text within the box is centered, but I would like it to align to the top left corner. Here is the HTML code: <input id ...

htmlcsstextbox

Transferring information between a service and a controller

I'm struggling to pass data between a service and a controller in my AngularJS project. Even though I've followed the recommended steps, the code is not functioning as expected. Below is the controller snippet: function udpController($scope ...

javascriptangularjs

Set the input value to null when the ng-hide directive evaluates to true in AngularJS

Hello, I am looking for a way to clear the input text fields when they are hidden using ng-hide="true". I need a solution that dynamically works for multiple hidden inputs. For example, if someone selects "Yes" and enters a child count, then switches to ...

javascriptjqueryangularjs

Achieving two-way data binding in a directive without using an isolated scope

Implementing scope: { ... } in a directive creates an isolated scope that doesn't inherit from its parent. However, my usual practice has been to utilize this for easily declaring HTML attributes with bi-directional data binding: scope: { attr1: ...

javascriptangularjsangularjs-directiveangularjs-scope

"Is there a way to modify the color of the button once it's been clicked, but only for the specific button that was

Looking to create a Quiz App using React and facing an issue where all buttons change color when clicked, instead of just the one that was clicked. Any solutions on how to make only the clicked button change its color in React.js? App.js import Main from ...

javascripthtmlcssreactjs

The impact of CSS positioning relative on the height of an element

I need help with positioning elements in my HTML layout. I have one element stacked below another and am using relative positioning to nudge the bottom element up slightly so that it overlaps the top element. The paperOverlay element is positioned at the ...

css

Beginner experiencing website overflow problem

After completing a basic web development course, I decided to create my first homepage. While I am satisfied with how it looks on a PC or laptop, the layout gets messy on mobile devices. I tried using <meta name="viewport" content="width= ...

htmlcssoverflow

Transform a button to function like a checkbox in Knockout JS

Essentially, I have implemented a feature on my website where a button changes its color from green to grey and vice versa when clicked, giving the illusion of turning on and off. Below is the JavaScript and HTML code for this button: <script> $(&ap ...

javascriptjqueryhtmlknockout.js