Create a translucent object with three.js

Currently, I am experimenting with three.js and have been following various tutorials to create a script that loads an object from an obj file. The script also adds a texture to the object and provides interactive features such as camera control and collision detection when the cursor interacts with the object on the screen.

While I know how to change the transparency of the entire object, I am now seeking a way to make the loaded object partially transparent based on the cursor's position. I am looking to increase the transparency of triangles near the collision point where the cursor intersects the object. This will allow me to see objects inside or behind the loaded object. Is there a method to achieve this effect? Perhaps someone can recommend a tutorial that demonstrates how to implement this in three.js?

I would greatly appreciate any help or guidance on this matter.

Answer №1

You can create a personalized vertex shader for this task by assigning a transparent attribute to each vertex. With the movement of the mouse, identify the intersecting face and adjust the transparent value of the face's vertices.

http://jsfiddle.net/meirm/58w9cfb0/

In the provided example, a simple shader with an opacity attribute per pixel was implemented. During the intersection testing, the opacity of the vertices of the intersected face is altered.

attribute float opacity;

...

attributes.opacity.value[intersects[0].face.a] = 0.5;
attributes.opacity.value[intersects[0].face.a] = 0.5;
attributes.opacity.value[intersects[0].face.a] = 0.5;

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

The Jade variable assignment variable is altered by the Ajax result

Seeking a solution to update a Jade variable assigned with the results of an ajax post in order for the page's Jade loop to utilize the new data without re-rendering the entire page. route.js router.post('/initial', function(req, res) { ...

Tips for eliminating repetitive code in JavaScript

I have a jQuery function that deals with elements containing a prefix 'receive' in their class or ID names. Now, I need to duplicate this function for elements with the prefix 'send'. Currently, it looks like this: function onSelectAddr ...

Organize my JavaScript code by implementing a function

I have repetitive javascript code that I would like to refactor into a function. Is there a way to streamline this process and make the code more efficient? The two functions I want to consolidate are: bright() $(VARIABLE).find('.info').fadeTo ...

Troubleshooting Google Charts, AJAX, and PHP: Issue with JSON encoding leading to error message "Data for arrayToDataTable is not

My current project involves using PHP/PDO/MSSQL to pass data from a database to a Google Chart via AJAX in .js. I'm encountering an issue that seems to be related to encoding. I've been following a tutorial at which hardcodes the data into the ...

Unable to fetch Twitter data using AJAX

Currently, I'm working on a web page that aims to display tweets from a specific city based on a user's search topic. The Twitter request is being sent successfully, with a response code of 200, and the response data is visible in the Chrome deve ...

Adjust the size of a stacked object on top of another object in real-time

Currently, I am working on a project using three.js where users have the ability to modify the dimensions of a 3D model dynamically. The issue I'm encountering is similar to a problem I previously posted about stacking cubes together, which you can fi ...

The equivalent of e.preventDefault() in Java (for Android) is to replace the typed text

I am working on a jQuery/JavaScript function that will replace any text typed in an input field with a specific text. Here is the code snippet: $('input').on('keydown', function(e){ e.preventDefault(); count++; if (count == ...

The 'SVGResize' or 'onresize' property is not available on the 'SVGProps<SVGSVGElement>' type

Using React with SVG I'm facing an issue with handling the resizing event of an svg element. I have looked into using the SVGResize and onresize events, but encountered compilation errors when trying to implement them: const msg1 = (e: any) => co ...

Sequential invocations to console.log yield varying outcomes

So, I'm feeling a bit perplexed by this situation. (and maybe I'm missing something obvious but...) I have 2 consecutive calls to console.log. There is nothing else between them console.log($state); console.log($state.current); and here's ...

Tactile interactions on iPhone

My goal is to create an off-canvas menu that can be opened with touch events in a systematic way. It functions perfectly in my browser when I click and drag on the body to reveal the menu. However, it encounters a problem on the iPhone. The error message ...

What could be causing the malfunction in my 'sort' function? I have thoroughly checked for errors but I am unable to locate any

Exploring the world of JavaScript objects to enhance my understanding of functions and object manipulation. I have created a program that constructs an Array of Objects, each representing a person's 'firstName', 'middleName', and & ...

XMLHttpRequest problem: receiving status code 0 from both local and live server

I'm struggling to make this XMLHttpRequest work correctly. This is my first time using AJAX, so I'm not sure if I've formatted everything properly. I've searched all over the internet and found similar information and examples, but cert ...

Is it achievable to animate the offset with React Native Animated?

I am attempting to develop a dynamic drag and drop functionality, inspired by this example: My goal is to modify it so that when the user initiates the touch, the object moves upwards to prevent it from being obscured by their finger. I envision this move ...

The RxJs Observer connected to a websocket only triggers for a single subscriber

Currently, I am encapsulating a websocket within an RxJS observable in the following manner: this.wsObserver = Observable.create(observer=>{ this.websocket.onmessage = (evt) => { console.info("ws.onmessage: " + evt); ...

Is there a way I can modify the display setting to show 4 slides per view?

var swiper = new Swiper(".new-arrival", { slidesPerView: 4, centeredSlides: false, spaceBetween: 30, autoplay: { delay: 5500, disableOnInteraction: false, }, pagination: { el: ".swiper-pagination", type: &qu ...

A guide on organizing nested JSON objects in JavaScript

I am currently using JavaScript to retrieve JSON data that looks like this: [{ "data": { "serialNumber": "12345678", "loopCount": 2, "temperature3": 22.74921781259558, "temperature2": 21.459065450414467, "temper ...

How can you make the table rows in jQuery scroll automatically while keeping the table header fixed in

Many solutions exist for making the header fixed and the table scrollable using code samples or plugins. However, my specific goal is to have the table data rows scroll automatically once they are loaded while keeping the header fixed in place. Is there a ...

As I embarked on my journey into node.js, I encountered some stumbling blocks in the form of errors - specifically, "Uncaught ReferenceError: module is not defined"

Embarking on my Node.js journey, I am delving into the world of modules. After ensuring that both node and npm are correctly installed, I will share the code below to provide insight into the issue at hand. Within my project, I have two JavaScript files - ...

What could be causing the issue with Google Chart in my ASP MVC app?

My controller has a method that returns Json data. [HttpPost] public JsonResult CompanyChart() { var data = db.adusers; var selectUsers = from s in data where (s.Company != null) select s; int f ...

JS/Apps Script: Passing object and its keys as function parameters

When working with Google Apps Script, I have a specific task that involves looping through data and writing only certain keys to a sheet. I want this looping operation to be done in a separate function rather than directly in the main function, as it will ...