How can I adjust the size of the renderer in Three.js to fit the screen?

Encountering issues with the code snippet below:

        //WebGL renderer
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight); //TODO: set optimal size   
        document.body.appendChild(renderer.domElement);

In the top left corner, there is an unwanted thin white border:

https://i.sstatic.net/AXIjr.png

At the bottom right corner, scroll elements appear (indicating that 

window.innerWidth, window.innerHeight
may be greater than the initial view):

https://i.sstatic.net/Ztqz2.png

Is there a way to determine the width and height values for renderer.setSize to ensure all visible content fits inside the window? Alternatively, are there alternative solutions to resolve these issues?

javascripthtmlcssthree.js

Answer №1

The extra space on the top and left side is likely caused by default margins in the body element. As for the scrollbars, it seems that the canvas element is behaving unexpectedly like an inline element.

Try adding this CSS to resolve the issue:

body {
  margin: 0;
  overflow: hidden;
}
canvas {
  display: block;
}

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

How do I store the result of an Ajax request as a variable in a different function within a React component?

One of the challenges I'm facing involves making an ajax call that retrieves a list of movies, and then running another function with a separate ajax call to fetch the genre names. Since the first call only provides the genre IDs, I need to match each ...

javascriptjquerynode.jsajaxreactjs

What is the best way to choose specific attributes in CSS?

My website has three large CSS files, each containing many classes. Some of these classes have the same name but are defined in different files. For example: CSS1: ... .btn-primary { background: #000; } ... CSS2: ... .btn-primary { back ...

css

Click on the image to view in a separate window

I am looking for assistance with a script that can open an image in a new page, not a new window. I have a specific HTML page designated for displaying various images when clicked on. If anyone has any ideas or guidance on how to achieve this, it would be ...

javascriptjquery

Access the specific scope I established in Angular console, excluding the entire scope

Is there a way to access only the $scope elements (variables and functions) created in my controller without getting everything ($$childTail, $$childHead, etc)? I know if I use: angular.element(document.querySelector('<selector-name>')).sc ...

javascriptangularjsconsole

Implement a feature that adds a circle element when an image is clicked in a React application

I am attempting to create a program that allows users to add circles to an image by clicking on it. Essentially, when the user clicks at coordinates (x,y), a circle with a radius of 10 will appear at that location. I am exploring ways to implement meta-pro ...

javascriptreactjs

Achieve a sliding effect between two divs using CSS only

I'm trying to create a design with 2 divs that are the same size. The first one is visible by default, while the second one is hidden initially. My goal is to achieve an effect where when you hover over the first div, the second one slides upward and ...

htmlcssanimation

Retrieve class property in Angular by its name

How can I retrieve an array from a class like the one below without using a switch statement, dictionary, or other collection to look up the name passed into the method? export class ProcessOptions { Arm = [{ name: 'Expedited Review ("ER") ...

javascriptangulartypescript

Show the button when the mouse moves over the image

Here is the snippet of code I am working with: <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> <script src="Js/jquery.min.js"></script> <script type="text/javascript"> $(document).r ...

javascriptjqueryasp.net.net

Personalized FullCalendar header title

Is there a way to display a unique header title for each calendar in my collection of 16? I've been trying various modifications to the code snippet below with no success: firstDay: <?php echo $iFirstDay; ?>, header: { left: 'prev,next ...

javascriptjqueryfullcalendar

Unable to retrieve API data on local server port 5000. Utilizing a database sourced from a CSV file. Unexpected undefined promise response

I have been struggling for the past few days with a persistent issue. Seeking assistance. Currently working on a project involving a CSV database and creating my own API. It is a small React App Fullstack MERN setup. The specific challenge I am facing is ...

javascriptnode.jsreactjsapiexpress

Why do I keep getting an ExpressionChangedAfterItHasBeenChecked error after trying to update a random color in an

Is there a way to assign a random color from an array without causing the error message: "ExpressionChangedAfterItHasBeenChecked"? Even though the color of the chip changes quickly before the message appears, it seems like it's working. How can I reso ...

javascripthtmlarraysangulartypescript

Can I give a "label" to the information being retrieved from the database?

I am looking to give a name to the answers fetched from the database. Currently, I am configuring a questionnaire/quiz with the questions and corresponding answers stored in the database. Here is my PHP code snippet: public function site() { $db = n ...

phphtml

Function for Duplicating jQuery Events

I'm currently facing an issue where every time the browser is resized, a function is triggered. This function can turn a side panel into an accordion if the screen width meets certain criteria, or it can just display as an open side panel on larger sc ...

javascriptjquery

The jQuery mousedown() function seems to be malfunctioning and unable to trigger the drag event

I am attempting to initiate a drag event using jQuery. You can access the fiddle by clicking here http://jsfiddle.net/sgsvenkatesh/hepbob75/5/ I tried using the following code to initiate the drag event, but it doesn't seem to be working: $(documen ...

javascriptjquerybinddragmousedown

What steps can I take to stop my html table from expanding beyond its intended size

There are instances where the length of a data piece in one of my table cells causes it to expand and distort the overall layout of the table. Is there a way to avoid this from happening? ...

htmlcss

Extracting JSON Value from a Script Tag

Seeking a more efficient method to extract the designated JSON value (highlighted in yellow) that is currently acquired using the code below. Although effective, it lacks efficiency. $("head > script:nth-child(55)").text().trim().replace(" ...

javascriptnode.jsjsonobject

Ways to prevent the "RangeError: Maximum call stack size exceeded" error

Currently, I am working on developing a maze generating algorithm known as recursive division. This algorithm is relatively straightforward to comprehend: Step 1 involves dividing the grid/chamber with a vertical line if the height is less than the width, ...

javascriptrecursion

Problem with Angular2, NodeJS, and Passport Integration

At the moment, my Angular2 front-end is running on localhost:3000 while the NodeJS back-end (using KrakenJS) is running on localhost:8000. When I input the credentials and make a call to the this.http.post('http://localhost:8000/login', body, { h ...

javascriptnode.jsangularpassport.js

Loading events for a fullCalendar in node.js using the jade library

I successfully integrated fullCalendar into my nodeJS application using jade and Express, and I have managed to load the calendar. Within the jade file, I pass an array containing events information. How can I display these events on the calendar within th ...

javascriptnode.jsexpressfullcalendar

Individualize JavaScript clients for each module in ExpressJS

Exploring the modular folder structure demonstrated by tjholowaychuk in this video. Is there a way to include a distinct client-side JavaScript file within each module? Currently, all my client JS resides in the /assets/js folder, but having a separate JS ...

javascriptnode.jsexpress