For a new project on my website, I am considering using three.js for an interactive experiment. My idea is to take an existing experiment that I already have the code for and integrate it as a dynamic background for my site.
Does anyone have experience with this and can provide guidance?
I found an example of this implementation here:
Explore the Three JS API here: https://github.com/mrdoob/three.js/wiki/API-Reference
Let me provide another solution by adding a new answer:
canvas {
width: 100vw;
height: 100vh;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -9999;
}
Here's the reasoning behind this approach:
Instead of using
canvas { width: 100%; height: 100% }canvas { width: 100vw; height: 100vh; }By utilizing these values, there is no need to set the body to have a height of 100%, especially when the page exceeds the window or screen height.
The use of display: block; helps address scrollbar issues on certain browsers, eliminating the need for declarations like html, body { overflow: none; }, which may cause problems if the page extends beyond the window.
Setting position: fixed; ensures that the canvas remains in place relative to the top of the window, preventing it from scrolling along with the page. In contrast, using position: absolute would cause the canvas to scroll off the screen if the page is taller than the window.
Placing top: 0; left 0; positions the canvas at the top left corner instead of defaulting to its position within the body's margins. While setting body { margin: 0; } can help align content with the window edge, it often requires additional containers to manage spacing.
Adding z-index: -9999; attempts to push the canvas further back than other elements, especially if the page utilizes negative z-index values elsewhere.
An interactive snippet example is provided below:
Note that interactive canvas animations may face challenges with front elements intercepting mouse/touch events. Adjusting pointer-events properties can impact text selection and link functionality, requiring careful consideration based on your page's content.
It's worth mentioning that many three.js examples refer to window.innerWidth and
window.innerHeight</code, placing the canvas within an <code><div>id="canvas". The structure may differ slightly in implementation but offers similar functionality for sizing.
To avoid conflicts with the base page, I typically use iframes for that purpose.
<style>
iframe {
z-index : -9999;
position: absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
margin : 0;
padding : 0;
}
</style>
<iframe src="http://example.com/"></iframe>
Here is an example of it: https://github.com/jeromeetienne/www.jetienne.com/blob/master/index-webgl.html#L128 for the source for the live code
Instead of an authentic background, it's actually a full-width and full-height element showcasing the animation. The remainder of the content appears to be "lifted" using z-index or comparable technique above this artificial backdrop.
After following the simple example provided on threejs.org (here), I made a minor adjustment to the canvas style section:
canvas {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -9999;
}
By implementing this change, the canvas was successfully placed in the background.
I am working on developing a fee calculator using jQuery. In order to achieve this, I need to access forms. Here is the code I have so far: <form id="fee"> <input type="text" title="fee" placeholder="Place the amount that you would like to se ...
I've encountered a challenge while trying to save form data in a format where there's the same key but different values separated by commas. While I can successfully submit form data via POST for single "key/value" pairs, I'm struggling with ...
My components currently consist of an AddBookPanel containing the AddBookForm. I am looking to implement a feature where the form is displayed upon clicking the 'AddBookButton', and hidden when the 'x' button (image within AddBookForm c ...
My goal is to implement a mat-grid-list of images with a dynamic number of columns based on the screen size. Everything works perfectly except for one small glitch – when the grid first loads, it defaults to 3 columns regardless of the screen size until ...
I'm currently facing a problem when trying to import a react class into a container. The structure of my files is as follows: ├── components │ ├── Header │ │ ├── Header.js │ │ └── index.js │ └── ...
My base64 String appears as "UklGRkAdEQBXQVZFZm10IBIAAAABAAEAg...". I am attempting to download this file using my browser. Therefore, I convert it to a blob with the following function: b65toBlob: function(b64Data, sliceSize = 512) { ...
export const composeValidators = (...validators) => value => validators.reduce((error, validator) => error || validator(value), undefined); export const composeAccreditionValidators = (...validators) => value => validators.reduce((error, va ...
To set up a new Gatsby starter blog, I executed the following commands: gatsby new blog https://github.com/alxshelepenok/gatsby-starter-lumen cd blog gatsby develop However, while running gatsby develop, I encountered numerous errors labeled as ERROR # ...
After experimenting with service workers on my Vue-built website, I made a critical error that has left Safari on my iPhone displaying only a blank page. To troubleshoot the issue, I connected my phone to my Mac and utilized Safari's inspector tool t ...
I have a webpage that pulls information from my database and displays it. Users should be able to click on the "details" link to see more details about a particular record, or click on an input box in the "check" column and submit to update the record stat ...
During the installation of Bootstrap 5, I encountered an issue where many of my buttons are displaying a black font instead of the expected white font as shown in the Bootstrap 5 Documentation For instance, the .btn-primary button on the official Bootstra ...
Recently delving into Firebase Functions for my Flutter project has been a game-changer. Discovering the code generator, firebase_functions_interop, that seamlessly transforms Dart code into Javascript has made developing cloud functions in Dart a breeze. ...
I find myself in a difficult situation because I am using DataTables for pagination and searching in an unconventional way. I have a table where I display vendor details such as names, emails, addresses, countries, and the materials they deal with. To fetc ...
I am currently using the express-session package to store product prices in my application. Everything seems to be functioning correctly, however I am encountering an issue when trying to display the session data in HTML. For example, if there are 2 produc ...
Custom dropdown, Model-View-Controller Code @foreach (var attribute in Model) { string controlId = string.Format("product_attribute_{0}_{1}_{2}", attribute.ProductId, attribute.ProductAttributeId, attribute.Id); @switch (attribute.AttributeControl ...
I'm currently developing a simple calendar application using Node.js and ejs. I am working on passing an array of months through express to my ejs file, with the goal of being able to cycle through each month by clicking the next button. How can I imp ...
My interactive user process operates in the following manner: Users encounter a dropdown menu featuring a selection of cities. Upon picking a city, an AJAX request retrieves all buildings within that city and inserts them into a designated div (the AJAX ...
I'm currently working on a Vue application that utilizes Vuex for state management. Within this application, I have several store modules set up at the root level. Periodically, every 5 seconds, I retrieve a large amount of data and update the store s ...
Three tables are in my database: User, UserDrink, and VenueDrink Here is a preview of the sample data: User id | name | gender | -------------------- 1 | John | male | 2 | Jane | female | UserDrink id | count | user_id | venue_drink_id 1 | 3 | ...
I'm completely new to CSS and javascript, so please bear with me. My goal is to remove the class disable-stream from each of the div elements located under the div with the class "stream-notifications". Below is an image for reference: Even though I ...