Explore the rear of the mapped material using a combination of Three.js and Physijs technology

I am currently working on a project in which I have created a simple cube using Three.js and Physijs. The issue I am facing is related to mapping a texture that contains transparency. I want to be able to see the texture on both sides of the cube through the transparent parts. However, at the moment, I can only see the background through the transparency, not the texture on the back side of the cube.

var cube = new Physijs.BoxMesh( 
    new THREE.BoxGeometry( 2, 2, 2),
    new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('border.png') } ), 
    1 );

The texture I am using can be found here.

The current result I am getting can be seen here.

It seems that although the background shows through the cube's transparent areas, the texture on the rear faces is not visible. Is there a way for me to apply the texture to both sides of each face of the cube, even if it involves the back of a 2D texture?

This venture into Three.js is my first attempt, and I'm aware that there is a lot to learn. I hope that I haven't overlooked any obvious solutions :)

javascriptthree.jsphysijs

Answer №1

Try changing the side property to THREE.DoubleSide:

var material = new THREE.MeshPhongMaterial( {
    map: new THREE.TextureLoader().load( "image.png" ),
    transparent: true,
    side: THREE.DoubleSide // this applies to both sides of the faces
} );

However, keep in mind that the illusion may not be perfect as demonstrated here:

https://i.sstatic.net/T3974.png

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

Bootstrap modal's offset returning blank value

One way to navigate to a specific element within a Bootstrap modal is by checking the offset of that particular element. If there are multiple divs within the modal, each with its own unique id (#row-1, #row-2, etc.), you can open the modal and input the f ...

javascriptjquerytwitter-bootstrapbootstrap-modal

The transformation rotation applied in CSS must not have any impact on the styling of my span and paragraph

Snippet: .details-section{ background-color: rgb(83, 83, 83); height: 200px; } .icon-container{ border: 2px solid #c49b63; width: 90px; height: 90px; transition: 0.5s ease; } .box i{ font-size: 60px; color: black; margin-top: 13px ...

javascripthtmlcssbootstrap-4

Having trouble accessing HikVision Web SDK functions in Angular 17

First and foremost, this concerns the HikVision cameras specifically. Because the SDK is compiled to plain JavaScript (with jQuery included), I had to import the JS files in angular.json and use declare in the component TS file (in this instance, camera.c ...

javascriptangularhikvision

Freeze your browser with an Ajax request to a specific URL

There is a function in my view that transfers a value from a text box to a table on the page. This function updates the URL and calls another function called update_verified_phone(). The update_verified_phone() function uses a model called user_info_model( ...

javascriptphpjqueryajax

Can Node.js Utilize AJAX, and if So, How?

Coming from a background in browser-based JavaScript, I am looking to dive into learning about node.js. From my current understanding, node.js utilizes the V8 engine as its foundation and offers server-side JavaScript capabilities along with pre-installed ...

javascriptajaxnode.js

Achieving repetitive progress bar filling determined by the variable's value

JSFiddle Here's a code snippet for an HTML progress bar that fills up when the "battle" button is clicked. I'm trying to assign a value to a variable so that the progress bar fills up and battles the monster multiple times based on that value. ...

javascriptjquery

How to arrange an array of objects by a property within a nested object using JavaScript?

var originalArray = [ { name: 'Shop1', stock: [ { name: 'Apples', quantity: [{ id: "something", time: 11 }, { id: "something", time: 44 }, { id: "something", time: 53 }] }, ...

javascriptarrayssortingdictionaryecmascript-6

Attempting to Send an Ajax Request and Utilize the Result within a React Component

I am having issues with my tweet box component. I have a submit function that triggers the getAllTweets function when called. The problem is that I am unable to capture the value of the field and pass it on to the getAllTweets function in order to create ...

javascriptajaxnode.jsreactjs

Exploring the ancestry of Mongo

I am currently working on constructing a family tree that can have an infinite number of levels for parents and children. I am also interested in finding relationships like brothers, sisters, cousins, and so on. However, I'm facing some confusion when ...

javascriptmongodb

Leveraging the 'passport.isAuthenticated()' method for evaluating numerous user roles within a Node.js application

Below is the code snippet for my custom isAuthenticated function: var isAuthenticated = function (req, res, next) { if (req.isAuthenticated()) return next(); res.redirect('/'); }; Here's a route that uses PassportJs with the custom isA ...

javascriptnode.jsexpresspassport.jspassport-local

selenium tutorial: Testing tooltip functionality with Python

<div class="icon_png information icon_baggageyes" title="getTooltip()"></div> Here, a tooltip is displayed using the getTooltip() function. Is there a method to retrieve the return value of the function for testing with Selenium? ...

javascriptjavaseleniumselenium-webdriver

Establish an angular scope within the DOM element

I am facing a challenge in creating a new Angular scope and attaching it to a DOM element. The situation is complicated by the fact that I am working on modifying a third-party control and cannot simply use a directive. My approach so far has been: ... = ...

javascriptjqueryangularjsdom

Retrieve information using JavaScript and save it within a PostgreSQL Database table

I have received data from a device in HEX format as shown below: <Buffer 00 cc> My goal is to convert this into TEXT format and store the value in a PostgreSQL database. However, I am encountering an error message while trying to process it for dat ...

javascriptnode.jspostgresqlexpresshex

Using JavaScript, what is the process for getting the value of a child node within Firebase

var ref = firebase.database().ref("games/" + gameId + "/patterns"); ref.on("child_changed", function(snapshot){ var pattern = snapshot.key; console.log(pattern); }); Currently, the code snippet above only logs the key. But how can I extract the player ...

javascriptfirebase-realtime-database

What is the best way to separate a table column into a distinct column at the specified delimiter count?

I successfully wrote code that splits the third column into new columns at the slash delimiter. However, I am struggling to modify it to split at the nth (i.e. 2nd) occurrence. I couldn't find a solution online, so I'm reaching out here for help ...

javascriptjquery

The autofocus feature on the textarea in Angular Material Dialog seems to be malfunctioning

Within a web app, I am utilizing the Dialog component from Angular Material. The Dialog consists of only a textarea that is initially empty. I aim to automatically focus on the textarea when the user opens the modal dialog. How can I achieve this? Despite ...

javascriptangularjsangular-materialmddialog

In AngularJS, modifying the value of a copied variable will result in the corresponding change in the value of the main

I'm facing a peculiar issue. I have an array of objects and I used angular.forEach to update the price key value of each object. However, when I make changes in each object, it also affects the main array object. Take a look at the code snippet below ...

javascriptarraysangularjsforeachreference

Issues with table formatting and malfunctioning functions

I created a basic tic-tac-toe game, but I'm having an issue with the table display. It appears squished when the game loads. Is there a way to prevent this and keep the table empty? Additionally, I am using NotePad++ and encountering problems running ...

javascripthtmlfunctionfirefoxhtml-table

HTML/JS Implementation: Back to Top Visual Element

- This website appears to be quite simple at first glance. However, I have encountered an issue where every time I scroll down and then click on the "About" menu option, it abruptly takes me back to the top of the page before displaying the section with a ...

javascriptjqueryhtmlcss

Page Not Found: React and Express Route Not Found

I encountered an error while attempting to use the sign-up route: POST http://localhost:3001/sign-up 404 (Not Found). I searched for similar issues on StackOverflow but couldn't pinpoint the source of my problem... In the frontend, I am fetching the ...

javascriptnode.jsreactjsexpress