"Creating an animated smoke effect using Three.js with a clear, see

I'm brand new to working with three.js and I'm trying to achieve a transparent background for the smoke canvas overlaying the image. Currently, the canvas is positioned behind the image as shown in the CSS below.

canvas{ 
    position: absolute;
    z-index: 2;
    top:0px;
    left: 0;
}

I'm struggling to figure out how to remove or make the black background of the canvas transparent. Could you take a look at my demo linked below?

https://codepen.io/davide77/pen/GxZgZB?editors=1010

Answer №1

To achieve a see-through background, you have the option to include the alpha parameter when creating an instance of the WebGLRenderer.

var renderer = new THREE.WebGLRenderer({ alpha: true });

Answer №2

If you want to set the background of your scene in Three.js, you can simply use the scene.background property. There's no need to add extra HTML elements. Just assign your texture to it like this:

scene.background = texture;

Check out this CodePen example for reference.

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

Is it possible to retrieve the ID of an anchor tag when the text within two table items meets my specified criteria?

https://i.sstatic.net/pQU32.png In the table with ID "PTSRCHRESULTS," each row contains anchor links. I am trying to find the ID of an element within a row that contains both "Undergrad" and "1". This is for Power Automate Desktop, but I can use JavaScrip ...

What are some effective ways to analyze jQuery and JavaScript using web development tools?

I'm struggling to use web development tools to inspect the JavaScript on websites. It's challenging to identify which parts of a site are utilizing JS, unlike CSS or HTML where it's more visibly defined. Even when I attempt to delete some J ...

The Vue.js 2 router seems to malfunction when triggered programmatically, yet it functions properly when used as a

index js file I tried using Vue Router programatically, but it was not working for me. After searching online, I found that everyone used this.$router.push(). import Vue from 'vue' import Router from 'vue-router' import HelloWorld fro ...

What is the best way to assign the value of a specific key in one array as the key in a different array?

I am attempting to retrieve the value feature_1 associated with the key name from the array data. I then aim to set feature_1 as the key of another array asset, with an array as its corresponding value. For example: //input: data: { name: "feature_1" ...

Organize Development and Production files in npm or webpack for improved efficiency

In React Native projects, we typically use index.android.js and index.ios.js to differentiate between the same file for Android and iOS platforms. But I wonder if it's possible to separate files based on the development and production environments as ...

Modify CSS image according to the user interface language in asp.net

Is there a way to dynamically change the image based on different cultures in my ASP.NET webpage? I have successfully been able to switch strings using a resource file, but I am unsure how to handle images. Currently, I have an A tag with a specific clas ...

React Router relies on a DOM for Browser History to function properly

I am currently developing my app using React.js and express. My main focus right now is setting up react-router-dom for the application. Unfortunately, I encountered a warning when attempting to run the app: Invariant Violation: Browser history needs a ...

The Express.js feature "app.use() mandates the use of middleware functions"

Currently, I am delving into learning Express.js 4 and Node, but I seem to have hit a roadblock with an error that has me stumped. I'm attempting to utilize the node-sass package to compile my sass code; however, I've encountered obstacles in ge ...

How can I retrieve the decimal x and y coordinates when the mouse is moved in Typescript Angular?

I am in the process of transitioning my user interface from Flash/Flex, where it stores values in decimal format. I need to access and reuse these values. Here is a demo showcasing my problem. Here is a snippet: import { Component, Input } from '@an ...

Error: The 'encoding' property cannot be set on null objects in THREE.js

I have been trying to load a basic grass block from Minecraft, but I keep encountering an error message that says TypeError: Cannot set properties of null (setting 'encoding'). This error originates from line 2893 in GLTFLoader, specifically the ...

Incorrect font displayed on Bootstrap button after inserting hyperlink

This section contains my HTML code snippet: <div class="panel panel-default"> <div class="panel-heading"> Records <button type="button" class="btn btn-xs btn-success pull-right" id="command-add" data-row-id="1"> ...

Sending SQL queries with multiple selections, each containing three values for every option

I am faced with a challenging question that will require me to dedicate long hours towards solving it and finding a solution. Imagine I have a multiple select element with various options, each consisting of 3 values: One value for the language name One ...

Issue with displaying record attribute as a text variable

I'm currently attempting to retrieve the attribute odata.type from a record so that I can adjust my EditForm based on its value. Strangely, when I utilize a constant to achieve this and print it with console.log, it appears as follows: ƒ HWType(_ref ...

Transferring information from a Jade file to a Node.js server

I'm currently working on creating a data object within my Jade view page that will be used in my server-side JS. The data object involves dynamic HTML generation that inserts input boxes based on user input. function addDetail() { var det ...

Can I modify individual properties of xAxis.labels in HighCharts?

I am seeking to customize the properties of my labels on the x-axis in a unique way (View my query here). I have a clear understanding of how to achieve this for dataLabels: See API reference. This process is akin to what has been explained here. Howeve ...

Points unable to connect

I am having trouble intersecting Three.Points, but I have no issue with intersecting THREE.Mesh. Here is my code - can someone please help me understand what mistake I might be making? When I try to intersect the Points, all I get is 0. function initial ...

Verify whether the div contains a specific class before triggering the animation

I'm attempting to create an animation following a user interaction with the Owl Carousel drag feature. The issue I'm encountering is that the code referencing $(this) does not recognize the .nav-item element with the .active class. Any insights ...

Using JavaScript/jQuery to analyze POST values just before submission

Currently facing a dilemma as my company is in the process of redesigning its website. I find myself stuck trying to come up with a temporary fix for an issue on the existing site. The solution requires the use of JavaScript or jQuery. The problem arises ...

Error encountered when deploying the app to the live server: 500 Internal Server Issue

I am encountering an issue with my ASP.Net web app's ajax file upload feature. While it works perfectly on my local host machine during testing, I face a 500 Internal Server error when I try to publish it to a website. The console output in Google Chr ...

The issue arises when trying to enqueue a Javascript file, causing an error stating that $ is not

I am having an issue with my WordPress plugin development where the jquery dependency is not being pulled in correctly, despite passing it in the third parameter of the wp_enqueue_scripts function. Upon inspecting with Google Chrome, I encountered the erro ...