What is the best method to disable default inline styles applied by Three.js on canvas element for webpage background?

After successfully creating a scene with three.js, I encountered an issue trying to use it as the background for my page. Unfortunately, I am unable to get the canvas element to move without cutting off half of my page.

I have meticulously removed all CSS code to eliminate any potential conflicts. It appears that three.js has some sort of auto styling happening inline on the canvas element, which I am struggling to override.

I have inspected the devtools, the only place where I can see the auto styling being applied

I have attempted using !important for the properties I was trying to override, as well as styling the element inline myself. Additionally, I have exhausted all options in a separate stylesheet. I even went as far as moving all of my three.js code into its own file in an attempt to try something different.

javascriptcssthree.js

Answer №1

In order to manipulate the three.js canvas, CSS alone won't cut it. You must utilize 

WebGLRenderer.setSize( width, height )
to control it.

The reason for this is that the renderer needs to inform the GPU about the size of the render target canvas. Without this crucial information, the GPU cannot properly adjust the rendered data to fit the output buffer, leading to unexpected outcomes.

Additionally, you should update the aspect ratio of your camera. Set PerspectiveCamera.aspect to width / height of the canvas, then call 

PerspectiveCamera.updateProjectionMatrix()
. For an OrthographicCamera, adjust the top, right, bottom, and left properties to match the new aspect ratio, followed by calling 
OrthographicCamera.updateProjectionMatrix()
.

Usually, these steps are included in a resize handler. Check out any of the three.js examples to see this in action. Here's an example code snippet.

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

"Customized color selection based on conditions using Angular's UI-Grid

I'm trying to create conditional coloring in my grid based on the data, using the cellClass function in columnDefs. The issue I'm facing is that the classes are not updated when there is a selection change, preventing me from defining colors for ...

javascriptangularjsui-grid

Utilize CSS to exclusively filter through items

Is it possible to use CSS alone to filter a list of items based on specific links being clicked? I have a list that should display only certain items when corresponding links are clicked. HTML: <!-- Header links --> <a href="#" class="all" tabin ...

htmlcssselectfiltertabindex

Non Rectangular Header with Bootstrap's Responsive Navbar

Currently, I'm in the process of developing a website and I've been pondering if it's feasible to design a bootstrap navbar with a uniquely shaped header as a background. I envision the header to resemble something like this: https://i.sst ...

htmlcsstwitter-bootstrap

Using plain JavaScript (without JQuery) to specify the AJAX content type

I have been working on form submission using AJAX with plain JavaScript, without any external libraries. However, I encountered an issue where the PHP doesn't seem to parse the data correctly when I try to parse the form. After doing some research o ...

javascriptphpajaxhtmlcontent-type

Retrieve the value of an object without relying on hardcoded index values in TypeScript

I am working with an object structure retrieved from an API response. I need to extract various attributes from the data, which is nested within another object. Can someone assist me in achieving this in a cleaner way without relying on hardcoded indices? ...

javascripttypescript

Tips for updating form values with changing form control names

Here is an example of a form I created: public profileSettingsGroup = new FormGroup({ firstName: new FormControl('Jonathon', Validators.required) }) I also have a method that attempts to set control values in the form: setControlValue(contro ...

javascriptangular

Using PHP to perform live calculations with arrays in real time

Currently, I am working on developing a new system for a client that allows them to create bookings and invoices to send to their clients. One specific requirement my client has is the need for a table column to be added below the container columns in whi ...

javascriptphphtmlajax

Browser stores cached data for images even after they have been removed and then re-added

Our team is currently working on a web application that relies solely on AJAX and Javascript for its interface. One challenge we have encountered involves dynamic images with cache expiration times set to access time plus 15 minutes. Typically, when these ...

javascripthtmlajaxgoogle-chrome

Interfacing Highcharts with Angular for seamless data binding across series

I am fairly new to using highcharts and I am having difficulty binding my data into the series parameter. In my controller, I have an array of objects that I want to display (when I use console.log, I can see that they are all properly there) this.plotDa ...

javascriptangularjshighcharts

How come this function is still active even after the script has been dynamically deleted?

I am attempting to dynamically load a new script tag that will replace the jQuery content within the #clickmeDIV DIV. However, even after loading the second script tag into the #clickmeDIV DIV, the original script continues to run despite not being part of ...

javascriptjqueryhtml

Encountering issues with app functionality following update to Ionic RC4 version

Since upgrading from Ionic rc3 to rc4, I've been facing difficulties running my app smoothly. The app compiles without any errors when I use ionic-app-scripts build --prod, but when I try to run it on my iPhone, all I get is a blank screen and an err ...

javascriptiosangularionic2angular2-aot

WebSocket connection established on port 8888, while the web server is running on port 80 - incompatible to merge the two services

Here is some node.js server-side code that involves watching a file and sending modifications to the browser: var app = require('http').createServer(handler) , io = require('socket.io').listen(app) , fs = require('fs') a ...

javascriptjquerynode.jswebsocketport

What is the process for adjusting the scale value in pixels?

Is there a way to adjust the object's scale based on pixel value using three.js? object.scale.set(0.05,0.05,0.05); I am aiming to set the size at 0.05 pixels. ...

javascriptthree.js

AngularJS issue: Form submission does not trigger the controller function

I am currently learning AngularJS and I am experimenting with the sample code below to send my form data to the server. <!doctype html> <html lang=''> <head> <meta charset="utf-8"> <script src="../js/angular.min.v1 ...

javascripthtmlangularjs

Splitting HTML elements with AngularJS Ng-repeat separators/dividers

I am brand new to Angular and have a list item filled with some data: <li ng-repeat="content in contents"> <a class="item" href="#"> <p><strong>{{content.Company}}</strong></p> <p>{{content.Town}}, ...

javascriptangularjs

Is the `document.documentElement` consistently defined and always representing the HTML element?

I am looking to make changes to the <html> element using a script within the <head> section of an HTML page. My goal is to only access and modify the <html> element itself, without affecting any of its children. Should I wait for the DOM ...

javascripthtmldom

One CSS file linked, but only one is applied; the other is left unused

After including two CSS files, I am experiencing an issue where only one of them is being utilized. The other file does not seem to be included and the reason behind this remains unknown. My website has a standard header file that is present on all pages. ...

css

Leverage the power of CSS and jQuery's calc function within your React.js

Currently, I am facing a situation where I require the div to have a dynamic width in my React JS code. To achieve this, I tried using divStyle = {width: calc(100% - 276px)}, but unfortunately, it resulted in an error stating that calc is not a function. ...

javascriptcssreactjs

Mongoose faces difficulty in locating records that were not initially generated using mongoose

After successfully creating a collection and a document in a local running database using mongosh, I encountered an issue while trying to access it via mongoose. Despite querying all documents using a model that matches the collection I created, the docume ...

javascriptmongodbmongoose

Utilizing the capabilities of the min.us API

Currently, I am attempting to integrate min.us galleries into a project I am working on, however, I am running into difficulty with accessing their API. As an illustration, here is a JSON snippet taken randomly from a gallery found on google: {"READ_ON ...

javascriptjqueryjson