How to adjust transparency in Three.js objects

Currently, I am developing a scene where certain elements are loaded from a JSON file. While I am able to toggle the visibility of each individual object, I now find myself wanting to adjust the opacity/transparency of an individual object.

The objects in question are being created using the following code:


    geometryArray = new Object();
    var loader = new THREE.JSONLoader();
    for(var i = 0; i < jsonFileNames.length; i++){
        var layerName = jsonFileNames[i].split("/")[1].slice(0, -5);
        loader.load(layerName, jsonFileNames[i], function(geometry, materials, layerName){
            mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({vertexColors: THREE.FaceColors, side:THREE.DoubleSide, transparent: true}));
            mesh.scale.set(scaleFactor, scaleFactor, scaleFactor);
            mesh.name = layerName;
            scene.add(mesh);
            geometryArray[layerName] = mesh;
        }, layerName);
    }

I can easily show or hide the objects using this code:

geometryArray[layerName].visible = true;

However, my challenge lies in figuring out how to apply transparency to an object. I attempted to use the following code, but it did not yield the desired results:

geometryArray[layerName].materials[0].opacity

Answer №1

Don't forget to include the following code as well:

geometryArray[layerName].materials[0].transparent = true

This step is necessary for the material to properly utilize opacity.

Answer №2

Make sure to use true or false when setting the material.transparent property, as it only accepts Boolean values and not numbers.</p>

<pre><code>WRONG !!!!! You should not use material.transparent = 0 or material.transparent = 1

RIGHT ------> Always use material.transparent = true or material.transparent = false

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

How to nullify the valueChanges pipe in Angular RxJS until the observable is resolved

A challenge I am facing is piping the valueChanges from a select element to trigger the appropriate API request and displaying a spinner until the response is received. Additionally, I am trying to utilize publish() and refCount() methods so that I can use ...

Error: The initial parameter must be a string, Buffer, ArrayBuffer, Array, or Array-like Object. An object type was passed in instead in CryptoJS

In my quest to encrypt and decrypt data in react-native, I embarked on using the crypto node module by incorporating it into my react native project through browserify. While attempting encryption with the code snippet provided below, an error surfaces sta ...

Struggling to create a <td> with AngularJS directive

I am currently working on creating a directive for a large set of repeated HTML code that involves using tables and table data cells. Although I have experience creating directives for div elements in the past, this is my first attempt at incorporating the ...

sent a data entry through ajax and performed validation using jquery

Is there a solution to validating the existence of an email value using ajax after validation work is completed? Despite attempting to check for the email value and display an alert if it exists, the form continues to submit regardless. See below for the ...

Is there a way to place two input fields from different forms side by side on the same line?

Here are two forms extracted from an html page: <form method="get" action="search/s" id="number"> <div style="text-align: center;"> <input type="text" id="regNo" name="regNo" size="30" maxLength="50" > or ...

What is the best way to adjust the size of an image within a block layout using either JavaScript or React?

I have a game to create, and I need a block of elements to be aligned like the image below. However, the kangaroo image is not displaying correctly. The actual size of the image is width:70px and height:100px. But I want to resize it to width: 49px and h ...

From where does the require.js file originate?

Currently, I am learning Angular 2 from the tutorial available at https://github.com/pkaul/maven-typescript-example. Once I proceed with the 3rd step (mvn jetty:run), a runnable war folder is generated in the example-webapp/target directory. However, I ha ...

Evaluating QUnit Test Cases

How do you write a test method in QUnit for validating functions developed for a form? For example, let's consider a form where the name field should not be left blank. If the validation function looks like this: function validNameCheck(form) { if ...

Utilizing Bootstrap Modal to Display PHP Data Dynamically

Modals always pose a challenge for me, especially when I'm trying to work with someone else's code that has a unique take on modals that I really appreciate (if only I can make it function correctly). The issue arises when the modal is supposed ...

Troubleshooting CSS compatibility issues in Firefox browser (or HTML rendering as plain text)

In a unique web page comparing two photos, the clicked one changes, but there's an issue in Firefox where HTML displays as text and links don't work. CODE:- * { box-sizing: border-box; } html { height: 100%; } body { height: 100%; mar ...

Adjust a Specific CSV Value Using JavaScript and NodeJS

Hey there, I have a CSV file that I need to extract and modify a specific value from. Let's take this as an example: CSV 90,90,90,90,90 3,1,1000,2,931 I'm looking to access the number "2" in this CSV. How would I go about doing that? And once ...

The attribute of the Angular div tag that lacks an equal sign

Apologies if this question has been asked before. I've noticed in some people's code that they use the following syntax: <div ui-grid="myUIGrid" ui-grid-selection ui-grid-resize-columns class="grid" /> Can someone explain what ui-grid-sel ...

Dependency of multiple objects in Webgl three.js

I'm struggling with object dependencies and need help. I want to create a setup where one object is dependent on two other objects. Essentially, when I modify the position of one parent object (like changing the y-Position), the dependent object (chil ...

Is it possible to apply styles to the body of a document using styled-components?

Is it possible to apply styles from styled-components to a parent element, such as the <body> tag, in a way that resembles the following: const PageWrapper = styled.div` body { font-size: 62.5%; } ` ...

Deleting outdated files in a temporary uploads directory - NodeJS best practices

My process for removing old files from a tmp upload directory involves the code below: fs.readdir( dirPath, function( err, files ) { if ( err ) return console.log( err ); if (files.length > 0) { files.forEach(function( file ) { ...

Executing Javascript to populate a div element with content based on its CSS class

Is there a way to isolate my View (HTML & CSS files) within a controller like JavascriptCode/AJAX, so that upon page load, only the controller binds the data to a specific element such as a DIV based on its class? Do you think this is achievable? If so, ...

Using React-router for server-side rendering and loading data with ajax calls

Currently I am working on implementing react-router in my project, but I seem to be facing some major concept misunderstandings. There are certain components in my application that require fetching data from the server. Previously, I used the following cod ...

Communication between AngularJS directives and controllers occur when a function is called upon a change

I have developed a unique custom directive which is defined as: <div class="col-md-6"> {{templateMapping[colProp].SheetPointer}} <select class="form-control" ng-model="selectedColumn" ng-change="changeMapping()" ng ...

Display multiple markers on a Google Map using google-map-react library

I am currently struggling to display markers on my Google Map using the map function. I have tried various approaches but nothing seems to work. Could there be limitations that I'm not aware of, or am I overlooking something critical? I experimented w ...

Error: The function isInitial of chunk cannot be found

Currently, I am attempting to build my program using the following command: "build": "NODE_ENV='production' webpack -p", However, I encountered an error message: node_modules/extract-text-webpack-plugin/index.js:267 var shouldE ...