Changing the material color in Three.js from black to transparent

Looking to create a Lambert material using a texture with transparent black color, without using an alphaMap.

I have a sphere with a clouds texture that I want to appear transparent black. When I try using blending, it affects the shadows, and I want to maintain the behavior of a MeshPhong material, but with only a transparent black color.

var cloudsMaterial = new THREE.MeshLambertMaterial( { 
                        color: 0xffffff, 
                        map: THREE.ImageUtils.loadTexture( "img/planets/clouds.jpg" ),

                        specular   : new THREE.Color("rgb(255,255,255)"),
                        shininess  : 0.1,                              
                        depthTest  : 0,
                        blending   : 1,
                        transparent: true,
                        bumpScale  : 1, //0.8
                        bumpMap    : THREE.ImageUtils.loadTexture( "img/planets/bump.jpg" ),                                                      
                        } );

What is the best approach to setting up blending or other attributes in this case?

javascriptthree.js

Answer №1

The solution I found was to utilize an alpha map, which is a black and white texture where white represents less opacity and black is fully opaque:

var texture = THREE.ImageUtils.loadTexture( "clouds.jpg" );
var alphaMap = THREE.ImageUtils.loadTexture( "clouds_alpha.jpg" );
var cloudsMaterial = new THREE.MeshLambertMaterial( { 
                        map        : texture,
                        alphaMap   : alphaMap,
                        blending   : 1,
                        transparent: true,                                                    
})

Answer №2

I am confident that blending a jpg with a black background to make it transparent is achievable. However, there seems to be an issue with the alphaMap:map being undefined, as mentioned by Martin. This question remains unanswered.

As far as I can recall, the correct method is using glBlendFunc(GL_SRC_ALPHA, GL_ONE); and I believe that Threejs has not overlooked this detail.

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

Delete an <li> element upon clicking a span tag

I've been attempting to fadeOut some <li> elements, however I haven't had any success. Here's my code below: <li class="lclass" id="1"> First Li <span class="removeit" id="1" style="color:#C00;">Remove</span> ...

javascriptjquery

Prevent selection based on JSON information

I am utilizing the Jiren filter library to sort through JSON data. If a particular filter criteria does not match any of the results, I would like to disable that option in the select dropdown. For instance, if "Silversea Expedition" is not found in my re ...

javascriptjqueryjson

"Image Reactor: Unleashing the Power

I'm struggling to understand why my relative path image loading isn't functioning correctly. The assets are located within the src folder in my working directory, but for some reason, they're not displaying as expected. When I directly impo ...

javascriptreactjsimage

Exploring JSON data with JQuery: A comprehensive guide to looping through with each

I am currently facing an issue with looping through cached JSON data obtained from an Ajax call. Specifically, I keep receiving the error message 'Cannot read property 'title' of undefined'. Can someone provide assistance? $.each(cach ...

javascriptjqueryjson

A guide on implementing React hooks within a React class component

Just stepped into the JavaScript world and facing a bit of trouble... Currently, I'm working with a React hook import { useKeycloak } from '@react-keycloak/web'; import { useCallback } from 'react'; export const useAuthenticatedCal ...

javascriptreactjsreact-hookskeycloak

Setting Alpha Channels for OBJ/MTL Model Meshes

When loading a model in Three.js, I noticed that some of the meshes have textures with alpha channels but the transparency is not applied correctly. This is happening in version R67 of Three.js. Below is my rendering setup: renderer = new THREE.WebGLRend ...

three.js

There is a gap found in the span element in Angular, but this gap is not seen in

Comparing two component templates, one in AngularJS and the other in modern Angular: <span ng-repeat="status in statusInformation.statusList | filter : whereFilter" class="show-on-hover"> <span class="app-icon ap ...

javascripthtmlangularangularjs

Failing to include a valid string in the path will result in an

Within my node API, I have a function that updates the email address array for either a contact or a farm. The concept is the same, but the difference lies in where the array is located: in farms it's within Records.emails, and in Contacts it's s ...

javascriptnode.js

It is my goal to populate the array with numbers while avoiding any duplicate entries

I am currently facing an issue with my code as it is returning a length of 0 instead of the expected result of 5 after excluding duplicates from the array. I have a feeling that there might be something missing in my code, but I just can't seem to fig ...

javascriptarrays

"Encountered npm error: JSON input ended unexpectedly" while trying to install express-mysql-session"

I'm currently developing a nodejs project that uses passportjs for user authentication and mysql as the database. I'm now looking to incorporate session storage by utilizing the ""express-mysql-session" package. However, when attemptin ...

javascriptnode.jsnpmbackendnpm-install

When I changed the encoding of a live texture to sRGB in Three.js, the frame rate dropped by fifty percent

I am currently working on a threejs application that requires updating a texture in each frame. The output encoding of the THREE.WebGLRenderer is set to sRGB. Upon setting the texture encoding to sRGB, I observed that the rendering result is accurate. How ...

javascriptbrowserthree.jswebgl

"Is it possible to conditionally render a component depending on the state in

One of the challenges I'm facing is customizing a filter icon from MaterialUI. My goal is to change its color to black when a checkmark is checked, and adjust its position accordingly. Additionally, when a box is checked, it should fill in setFilters. ...

javascriptcssreactjsmaterial-uijsx

What could be causing the error where axios.get is not functioning properly?

Recently, I embarked on a journey to familiarize myself with working with packages and npm. My first step was to import axios for a simple http request. Initially, I set up the project using npm init successfully. However, I encountered my first roadbloc ...

javascriptnode.jsnpmnpm-install

There seems to be an issue with the way Meteor and React are displaying data

Having trouble displaying paint data in my code - all I see is [object,object]. Tried using .toString() without success. Any assistance would be appreciated. I understand that this indicates objects inside arrays but unsure how the array is generated or h ...

javascriptreactjsmeteor

Exploring Angular controller inheritance and the ability to override methods from a superclass

Is it possible to call a function on the superclass controller when extending a controller in Angular and overriding a function? To illustrate with an example in Java: class Foo { void doStuff(){ //do stuff } } class FooBar extends Fo ...

javascriptangularjsinheritance

What is the best way to refresh a single component in my application without causing the other components to reload?

I've been working on a review application with Vue.js that fetches random facts from an API (https://uselessfacts.jsph.pl/random.json?language=en) and allows users to provide feedback through radio buttons and text inputs. Once submitted, the feedback ...

javascriptvue.js

Iterate over each item in the select and include a blank option if either of the elements is missing

Having trouble with 2 drop down menus, select1 and select2. I select item1 from select1 and then click the OK button. But when the selected index is 0 (first option), I want to loop through the items of both drop downs. If the elements at the same index ( ...

javascriptjquerydrop-down-menudropdownbox

An issue with jQuery's :not selector and hash symbol syntax

I encountered a syntax error that is quite charming. It appears when attempting to select all anchor tags without an href attribute containing a placeholder URL, such as href="#". Here are the attempts I have made: $("a:not(href='#')"); // cha ...

javascriptjqueryjquery-selectors

Is there a way to simultaneously redirect to a new page and trigger an event on that page?

As a programming novice and a newcomer to this community, I am seeking assistance with my query. I am interested in learning how to redirect from page 1 to page 2 and then immediately trigger an event on page 2. Below is the code snippet from page 1: & ...

javascripthtmljquery

How can I achieve unique spacing between rows in material-ui grid components?

What is the most effective method for creating spacing between specific rows in a grid using material-ui? Consider the following grid with spacing={0}: GridContainer row1 GridItem GridItem row2 GridItem GridItem row3 GridItem GridItem row4 Gr ...

javascriptreactjsmaterial-uigrid-systemmui