Updating the opacity of the alphaMap in THREE.JS R76 does not cause the desired change

I am working on a tunnel project that involves a rotating texture and alpha map. My goal is to adjust the opacity of the alpha map using tweening effects.

Initially, I set the opacity to 0 and then try to increase it gradually. However, the live view does not reflect these changes even though the opacity property is being updated. It seems to be stuck at full opacity in the live view. I attempted to set the needsUpdate property of the material to true, but that did not solve the issue.

Below is how the setup looks like...

function addTunnel(){
var cylTexture = loader.load("wormhole.jpg"),
    cylAlpha = loader.load("wormholeAlpha2.jpg");
    cylTexture.wrapT = THREE.RepeatWrapping;
    cylTexture.wrapS = THREE.RepeatWrapping;
    cylAlpha.wrapT = THREE.RepeatWrapping;
    cylAlpha.wrapS = THREE.RepeatWrapping;

var cylGeom = new THREE.CylinderGeometry(5000, 5000, 50000, 32, 32, true),
    cylMat = new THREE.MeshPhongMaterial({
        side: THREE.BackSide,
        map: cylTexture,
        alphaMap: cylAlpha,
        transparent: true
    }),
    cyl = new THREE.Mesh(cylGeom, cylMat);

cyl.name = "tunnel";
scene.add(cyl);
scene.getObjectByName("tunnel").position.z= -9000;
rotateObject(scene.getObjectByName("tunnel"), -90, 0, 0);
octree.add(scene.getObjectByName("tunnel"));
tunnel = scene.getObjectByName("tunnel");
tunnel.material.alphaMap.opacity = 0;
}
javascriptthree.jsopacityalpha

Answer №1

The PhongMaterial shader utilizes the alphaMap pixel value as the alpha value, which can be observed in the code HERE.
If you intend to animate this effect smoothly, you will need to either generate the alphaMap dynamically or modify the shader itself.
In such cases, creating a custom ShaderMaterial might be a more suitable approach.

For an illustration of a Doctor Who time tunnel-esque shader with transparency, check out the example HERE. Feel free to adjust the body background-color for different effects.

<script id="tunnelVertexShader" type="x-shader/x-vertex">
    varying vec3 vPosition;
    void main( void ) {
      vPosition = position;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
  </script>

  <script id="tunnelFragmentShader" type="x-shader/x-fragment">
    // Fragment shader code follows...
  </script>

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

What is the best method to transfer an array as a parameter from an Ipython notebook to an HTML file that includes specific javascript functions?

I have a unique HTML file named "file.html" that includes a distinctive JavaScript function described below: The Unique file.html <html> <head> </head> <script> function customFunction() { perform an action using ...

javascripthtmljupyter-notebook

Attempting to extract data from a JSON object within a multidimensional array

Looking at the JSON structure that I need to work with: [ { "result":"OK", "message":"Display", "value":200, "rows":29 } , [ { "personID":1, "img_path":"/1234/", "img ...

javascriptarraysjsonobject

Executing jQuery on page update can be achieved by utilizing event handlers to trigger

I have implemented jQuery multi-select to enhance the user experience of my Django app's multiselect feature. Upon initially rendering my page, I included the following script to bind any elements with the class 'multiselect' to the jQuery m ...

javascriptjquerypythonhtmldjango

Encountering a snag while setting up Google authentication on my website

Currently, I am in the process of integrating Google Authentication into my website. However, I have run into an error related to session management that reads as follows: TypeError: req.session.regenerate is not a function at SessionManager.logIn (C:&bso ...

javascriptreactjstypescriptgoogle-oauth

How does the Rx subscribe function maintain its context without the need to explicitly pass it along

Currently, I am utilizing Rx with Angular2 and making use of the Subscribe method. What intrigues me is that the callbacks of the method are able to retain the context of the component (or class) that initiated it without needing any explicit reference pas ...

javascriptangularrxjs

What is the best way to display form input fields depending on the selected value?

I've been struggling with a seemingly simple issue that I can't seem to find the right solution for, even after scouring Google. I have a form field for input and a select field with various values, including an "Other" option. Here's what ...

javascriptjqueryhtmljsp

Remove an element from an array within an object stored in a MongoDB document

Greetings and thank you for taking the time to read my query! I am currently diving into the world of coding, and here's my first question on this platform: I have a MongoDB collection structured similarly to the example below. Each document represe ...

javascriptnode.jsmongodbmongoosemongodb-query

The Backbone model destruction URL fails to include the model's ID when trying to delete

I'm facing an issue in my app where I need to delete a model from a collection using "this.model.destroy" in my view, but it triggers a 405 response and the response URL doesn't include the model's id. According to the Backbone documentation ...

javascriptbackbone.js

JSRender: A guide on accessing variables from outside the block

I am currently using jsrender to display the details of my JSON object. One thing I'm trying to figure out is how to access an external variable from within the list. Any help would be greatly appreciated. <script id="itemTemplate" type="text/x ...

javascriptjqueryjsonjsrender

Tips for transferring information from a child component to its parent using a click event in the parent component

My React application is designed to generate quizzes. The main component, <CreateQuiz/>, contains a child component called <QuestionForm/>. Additionally, within the <CreateQuiz/> component, there is a button labeled "Add Question" which a ...

javascriptreactjscomponents

Encountered a problem while trying to inherit from the BrowserWindow class in

I utilized the https://github.com/SimulatedGREG/electron-vue template to craft a vue electron blueprint. Alongside the primary process index.js, I fashioned a file named MainWindow.js which holds the subsequent code: import { BrowserWindow } from 'el ...

javascriptnode.jsvue.jselectron

Dealing with query strings within routeprovider or exploring alternative solutions

Dealing with query strings such as (index.php?comment=hello) in routeprovider configuration in angularjs can be achieved by following the example below: Example: angular.module('app', ['ngRoute']) .config(function($routeProvider, $loc ...

javascriptangularjsangular-ui-router

What is the best way to interact with the crontab file using Node.js?

Currently working on an Electron application, I am in need of accessing and parsing the crontab file. Is there a way for Node.js (or another tool within Electron) to retrieve and read the primary crontab file? While exploring the cron-parser library, I d ...

javascriptnode.jscronelectron

The functionality of ko.utils.arrayFilter is malfunctioning

I am attempting to sort out an array by excluding users who are already on a previous list: FullList: Tom, Tim, Jim, Jill UsersList: Tom, Jill With the help of a colleague, I managed to utilize this array filter. However, the issue is that the fil ...

javascriptknockout.js

Decoding information from the twitchapi

I have recently embarked on a coding journey to create a Twitch bot, and my next endeavor is to establish a point system based on active viewers. To achieve this, I require the ability to extract viewer data from Twitch's API in JSON format. However, ...

javascriptjsonnode.jstwitch

The code seems to be malfunctioning in a separate JS file, but oddly enough, it functions properly when placed within a <script> tag

I am trying to create a loader, but I have encountered an issue where the script works when placed directly in the HTML file, but not when it is in a separate JavaScript file. Here is the script: var loader = document.getElementById("ld"); w ...

javascripthtmlcssbootstrap-5

The JSON variable has been updated, however the index.js file still displays the previous value

interval = setInterval(function() { online = require("./../../server/oxide/data/online.json"); if (online.ONLINE == -1) { client.user.setStatus(`dnd`); client.user.setActivity("server offline"); } else if (online.ONLIN ...

javascriptnode.jsdiscord.js

Tips for verifying the contents of a textbox with the help of a Bootstrap

I am still learning javascript and I want to make a banner appear if the textbox is empty, but it's not working. How can I use bootstrap banners to create an alert? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&g ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-modal

vue implementing autoscroll for long lists

I am looking to implement an autoscrolling log feature on my webpage that is dynamically fetched from a REST endpoint. To handle the potentially large size of this log, I decided to use vue-virtual-scroll-list. Additionally, I wanted the log to automatical ...

javascriptvue.jsvuejs2

The setInterval method in Typescript/Javascript is unable to invoke other functions

I have a situation where I need to call the function callMe() every 1000 ms. While this setup is functioning as expected, I am encountering an issue when trying to call another function from within callMe(). The error message I am receiving is: uncaught ...

javascripttypescript