`How can textures be added to the front and back of a shape in Three.js geometry?`

I'm currently working on creating a flat shape geometry with rounded corners. Below is a snippet of the code I have so far:

    var geometry = new THREE.ShapeGeometry(shape);
    var front_material = new THREE.MeshPhongMaterial({ map: frontTexture, side: THREE.FrontSide });
    var back_material = new THREE.MeshPhongMaterial({ map: backTexture, side: THREE.BackSide });
    var materials = [front_material, back_material];
    mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));

The issue I am facing is that this code only loads the front side and renders the back side invisible. Despite hours of searching online, I haven't been able to find a solution for adding materialIndex in the current version of Three.js (r78).

I believe that including material index could potentially solve this problem.

javascriptthree.jstexture-mapping

Answer №1

To achieve a flat shape with different materials on the front and back, you can follow this code pattern:

var geometry = new THREE.ShapeGeometry( shape );

var frontMaterial = new THREE.MeshPhongMaterial( { map: frontTexture, side: THREE.FrontSide } );
var backMaterial = new THREE.MeshPhongMaterial( { map: backTexture, side: THREE.BackSide } );

var materials = [ frontMaterial, backMaterial ];

var object = THREE.SceneUtils.createMultiMaterialObject( geometry, materials );

scene.add( object );

Take a closer look at the source code of SceneUtils to grasp its functionality.

This implementation is based on three.js version r.78.

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

Utilizing JQuery Ajax to Retrieve Conversion Explanations

In my project, I have a set of AJAX wrapper functions that I use to make AJAX requests. I am now considering switching to using the Fetch API instead. As a newcomer to this transition, I have some questions and concerns that I think will be beneficial for ...

javascriptjqueryajaxfetch

Parse the HTML document using an HTTP request to access the Document Object Model (DOM)

I am facing an issue with accessing elements of an HTML page through JavaScript. I have tried different methods, but I keep getting the error message: CORS header "Access-Control-Allow-Origin" missing. Here is the code snippet I tried: <!DOCTYPE html&g ...

javascriptajaxapirestxmlhttprequest

Is there a way to retrieve the input element's value within the controller using ng-if?

After clicking on the submit button, I want the ng-if condition to activate in the DOM so that I can access the properties of the input element or apply a class to it. <div ng-app="myModule"> <div ng-controller="myController"> <div ng-if ...

javascriptangularjs

Managing timeout in nodejs requestsDoes this work for you?

Currently, I am facing an issue while making a request to a server with a set timeout. I need to handle both the timeout event and the 'abort' event separately, but my current implementation involves using a quick fix which doesn't seem idea ...

javascriptnode.jsrequesttimeout

Are we looking at a declaration of an arrow function? Is this concept even real?

I have been exploring the concept of function expressions versus function declarations with arrow functions. From my understanding, this is an example of an arrow function expression: const fred = greeting = () => { console.log("Hello from arrow ...

javascriptarrow-functionsfunction-expression

Use a personalized CSS class with the Kendo Dropdown Widget

Is there a way to assign a custom CSS class to the dropdown HTML container that is created when using the .kendoDropDownList() method on a <select> or <input> element? In this fiddle ( http://jsfiddle.net/lav911/n9V4N/ ) you can see the releva ...

javascriptjquerycsskendo-uikendo-dropdown

Change the location of an html td element with JavaScript

I am currently working on a simple JavaScript car racing game where the cars are represented by HTML table elements. I want to implement functionality where pressing the "e" key moves player one's car and the "d" key moves player two's car. This ...

javascripthtmlcss

Is there a way to transform a regular CommonJS declaration into an ECMAScript import when it is making multiple requires in a single line?

As a beginner in JavaScript, I am interested in converting this line into an import statement: var sass = require('gulp-sass')(require('sass')); I have successfully converted the other requires into imports but I'm struggling wit ...

javascriptcommonjs

Utilizing URIs as identifiers for GUI components in react.JS

I am looking to develop a front end using React.js where I can pass URI as name/id properties to GUI components. My goal is to then map these URI keys to corresponding values. When the web page is requested, it should display the mapped value. <input t ...

javascriptreactjs

Having trouble with triggering a Material UI modal from a Material UI AppBar on a Next.js page

As a newcomer to the world of React.js and Next.js, I am encountering difficulties when trying to open a Material UI modal from a Material UI AppBar within a Next.js page. Most of the code I have implemented here is directly copied from the Material UI we ...

javascriptreactjsnext.jsreact-hooks

Exploring the implementation of if statements within the array map function in the context of Next.js

Is there a way to wrap certain code based on the remainder of the index number being 0? I attempted the following approaches but encountered syntax errors. {index % 3 === 0 ? ... : ...} {index % 3 === 0 && ...} export default function UserPosts() { / ...

javascriptreactjsnext.jsjsxconditional-operator

Display various components using a dropdown selection

I am seeking guidance on how to display different components based on the selected option. I am unsure of how to write the code for displaying either component one or two. Can you provide any examples or references that may help? <template> <div ...

javascriptvue.jsselectvuejs2vue-component

How to Link an Object's Value to a Checkbox in Vue

My goal is to populate the array selectedParks with the value of each item. However, I am facing an issue where the value is always set to the string "item" instead of the actual value of the Park Object. Here is the code snippet: <ul class="list- ...

javascriptvue.js

Attempting to remove options in a Multiple Choice scenario by selecting the X icon beside each one

I'm working on a multiple choice quiz and I'd like to add a button or icon resembling X in front of each option (even in front of the radio button), so that when I click on it, only that specific option is deleted. How can I achieve this? For in ...

javascripthtmlcssbutton

Encountering a Next.js prerendering issue when using getStaticPaths

I am currently developing a Next.js application. Here is the structure of my files: cpanearme -components -listitem.js -pages -home -index.js -firm -[id].js Below is the code for a list item that redirects to the dynamic rout ...

javascriptnext.js

Best method for removing CrosshairMove event listener in lightweight charts

As per the documentation, using unsubscribeCrosshairMove allows us to remove a handler that was previously added with subscribeCrosshairMove. Our objective is to use unsubscribe... to eliminate previous handlers before re-subscribing with subscribe... af ...

javascriptlightweight-charts

The functionality of the Vue.js single file component is not performing as anticipated

Recently, I've been experimenting with Vue and Vue CLI. I came across this amazing vue-tabs-component that I would like to try out. Here is a snippet of my code from App.vue: <template> <div> <tabs> <tab name="Fir ...

javascriptvue.jsvuejs2

Exploring ways to retrieve information stored in localStorage within an android mobile application

I am currently developing an Android App using phonegap. The app is a simple game that generates random numbers for math problems. If the user answers correctly, their score increases, but if they lose, their name and current score are saved in localStor ...

javascriptandroidhtmlphonegap

Updating style in Javascript can sometimes be a bit tricky

What's preventing this from working? localStorage.fontSize contains the correct value, but the initial document.body.style.fontSize = localStorage.fontSize + "pt"; doesn't update the style. <script type="text/javascript> if(!localStorage. ...

javascripthtmlcss

What are the best practices for formatting a .js file using JavaScript and jQuery?

I've recently started incorporating JavaScript and jQuery into my website, but I'm encountering issues with formatting the code. Each section of code works fine independently, but when I combine them into a single .js document, the slideshow part ...

javascriptjquery