Spin an Alpha with Adjustments (THREE.JS R76)

Creating a unique wormhole effect using a cylinder and rotating texture is my current project.

To see an example, visit:

The texture rotation is achieved with the following code...

 tunnel.material.map.offset.y += 0.01;
 tunnel.material.map.offset.x += 0.005;

However, when I tried implementing an alpha map to create gaps in the tunnel for transparency, using similar code did not produce the desired effect...

I attempted this approach...

tunnel.material.alphaMap.offset.y += 0.01;
tunnel.material.alphaMap.offset.x += 0.005;

Unfortunately, this method did not work as expected. Rotating the cylinder instead of the texture also did not yield the results I was looking for.

javascriptthree.jsoffsetalpha

Answer №1

It seems that I had applied edge clamping to the main texture, but overlooked doing the same for the alpha texture. After rectifying this, everything functions as intended and the solution is pretty straightforward;

let cylinderTexture = loader.load("wormhole.jpg"),
        cylinderAlpha = loader.load("wormholeAlpha2.jpg");
        cylinderTexture.wrapT = THREE.RepeatWrapping;
        cylinderTexture.wrapS = THREE.RepeatWrapping;
        cylinderAlpha.wrapT = THREE.RepeatWrapping;
        cylinderAlpha.wrapS = THREE.RepeatWrapping;

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

Having issues with the functionality of Bootstrap 4 popover?

In my Spring MVC web project, a Bootstrap popover appears when the help icon is clicked. However, on the first click, the popover opens and moves away from the icon. After closing it and clicking again, the popover correctly positions itself. When I chan ...

javascriptcssspringbootstrap-4jstl

Tips for incorporating a return statement within a network request function that is already returning information pertaining to the request

Is there a way to retrieve the data extracted from within newReq.on('response', (response) => {? var request = require('request'); const cheerio = require('cheerio'); const { app, net, BrowserWindow } = require('elect ...

javascriptnode.jselectron

Custom Tooltips arrow is not receiving the CSS styling

I have implemented ReactTooltip from the ReactTooltip library You can view an example here Component Setup <ReactTooltip className={styles.customTheme} id={id} place={placement} effect="solid"> {children} </ReactTooltip> Stylin ...

javascriptcssreactjssasstooltip

React app (storybook) experiencing loading issues with @font-face

I am struggling to load custom fonts from a local directory. Can someone provide assistance? Below is the code I am currently using: @font-face { font-family: 'My Custom Font'; src: url('./fonts/MyCustomFont.eot'); src: url(&apo ...

javascriptcssreactjsfontsstorybook

Issue with default behavior of infinite scroll in Angular 4

I'm currently working on incorporating infinite scroll into my Angular 4 application. I've carefully followed all the guidelines provided on https://www.npmjs.com/package/ngx-infinite-scroll According to the documentation: By default, the dir ...

javascriptangularinfinite-scrollnginfinitescroll

JS problem with decreasing

Within a React component, I have implemented the following method: addWidget = (index) => { let endX = this.state.widgets.reduce((endX, w) => endX.w + w.w, 0) console.log(endX); if (endX === 12) endX = 0 this.setState({ wi ...

javascriptreactjsecmascript-6

Preserve StepContent information within Material-ui Stepper during updates to the active step

I have a Stepper component with multiple steps, each containing several TextFields. The issue is that material-ui unmounts the step contents when you switch steps, causing all the data in the TextFields to be lost. My question is: Is there a way to prese ...

javascriptreactjsmaterial-ui

arranging a collection of images based on their values in increasing order

cardShop is a container with various images, each with its own unique ID and value attribute. These values consist of two numbers separated by a comma, such as 2000,500 or 1500,200. My goal is to sort these images in ascending order based on the first numb ...

javascripthtml

Array of JSON data passed in the request body

Recently, I have been attempting to pass JSON data to my req.body. The data structure is as follows: answers = ["A","B"]; //An array to be included in the JSON Object var Student_Answers = { //JSON object definition Answers: answers, matricNumber: ...

javascriptnode.jsjsonexpress

What is the method for moving one div above or below another div using the scroll bar?

Here's the scenario I'm facing: I have rows with buttons that, when clicked, reveal a set of options. The challenge is that depending on where the row is located on the page, the settings need to open either above or below the button. When the b ...

javascriptjquerycss

Creating particle effects with Three.js and shaders

Hey everyone, I'm new to this community and still learning the ropes. If I make any mistakes or assumptions, please feel free to correct me. Currently, I am working on designing a particle system using the Three.js library. Specifically, I am utilizi ...

three.jsvertex-shader

The cookie's expiration time is being set to 1 hour, rather than the specified maxAge duration

My file contains a cookie that consistently sets to 1 hour as the default, even when I specify a maxAge of 12 seconds. res.cookie("my-cookies", req.body.id_token, {maxAge: 12000, httpOnly: false}); ...

javascriptnode.jsexpress

Using Three.js RayCaster.setFromCamera to determine the coordinates of the mouse pointer in three-dimensional space

Exploring Three.js r70 source code setFromCamera: function ( coords, camera ) { // The camera is assumed not to be a child of a transformed object if ( camera instanceof THREE.PerspectiveCamera ) { this.ray.origin.copy( came ...

three.jsraycasting

Having issues with jQuery's .hover and .mouseleave functions causing unintentional looping. Any suggestions on how to resolve this

What I want to achieve: When hovering over the image, it fades out. Text should fade in after the image fades out. Text should fade out when the mouse leaves. The original image should fade back in. End with the original image and no text displayed. Iss ...

javascriptjquerycsshtmlimage

Combining an array of intricate data models to create

Currently, my setup involves using Entity Framework 7 in conjunction with ASP.NET MVC 5. In my application, I have various forms that resemble the design showcased in this image. By clicking on the "new" button within these forms, a Bootstrap modal like t ...

javascripthtmlasp.netasp.net-mvc

the ng-repeat directive disables input controls within the tfoot

When working with JSON data, I encountered a situation where I needed to display different types of student details in a table. For one specific type of student, namely partners, I wanted to include input controls such as checkboxes and buttons. However, e ...

javascriptangularjstypescripthandlebars.js

A step-by-step guide on uploading a CSV file in Angular 13 and troubleshooting the error with the application name "my

I am currently learning angular. I've generated a csv file for uploading using the code above, but when I try to display it, the screen remains blank with no content shown. The page is empty and nothing is displaying Could it be that it's not ...

javascripthtmlcssangular

node-gallery reports: "No albums were discovered"

I am exploring the use of node-gallery in my Node js/Express/Jade project. After following the guidelines provided at https://github.com/cianclarke/node-gallery, I encountered an issue when attempting to access the page localhost:3000/gallery: {"message" ...

javascriptnode.jsexpresspug

The function is not functioning properly due to an issue with the HTTP request

I am working with an AngularJS Framework controller. var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { var locations =[]; var map; var markers = []; $scope.mappa = function(){ map = new g ...

javascriptangularjsfunctioncontrollerhttp-get

PHP not receiving POST information from $.ajax call

My JavaScript triggers a POST method when the datepicker loses focus, calling the script rent-fetch-pick-up-point.php. However, the PHP script gets stuck at the if-statement because it's not receiving the POST data. The datepicker is associated with a ...

javascriptphpjqueryhtmlajax