The creation of transparent objects in THREE.js allows for a dynamic display of overlaid objects in the

Greetings,

I am interested in creating a three.js room where the walls behind which objects are located (from the perspective of the camera) will become transparent with 50% opacity as I rotate the room.

Allow me to elaborate:

Visualize a scenario where there is a room with walls. Inside this room, various furniture pieces are placed. The camera is positioned to view the room and I aim to make the walls transparent only when they have other objects behind them from the camera's point of view (enabling visibility through the walls). Walls that are obscured by other elements should stay opaque. This setup ensures that no matter how the camera moves or looks at the room, all elements remain visible without any obstructions. https://i.sstatic.net/4N9kV.jpg

javascriptthree.js

Answer №1

Without providing too many specifics on how the camera movements are being executed, it is actually quite simple to accomplish. Every mesh contains a material attribute that includes an opacity setting.

If you take a look at this demonstration on jsFiddle - http://jsfiddle.net/Komsomol/xu2mjwdk/

I incorporated the entire OrbitControls.js library and inserted a boolean value;

var doneMoving = false;

This variable was included in both the mouseup and mousedown events of the OrbitControls, specifically to track when there is no movement of the camera occurring.

It's important to define specific options within the renderer and object:

renderer = new THREE.WebGLRenderer({
    alpha:true,
    transparent: true
});

As for the object:

torusMat = new THREE.MeshPhongMaterial();
torusMat.needsUpdate = true;
torusMat.transparent = true;

Lastly, integrate some control logic into the Animate function to trigger any desired alterations. 

if(doneMoving){
   torusMat.opacity = 0.5;
} else {
    torusMat.opacity = 1;
}

That should provide a comprehensive guide on implementation.

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

Call getElementById upon the successful completion of an AJAX request

In the process of constructing a mini quiz, I am utilizing a variable quizScore to store the score. Each question in the quiz is displayed using AJAX. An individual AJAX call captures the ID of the button pressed (for example, on question 2, the button ID ...

javascriptajax

Tracking the number of form submissions on a PHP website

I am looking to add a counter feature to my website where every time a form is submitted, the count increases for all visitors. The starting number will be 0 and each form submission will increment the count. While I can manage the count using JS/jQuery w ...

javascriptphpjqueryformscounter

Adding ngChange programmatically in Angular without using attributes is a common challenge faced

I am attempting to replicate the functionality of the ng-change attribute within a directive without making changes to the HTML (thus excluding the use of the ng-change property). After examining the Angular source code for the ngChange directive, I have ...

javascriptangularjsangularjs-directiveangular-ngmodelangularjs-ng-change

A step-by-step guide on importing a gltf model into Three.js

Recently, I decided to experiment with the gltf format for rendering models in Three.js. To convert my model from Collada to GlTF, I've been using this converter tool available at . The output is a *.gltf file, but the examples in Three.js typically u ...

three.jsgltf

The use of dangerouslySetInnerHTML in a React application is causing issues when trying to include Segment.io tags

Currently, I'm integrating Segment.io into my react/NextJS application. I'm mimicking the pattern established by a previous function that deals with Google Analytics const segmentWriteKey = 'xyz'; export default class CustomDocument ...

javascriptreactjsnext.js

Express req.files returns null when using jQuery FormData

For client side functionality, I am utilizing Bootstrap and jQuery. On the server side, my technology stack includes node.js and express. The form structure is displayed below: <form id="signupform" action=""> <h2&g ...

javascriptjquerynode.jsformsexpress

What is the best way to obtain root access and utilize disk usage (du) within the main process of Electron?

In the process of developing a macOS application with the help of Electron, I encountered an issue. Attempting to execute the following command from the main process using ipcMain and NodeJS's exec: // Navigating to a directory and utilizing disk us ...

javascriptnode.jsmacosunixelectron

Guidelines for setting the Id and value for a Hidden field

I am working with a gridview that has a few rows and columns, each containing ListBox Controls. Markup: <asp:GridView ID="gvDataEntry" runat="server" AutoGenerateColumns="False" <Columns> <ItemTemplate> <asp:ListBox ID="lst ...

javascriptc#jqueryasp.netlistbox

Tips for dynamically coloring table cells in Spotfire based on their values

Creating Dynamic Table with HTML After successfully creating a cross table in Spotfire, I now aim to replicate the same table in HTML within a text area. I managed to add values using calculated values, but I'm stuck on how to dynamically set the bac ...

javascripthtmltextareaspotfire

Tips for implementing filters in Angular2 without using the package field in the console

I am currently experiencing an issue with a filter field in my code. The filter works fine when all the package data is present, however, some items do not have a package field. As a result, I need to filter based on the package name but I am encountering ...

javascriptangulartypescriptfilter

Localizing strings that are not saved in a database

Our web app will soon support multiple languages, a new feature we are excited to roll out! Currently, we utilize Handlebars for front-end templating and Node + Jade for back-end templating. As we prepare to implement language support, we're conside ...

javascriptnode.jslocalizationpughandlebars.js

"react commands" are not recognized as an internal or external command by any program or batch file

Initially, everything was working smoothly until I decided to download some updates from the git repository. However, upon execution, I encountered an error message stating that "react scripts" are not recognized as an internal or external command, operabl ...

javascriptreactjsnpm

Fetching data from a database for Vue.js using the Summernote editor

I previously inquired about integrating summernote with vue.js and received a helpful response here. It worked seamlessly with v-model binding. However, I encountered an issue when attempting to load data from the database for an edit page. The data was n ...

javascriptvue.jsvuejs2

Issues with integrating chart.js in Laravel 7: Element #app not found?

Currently, I am utilizing chart.js to display the statistics of reviews and messages for a user. However, I have encountered issues with the scripts. While the stats are functioning correctly, an error message stating Cannot find element: #app is appearing ...

javascriptlaravelvue.jschart.js

The "npm start" command encountered an issue: script "start" is

I'm encountering an issue when attempting to run my node application using the npm start command in Visual Studio Code. Any assistance would be greatly appreciated! Here is the content of my package.json file: { "name": "bloggin-site ...

javascriptnode.jsnpm

Transform the ISO 8601 date format into another ISO 8601 format with the help of MomentJS

Can a date format like the following: 2003-09-25T14:00:00.000+1000 or 2003-09-25T14:00:00.000+1100 Be converted to this format? 2003-09-25T14:00:00.000Z Using only MomentJS without any manual intervention. Additionally, I would like to understa ...

javascriptmomentjsiso8601

What is the best way to send a 102 Processing status code in Express?

I'm in the process of configuring a new HTTP server to run a lengthy command and return the output of that shell command back to the client. Currently, I am using Express v4.17.1. However, requests from clients are consistently timing out when runnin ...

javascriptnode.jsexpress

Putting retrieved data from firebase into an array using Angular and Firebase format

Hey everyone, I'm currently facing an issue with formatting my Firebase data into an array. Below is the service where I am retrieving data from Firebase: File name: subcategory.service.ts export class SubcategoryService { subcategoryRef: Angula ...

javascriptarraysangularjsfirebase-realtime-databasejavascript-objects

Scrolling to an element is not possible when it has both position absolute and overflow-x hidden properties

My issue involves animating ng-view with a slideup animation, requiring absolute positioning of elements and overflow-x: hidden to clip the content. However, I need to use the scrollTo element functionality on one sub-page, which doesn't work when bot ...

javascriptcssangularjs

Is it possible to adjust the maximum time limit for uploaded video files in Vue?

I'm facing an issue while trying to dynamically change the maximum value of a time input field in Vue JavaScript after uploading a video file. Despite setting the attribute `max` on the input element using JavaScript, I am unable to update the max val ...

javascripthtmllaravelvue.js