Guide on displaying a Custom 2D shape on both sides using three.js

As a beginner to three.js and 3D programming in general, I recently used three.js to draw a sector. However, I am facing an issue where I can only see the object in one direction but not in the opposite direction. It appears that the same phenomenon is happening in the example provided on the three.js website here. How can I make the object visible in both directions?

var squareShape = new THREE.Shape();
var arc = 1/6*Math.PI
var len = 20
squareShape.moveTo( 0,0 );
squareShape.absarc( 0, 0, 20, 4/3*Math.PI, 5/3*Math.PI, false );
squareShape.moveTo( 0, 0 );
var geometry = new THREE.ExtrudeGeometry( squareShape,  {amount:0.1} );
var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ new THREE.MeshLambertMaterial( { color: 0xff0000 ,opacity: 1.0} ), new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true, transparent: true ,opacity: 1.0} ) ] );
mesh.position.set( 10, 10, 10  );
mesh.rotation.set( Math.PI/2, 0, Math.PI/2 );
scene.add( mesh );

Answer №1

For your specific situation, consider using the following code:

const redMaterial = new THREE.MeshLambertMaterial( { color: 0xff0000, opacity: 1.0, side: THREE.DoubleSide } );

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

Is there a way to retrieve the form name within my directive?

In my code, I am able to retrieve the ngModel name, but now I am looking for a way to also capture the form's name that contains the element with the "validacion" directive. It is crucial for me to programmatically obtain the form's name where t ...

The ng-repeat function is iterating through the array multiple times

Using ng-repeat to bind the same array multiple times. JavaScript : $scope.currentitem = item; $scope.currentitemCategory = $scope.currentitem.category.split(','); console.log($scope.currentitemCategory); HTML: <div ng-repea ...

Ways to attach dynamic methods within a v-for loop

I am currently working on a situation where I need to dynamically assign methods to elements that are being generated by a template using a v-for loop. These methods will be assigned based on the value of a particular variable, specifically the 'btn.m ...

Merge topics together in RxJS like zip

Is it possible to create an observable that combines two subjects in a unique way, different from the zip function? The goal is to combine two subjects so that when both have emitted values, the latest of their values is emitted. Then, after both emit at ...

Methods to retrieve an array's value list dynamically using the 'id' in Vuejs

**User.vue** <template> <div> <div v-for="list in lists" :key="list.id">{{ list.val }} {{ list.kk }}</div> </div> </template> <script> import { datalist } from "./datalist"; export default { name: "User ...

Connect the plotly library to interact with the data in a Vue.js application through

I'm currently working on a project that involves using vue.js and the plot.ly JavaScript graph library. I am trying to figure out how to bind "pts" to the data's "TestSentences" in Vue. Below is my code snippet, thanks to everyone who has provide ...

display different vue component based on screen size

I am in search of a method to implement responsive components in Vue.js (Nuxt). I have developed this mix-in but encountering an error: export const mediaQuery = { data() { return { breakpoints: { sm: 576, md: 768, lg: ...

What is the best way to create a deep clone of an XMLDocument Object using Javascript?

I am currently working on a project that involves parsing an XML file into an XMLDocument object using the browser's implementation of an XML parser, like this: new DOMParser().parseFromString(text,"text/xml"); However, I have encountered a situatio ...

Looking to cycle through arrays containing objects using Vue

Within my array list, each group contains different objects. My goal is to iterate through each group and verify if any object in a list meets a specific condition. Although I attempted to achieve this, my current code falls short of iterating through eve ...

Discover the magic of triggering events that dynamically alter CSS styles

I am trying to implement an eventBus in the App.vue component that allows me to change a modal's CSS based on a payload object. For example, if I pass { type: 'success' }, the border of the modal should turn green, and if I pass { type: &apo ...

Using Vuex to calculate the percentage of values within an array of objects and dynamically updating this value in a component

I'm currently in the process of developing a voting application with Vuex. Within the app, there are buttons for each dog that users can vote for. I have successfully implemented functionality to update the vote count by clicking on the buttons: sto ...

CoffeeScript:: I can't understand why the function body returns when using ajax

Hey there, I'm new to Coffeescript and have a question regarding Ajax. jQuery -> api = getId: -> res = [] $.ajax dataType: "jsonp" url: "http://localhost:3004/videos.json" success: (data) => ...

Tips for maintaining the current route in Vue.js after a page refresh while running the Vue.js project in development mode on a specific port?

In my router.ts file, I have defined two routes: export default new Router({ mode: "history", routes: [ { path: "/", component: require("./components/dashboard/Dashboard.vue")}, { path: "/counter", component: require("./components/ ...

No data is being recorded in the Firestore database

This component in nextjs is designed to write data to a firestore database after the user clicks a button. Unfortunately, Firebase seems to be having trouble writing the data, even though the alert message following the supposed data dump is successful. I ...

Creating a customized SelectField component for Material-UI v1.0.0-alpha.21 with a fix for the Menu anchorEl problem

Currently, Material-UI v1.0.0 does not have a selectField implemented yet so I am attempting to create my own version using TextField, Menu, and MenuItem Components. Below is the code for my custom selectField: export default class SelectField extends Rea ...

Utilizing the 'PUT' update technique within $resource

Hey there, I'm pretty new to Angular and looking for some guidance on how to implement a PUT update using angular $resource. I've been able to figure it out for all 'jobs' and one 'job', but I could use some assistance with in ...

Using Ramda, learn how to transform a flat list into a hierarchical one

Looking to transform the given list into a hierarchical structure with nested children fields. The 'parentId' attribute has been omitted for clarity, as it will be used in the transformation process using Ramda's immutable behavior. const x ...

Converting Persian calendar date to Gregorian in JavaScript

Looking for assistance in converting a date from 1379/10/02 to AD format, specifically to the date 2000/4/29 using the momentJs library. Any help with this task would be greatly appreciated. Thank you! ...

the reason behind the peculiar behavior of angularjs ng-include

I am attempting to utilize an ng-template to iterate through my args in order to create an indented menu content. Unfortunately, I have encountered issues with ng-include not working as expected. I have tried adding a quote but it still does not work. For ...

Is it possible to conditionally call the Apollo Client in my Vue template script?

I have a scenario where I pass a query to the apollo client in my template file using a script tag. However, I want to find a more efficient way to handle this without having to specify the query every time. My idea is to pass a boolean value through a pro ...