Is there a way to assign a texture to only one side of a plane while having a color on the opposite side?

I'm currently experimenting with creating a plane in three.js where one side is a texture and the other side is a solid color. My initial attempt looked like this:

var material = new THREE.MeshBasicMaterial({color: 0xff0000, side: THREE.FrontSide, map: texture});
var geometry = new THREE.PlaneGeometry(width, height);
plane = new THREE.Mesh(geometry, material);

Unfortunately, this resulted in a plane where only one side displayed the texture while the other side was completely transparent. I then tried:

var material = new THREE.MeshBasicMaterial({color: 0xff0000});

However, this approach ended up giving both sides the same color. Is it possible to achieve a setup where one side shows a texture while the other displays a different color?

javascriptthree.js3d

Answer №1

If you're looking to create a mesh with different materials on the front and back, here's a simple pattern you can follow:

const group = new THREE.Group();

scene.add(group);

group.add(new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ map: texture })));

group.add(new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.BackSide })));

Alternatively, you could create your own custom ShaderMaterial, but this method is easier if you're new to three.js.

Version used: three.js r.104

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

Uncover the content of a base64 encoded string and convert it into

A JSON response has been linked on the user's request to retrieve an excel document. The structure of the response is as follows: { "format": // file extn ----only xls "docTitle": //file name "document" :// base 64 encoded data } The attem ...

javascriptangulartypescript

Can D3 transform regions into drinking establishments?

I can create a graph using D3 areas, as shown in this example: https://i.sstatic.net/jaxJb.png Now, I want to add an animation to this graph. When the webpage loads, the initial figure will be displayed. Then, each area will morph into a bar chart. Addit ...

javascriptd3.js

Determine if the browser displays <select multiple> as a modal dialog

Is it possible to use JavaScript to detect whether a specific browser displays a focused <select multiple> element as a popup or strictly as an inline box? On certain platforms, like the Android Browser and iOS Safari, the appearance of a popup can ...

javascripthtmlselectcross-browserbrowser-feature-detection

The Node.js controller is in disarray

As a newcomer to javascript, node.js, and backend development in general, I am tackling the task of creating a controller for handling login page requests. My confusion lies in extracting data from a MYSQL table, user authentication, and working with the J ...

javascriptnode.jsexpressbackend

Form a bond with the latest SignalR library to initiate communication

After attempting to connect to an asp.net core signalR server using the code below, I encountered some issues. Can you spot where I might have gone wrong? Here is the error message that I received: Error: The "promise" option must be a Promise v ...

javascriptjquerykendo-gridasp.net-core-signalr

Tips for binding to a single input box within an ngFor loop

Can anyone lend a hand with some code? I'm working on a straightforward table using ngFor, but I'm facing an issue with input binding. The problem is that all the input fields generated by ngFor display the same value when typing. How can I preve ...

javascriptangulartypescriptionic-framework

Using Ajax with Angular services

Recently, I decided to explore Angular JS and Async calls as an alternative to $JQuery. However, I encountered a peculiar issue while making ajax calls. To adhere to 'best practices', I shifted my ajax requests to a service and then initiated th ...

javascriptangularjsajax

Trying to retrieve JSON data from an API in VueJS and successfully logging the results, but struggling to render the data on the page. (I

Having recently transitioned from React to VueJs, I encountered a problem where fetching data using axios.get returns a successful response in the console.log. However, when trying to iterate through the array with v-for, nothing is rendered. If you have a ...

javascriptvue.jsfrontend

Avoid duplicate submissions while still enforcing mandatory fields

Let's start with a basic form that only asks for an email address: <form action="NextPage.php" method="post"> <input type="email" name="contact[email]" required id="frmEmailA" autocomplete="email"> <button type="submit">Subm ...

javascripthtml

Loop through the JSON data and dynamically display corresponding HTML code based on the data

I've developed a survey application using React, where I initially wrote code for each question to display radio buttons/inputs for answers. However, as the survey grew with multiple questions, this approach resulted in lengthy and repetitive code. To ...

javascriptreactjsjson

JavaScript library that provides SQL-like functionality for easily manipulating arrays

After successfully parsing a csv file into an array of objects, I find myself in need of making multiple alterations to that array. Currently, I am utilizing lodash methods for this task, but I am finding it to be quite verbose. I am considering working wi ...

sqljavascript

Explore RxJs DistinctUntilChanged for Deep Object Comparison

I have a scenario where I need to avoid redundant computations if the subscription emits the same object. this.stateObject$ .pipe(distinctUntilChanged((obj1, obj2) => JSON.stringify({ obj: obj1 }) === JSON.stringify({ obj: obj2 }))) .subscribe(obj =& ...

javascriptangulartypescriptrxjs

How is it possible that the SetTimeout code continues to run even after calling clearTimeout

I have this code snippet within my react component: //some code var timeout = null; //global variable //some more code useEffect(() => { if(...some condition) { console.log('test1'); timeout = setTimeout(() => { ...

javascriptreactjs

I'm having trouble with my useState in React/NEXTjs because it's not adding onto the result of a socket.io event from the server, it's simply

Frameworks used: Next.js, Socket.io, React I am currently working on a straightforward messaging application. The main concept involves emitting a message typed by a user, sending that message to the server, and then broadcasting it back to all clients th ...

javascriptreactjswebsocketsocket.ionext.js

Execute the getJSON calls in a loop for a count exceeding 100, and trigger another function once all

In order to process a large grid of data, I need to read it and then make a call to a $getJSON URL. This grid can contain over 100 lines of data. The $getJSON function returns a list of values separated by commas, which I add to an array. After the loop fi ...

javascriptjquery

What are some techniques for breaking down or streamlining typescript code structures?

Within my TypeScript class, I have a skip function. In the interface, I've specified that the data is coming from the backend. Now, on the frontend, I want to be able to rename the backend variables as demonstrated below. There are multiple variables ...

javascriptangulartypescriptdestructuring

Utilize Jade to showcase information within an input field

I'm still learning Jade and am trying to showcase some data as the value in a text input. For example: input(type="text", name="date", value="THISRIGHTHURR") However, I specifically want the value to be set to viewpost.date. I have attempted various ...

javascriptnode.jsexpresspug

Using " " to split a name into two lines is not being recognized

My issue involves the display of tab names in two lines within multiple tabs. You can view the demonstration here. I attempted to use the \n character while setting the tab name but it was not recognized. Any suggestions on how to achieve this? Here ...

javascripthtml

Can we display an express view in response to a WebSocket event?

My goal is to display an express view within a websocket event as shown below: socket.on('name', function () { //prompt the client to render a specific express view }); ...

javascriptnode.jsexpresssocket.io

Utilize the PHP variable HTTP_USER_AGENT to identify and analyze the user's browser

As I embark on creating a webpage, my goal is to have it display different content based on the user's browser. The SERVER [HTTP_USER_AGENT] variable initially seemed promising for this purpose, but upon inspecting the page in Chrome, I encountered: ...

javascriptphphtmlinternet-explorerbrowser