Exploring the possibility of incorporating an alphaMap in Three.js

I've been experimenting with creating a cloud texture using two jpeg files - one for transparency and the other for color/visible texture. While the three.js documentation has been somewhat helpful, I'm struggling with the actual implementation. I know that alphaMap exists, but I'm unsure if I'm using it correctly. The code I have doesn't seem to be functioning as expected. The texture should be the color layer while the alpha serves as the clipping mask. The alpha mask works on its own, but it doesn't clip the texture layer.

// trying to add clouds
function addClouds(){
    loadText.innerText = "Adding Atmosphere";
    var cloudsTexture = loader.load( "img/earthcloudmap.jpg" ),
        cloudsAlpha = loader.load( "img/earthcloudmaptrans.jpg" ),
        materialClouds = new THREE.MeshPhongMaterial( {
            map: cloudsTexture,
            alphaMap : cloudsAlpha,
            transparent : true,
            depthWrite  : false
        } );
    meshClouds = new THREE.Mesh(spGeo, materialClouds);
    meshClouds.scale.set(1.015, 1.015, 1.015);
    scene.add(meshClouds);
}

Answer №1

This code appears to be correct in my opinion.

I am curious about the contents of the alpha jpg file.

Keep in mind that:

.alphaMap

The alpha map serves as a grayscale texture that dictates the transparency levels on the surface (black: fully transparent; white: fully opaque). The default setting is null. This texture uses only the color information, disregarding any alpha channel that may be present. When dealing with RGB and RGBA textures, the WebGL renderer utilizes the green channel for sampling this texture as it provides additional precision for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and luminance/alpha textures will continue to function as expected.

Documentation

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 that jest is unable to catch the exception?

I have a simple function that looks like this: function foo({ platform }) { if (platform === 'all') { throw new Error('Platform value can only be android or ios'); } return `${platform}`; } After writing unit tests, the re ...

"Utilizing the power of Twitter Bootstrap and Snap.js for

I am currently working on integrating Snap.js by jakiestfu with Twitter Bootstrap. I have managed to make it work to some extent (I can slide the content and open a drawer through a click event). However, I am facing a challenge where the drawer content re ...

The dynamic relationship between redux and useEffect

I encountered a challenge while working on a function that loads data into a component artificially, recreating a page display based on the uploaded data. The issue arises with the timing of useEffect execution in the code provided below: const funcA = (p ...

``There seems to be an issue with setting the input value attribute using jQuery's .html

I've been trying to update the value attribute in the input element within my HTML code, but so far, I haven't had any luck with it. HTML: <div class='photo-info'> Photo Name : <span class='photo-name'><?p ...

After a short delay, make sure to open a new tab when clicking to bypass any popup blockers without relying on Ajax technology

Before you downvote, please consider my rationale. I am in the process of developing a web-based educational project that includes an art section. When a user clicks on a button, an element containing a picture of an art piece appears. I then want to open ...

Customizing Pie Legends in Echart Configuration

I am trying to find a way to present pie chart legends along with their values in a unique format. I have attached an image for reference. Despite my efforts, I haven't been able to figure out how to achieve this specific display. If you take a look a ...

Show the message "No results found" if there are no matches, or hide the DIV displaying search results using AJAX and MySQL

I'm struggling with getting my search bar to display "No matches found" or hide the results div completely when a query doesn’t match any “Name” in the MySQL database. The search bar works for displaying AJAX live search results using MySQL, PHP ...

Managing sessions and cookies for Firefox forms

On my webpage, there is a poll form where users can vote and see the results through an ajax request. When a user votes, a cookie is created to prevent them from voting again upon returning to the page. However, I have encountered an issue with Firefox wh ...

Express Promises Linked Together: Lack of Data in Last Stage

When handling put requests for my restful API, I utilize the findOneAndUpdate method of Mongoose. The password is left to the second step where the 'save' pre hook of Mongoose is used to hash the password. router.put("/:id", function(req, res, n ...

Double-Image Display: Ennui Content Slider showcasing dual images simultaneously

Hey there! I am attempting to utilize the Ennui Content slider in order to showcase two images for each sequence of images. If you're interested, here is the link to the slider: I'm a bit unsure about what modifications or steps I need to take ...

What is the best way to implement rate limiting or throttling on a Strapi API?

Our company relies on a simple strapi API implemented in node.js and hosted on Heroku. Despite our efforts, we have not been able to find a solution to implement rate limiting, as it appears that Heroku does not offer throttling add-ons and strapi lacks bu ...

Choosing a tab on a website using Python and Selenium

Displayed above is an image of tab codes found on a web page: https://i.sstatic.net/M54VH.png The tabs are named Overview, Information, and Audit (Please refer to the top part of the image). While I am able to open the tab by clicking with a mouse, I am f ...

ThreeJS: Is CSG the missing wrapper?

I have been utilizing ThreeCSG.js independently to generate various shapes, but I am encountering errors when attempting to create certain shapes: Maximum call stack exceeded. It appears that the repository is not being updated, so I experimented with the ...

Freeze your browser with an Ajax request to a specific URL

There is a function in my view that transfers a value from a text box to a table on the page. This function updates the URL and calls another function called update_verified_phone(). The update_verified_phone() function uses a model called user_info_model( ...

I am seeking a solution to this error that occurs whenever I attempt to call a function using a button

Issue " _ctx.hello is not a function TypeError: _ctx.hello is not a function at onClick._cache.<computed>._cache.<computed> (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/di ...

Understanding Java and JavaScript variables within a JSP webpage

I am currently working on populating a pie chart from Google with data fetched from my database. Although I have successfully retrieved the desired results in my result set, I am facing challenges in converting my Java variables into JavaScript variables ...

Sending an array of objects in JavaScript to a controller

I have a dynamic form that I'm trying to submit to my Controller. Instead of sending just a string or an array with data, I need to pass an array of objects using ajax request after building the Javascript Array. The challenge is that when I send only ...

transform the stationary drawing to the top and left position at coordinate (0,0)

Exploring canvas has led me to encounter a puzzling issue with the translate method. While working on this fiddle http://jsfiddle.net/claireC/ZJdus/4/, my goal was to have the drawing move and bounce off all four walls. However, I noticed that it would no ...

What is the best way to combine the average hours, minutes, seconds, and milliseconds in JavaScript?

I am seeking guidance on how to calculate the average of three different times in JavaScript. In the scenario presented below, the average of the three times is calculated as 01:42:22:566. <form action="/action_page.php"> <label for= ...

Linkyfy.js does not function correctly with each and not statements

Trying to incorporate a linkifying script on a website, which transforms URLs in text into clickable links. Utilizing the following solution: https://github.com/SoapBox/linkifyjs To make it operational (post-download), the following steps are required: & ...