Can three.js provide a feature similar to backface-visibility?

I'm working with an object that has a mesh featuring a semi-transparent png texture.

Is there a specific flag or option within the MeshBasicMaterial that would allow visibility of the back of the object through the front?

Below is some example code to illustrate:

var texture = THREE.ImageUtils.loadTexture('world.png');

// create the sphere's material
var sphereMaterial = new THREE.MeshBasicMaterial({
    map: texture,
    transparent: true,
    blending: THREE.AdditiveAlpha
});

sphereMaterial.depthTest = false;

// set up the sphere vars
var radius = 50, segments = 20, rings = 20;

// create a new mesh with sphere geometry -
var sphere = new THREE.SceneUtils.createMultiMaterialObject(
    new THREE.SphereGeometry(radius, segments, rings),[
    sphereMaterial,
    new THREE.MeshBasicMaterial({
        color: 0xa7f1ff,
        opacity: 0.6,
        wireframe: true
        })
   ]);

The code above successfully renders the sphere, however the back side remains invisible.

Answer №1

A modern approach to achieve this is by utilizing the side attribute of the material.

For instance:

new THREE.MeshPhongMaterial( { map: texture, side: THREE.BackSide } )

Possible choices include THREE.FrontSide, THREE.BackSide, and THREE.DoubleSide.

Refer to: https://github.com/mrdoob/three.js/wiki/Migration

Answer №2

The backface attribute is configured within the mesh:

cube.insideOut = 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

In the conditional statement, document location or window location href will be ineffective in the if clause but will be functional in the else clause

When validating a password in a form, I have encountered an issue where the code only works for one specific outcome. If the correct password is entered, the user should be moved to site X, but if it's incorrect after 3 tries, they should be moved to ...

Struggling to get the Ant design button to launch an external link in a new tab using React and NextJS

I have an Ant button set up like this: <Button style={{ borderRadius: '0.5rem' }} type="default" target="_blank" ...

Unable to establish cookie via frontend React application

I am currently working with a backend node server that offers two APIs, one to set cookies and another to get cookies. Here is the backend code for setting and retrieving cookies: Server : localhost:4001 router.get("/addCartToCookie", function( ...

Saving the content of a div as a PDF

There are several aspects to consider when it comes to this question, but I'm having trouble finding the information I need. Hopefully someone can provide an answer. Essentially, what I want to achieve is: Imagine a div that is 400 X 400 px in size. ...

Change Node.js version to 6.11.5 on a Windows system

My current node version is v8.2.1, but Google Cloud Functions only supports v6.11.5. I need to switch my node version accordingly and preferably do it using npm. How can I achieve this? I have explored How to change to an older version of node.js for guid ...

What is the best way to refresh my useEffect hook when a State change occurs in another component's file in ReactJS?

Seeking to execute an API call within useEffect() and aiming for the useEffect() function to trigger every time new data is appended to the backend. To achieve this, a custom button (AddUserButton.js) has been created to facilitate adding a new user to the ...

Efficient Techniques for Concealing and Revealing Navigation Menus using HTML, CSS, and JavaScript

I need help making the menu icon toggle the navigate menu between showing and hiding when clicked on the top right corner of the screen. For better understanding, here is an accompanying image: https://i.stack.imgur.com/oy6d9.png However, the current co ...

Leveraging the power of Google Charts along with MySQL or

I've been working on this task for several days now and I'm still struggling to achieve the desired outcome. My goal is to dynamically create a column/bar chart using Google Charts, populated with data from my database. Here's my query: SE ...

How can I change the nested Material UI component style from its parent component?

I am currently incorporating a component from an external library into my project. However, I am facing limitations in customizing its style, especially when it comes to a button that is using material ui styles. Upon inspecting the element, I can see that ...

Which shortcuts or techniques in jQuery/JavaScript can I implement to simplify this code further?

I've written a script to handle responsive design for smaller devices and display a toggle menu instead of a full-width menu. The current script works, but I find it messy. How can I make this code more minimalistic and efficient? Is it good practice ...

Tips for showing more rows by clicking an icon within an Angular 2 table

When I click on the plus (+) button in the first column of each row, only one row expands. How can I modify it to expand multiple rows at a time? Thanks in advance. <div> <table class="table table-striped table-bordered"> <thead> ...

Traverse through a series of selected options in an AJAX call to

I am facing a dilemma with a multiple select item, as it allows me to choose and send multiple selected items via an ajax request for importing into my database. The challenge lies in looping through the array received from the POST request. Ajax Request ...

When executing JavaScript code, the file remains unchanged and does not alter the URL

I want my form to check a SQL database upon submission and execute a JavaScript file that captures the data into a constant. However, instead of running the JS script on the page as desired, it redirects to a new URL. Is there a way to ensure that the JS ...

Replacing jQuery.ajax from a different directory/domain - problem with using relative URLs

We are incorporating scripts from various sources and domains, including one that contains the definition for jQuery.ajax function. Calls to jQuery.ajax are being made from different places and domains using relative URLs, such as jQuery.ajax("my/relativ ...

Differences in performance between Angular and JQuery_execution times

I am facing an issue on my dynamically populated Angular page. Angular sends a request to the backend using $http.get to retrieve data which then populates attributes of a controller. For example, when I call $http.get('/_car_data'), the JSON re ...

Learn how to create an endless scrolling effect on a static webpage using only pure JavaScript

Looking to achieve an Infinite Page Scroll Effect similar to Twitter without relying on jQuery or any other library, using pure JavaScript. I'm new to JavaScript and need assistance with implementing this effect in search results displayed within a La ...

Save and showcase an array as individual objects within local storage

I am looking to input data using a specific product ID and save it locally. Upon clicking the button, the data should be stored in the local storage. It is possible for a single product to have multiple filenames associated with it. For the customer, if t ...

Creating a JavaScript interface for an XML API generated by Rails?

Working with a large Ruby on Rails website has been made easier thanks to the REST support in Rails 2. The site's business logic can now be accessed through a consistent XML API. My goal now is to create one or more JavaScript frontends that can inter ...

Eliminating an element from an array based on a single criterion

Here's a question that might seem simple to some: Let's say I have an array like this... var array = [ {id: 1, item: "something", description: "something something"}, {id: 2, item: "something else", description: "something different" ...

What happens when a function returns an undefined value after completing an operation?

When the getObject() function is called, it returns an undefined value. function getObject(a) { return { x : a } } console.log(getObject()); ...