Troubleshooting a ThreeJS Issue: the Mystery of the Malfunction

I have a ribbon showcasing various thumbnails. These thumbnails are painted on a canvas and then added to a Texture.

var texture = new THREE.Texture(textureCanvas);

The mesh is generated as shown below

    loader.load('mesh_blender.js', function(geom) {
      var mesh = new THREE.Mesh(geom, new THREE.MeshLambertMaterial({
        color: 0xffffffff,
        opacity: 0.7,
        overdraw: 0.21,
        side: THREE.DoubleSide,
        transparent: true,
        map: texture
      }));

The ribbon creation is great as it is, but I am aiming to add an additional effect as depicted in the image below. I want the central thumbnail to appear darker to indicate it is highlighted/selectable, while the rest have a transparent effect implying they are not selectable.

I have been trying to figure out a way to achieve this using Lights in Threejs, but my attempts have not been successful so far. My initial idea was to use an AmbientLight to illuminate the entire ribbon and then apply a SpotLight specifically on the central image with a darker color to achieve the desired effect. However, my results have been inconclusive.

I've managed to create something like this

But the focus on the central image is not evident. Despite using a helper to display the Light direction in the image, the light does not seem to affect the central image as intended. Here is the code snippet I used to implement the SpotLight

var spotLight = new THREE.SpotLight( 0xffeedd );
spotLight.position.set( 0, -50, 50 );
spotLight.castShadow = true;
spotLight.decay = 2;
spotLight.distance = 300;
spotLight.angle = 0.5;
var helper = new THREE.SpotLightHelper( spotLight, 2.5 );
scene.add(helper);

scene.add( spotLight );

Being new to Threejs and 3D graphics, I would greatly appreciate any assistance or guidance. Thank you. I am also open to alternative suggestions if using Lights is not the best approach to achieve the desired outcome.

Answer №1

By setting the opacity of the material to 0.7, adding another light may not produce the desired outcome. It's recommended to utilize a raycaster to pinpoint the object in the center and adjust the opacity of that specific object to 1, while keeping the rest at 0.7.

var intersects = raycaster.intersectObjects( objects );

Use the above code to gather the intersecting objects in an array. Within the renderer function, adjust the opacity of the first element in the array (the center object) to 1. This method works best when the thumbnails are separate objects.

// Set as the center of your vision
var mouse = new THREE.Vector2();
mouse.x = 0;
mouse.y = 0;

function highlightObject() {

// Update the picking ray with the camera and mouse position    
raycaster.setFromCamera( mouse, camera );   

// Calculate objects intersecting the picking ray
var intersects = raycaster.intersectObjects( scene.children );

// Set the object in the center opacity = 0.2
if(intersects.length > 0) {
    intersects[0].object.material.opacity = 0.2;
}

// Set the opacity of the rest of the objects in the scene to opacity = 1.0
for (var i = scene.children.length - 1; i >= 0; i--) {
    var obj = scene.children[i];
    obj.material.opacity = 1.0;

}
 }

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

Replicating JavaScript functions with the power of Ajax

I'm facing an issue with Bootstrap modal windows on my page. The modals are opening and closing successfully, but the content inside them is fetched through AJAX as HTML. For example, there's a button in the modal: <button id="myBtn"> and ...

How can I incorporate fetch into my code using VSCode?

I am completely new to using JS. I want to incorporate fetch in VSCode, but I'm having trouble importing it. When I try: import fetch from "node-fetch"; I get this error: (node:19856) Warning: To load an ES module, set "type": &q ...

Using MongoMapper with Rails to efficiently render arrays in views

In my Rails application, I have a controller that retrieves data from MongoDB. The specific field I need is actually an array, and I want to display it in an erb view. Currently, my workaround involves setting the JavaScript variable directly in the view ...

Achieving success in element-ui vuejs involves validating the state with the :error parameter

I recently developed an app using Laravel, Vuejs, and Element-ui. Within my form, I have utilized the "error" property to indicate that Laravel validation is in place. <el-form-item label="First Name" prop="firstname" :error="registerForm.errors.get(&a ...

having trouble retrieving information from the input field

I'm having trouble retrieving the user's input from the input field, can someone assist me with this issue? I can't seem to identify what the problem is here. var ftemp = document.getElementById("Farenheit").value; <td> <i ...

Should I refrain from storing user files on my server?

Greetings! I am currently working on an Express js + React js application and using MySQL for database management. I have successfully stored user information like email, hashed passwords, and user IDs in the database. However, now I want to create ...

Get all the classes from the body element of the AJAX-loaded page and update the body classes on the current page with them

I am currently in the process of AJAX-ing a WordPress theme with a persistent music player. In Wordpress, dynamic classes are used on the <body> tag. The structure I'm working with looks like this: <html> <head> </head> ...

"Encountering a connectivity problem with Apollo server's GraphQL

I am facing a networking issue or possibly a bug in GraphQL(Apollo-Server-Express). I have tried various solutions but to no avail. When sending a query, everything seems perfect - values checked and request showing correct content with a 200 status code. ...

Optimizing Wordpress by Efficiently Enqueueing Javascript

As a beginner with a WordPress website, I am aware that in order to execute scripts on a WordPress page, they need to be enqueued in the functions.php file. However, I'm unsure about the correct process for this. The specific JavaScript file I want t ...

Iterate over a JSON document, insert an item, and then store the updated data in a separate

My JSON file contains elements like this: var data=[{ "Name": "Jeff", "Age": 35 }, { "Name": "cliff", "Age": 56 }] I need to include a new field called 'Country'. So the updated structure should be: var data=[{ "Name": "Jef ...

Error: The checkbox was clicked, but an undefined property (includes) cannot be read

Link to live project preview on CodeSandbox Visit the product page with checkbox I have developed a code snippet that allows users to filter products by checking a box labeled "Show Consignment Products Only", displaying only those products with the term ...

Is there a way to reverse the upside-down text generated by OffscreenCanvas.getContext().fillText()?

When using OffscreenCanvas.getContext().fillText() to generate text and then OffscreenCanvas.transferToImageBitmap() to create a map, I noticed that the text appeared flipped upside down when applied as a texture in a threejs project. The image clearly sho ...

Retrieving value from the parent scope using the conventional approach

Today I was puzzled by some unexpected behavior of AngularJS. While using console.log to log $scope, I noticed that there was no key attached to the scope named val1. However, when I used console.log($scope.val1), it returned a value as an object. After ...

During the rendering process, the property "instance" was attempted to be accessed but is not defined

I am having trouble creating a Contact Us page using v-model. My code keeps throwing these errors: Property "inputted_name" was accessed during render but is not defined on instance Property "inputted_email" was accessed during render but is not defined o ...

JavaScript function following AJAX request

I'm attempting to invoke a JavaScript function that is returned in an Ajax call What is the proper way to run a JavaScript function received from an Ajax call? Consider this script before the Ajax call <script> function start(){ console.l ...

Can we incorporate modulo into the loop?

I have a JavaScript function with HTML code inside. I need the ".one-card" div to repeat four times within each ".row" div. The ".row" div is being repeated in a foreach loop. I want to check if the result of modulo (4) is not equal to zero, then display t ...

Leverage jQuery/JS to divide a lone <ul> element into four distinct <ul> lists

I'm working with a dynamically generated single list (<ul>) that can have anywhere between 8 and 25 items (<li>'s). Here's an example of the HTML structure: <ul id="genList"> <li>one</li> <li>two</l ...

Encountering a typescript error while configuring options in an Angular 8 application

When attempting to call a service using REST API with a GET request, I encountered the following error: Argument of type '{ headers: HttpHeaders; responseType: string; }' is not assignable to parameter of type '{ headers?: HttpHeaders | ...

Using Mongoose to calculate and retrieve the total sum of elements within an array

In the following schema, I have defined the structure: let postScheme = new Schema({ title: { type: String, required: true }, body: String, isImage: Boolean, imageUrl: String, icon: String, time: { type: ...

Creating a javascript function to update content on click

Recently, I've been designing a webpage and encountered an issue. I want the text in a specific area to change whenever a user clicks on a link. Below is the code snippet related to the section I want to modify using a JavaScript function. <div id ...