A wireframe in three.js displaying shapes with invisible edges as dashed lines

I'm undertaking a project to develop a specific type of 3D object using three.js. My goal is to have a cube displayed in wireframe mode with only the edges visible. However, I would like the edges that are positioned behind the cube to appear dashed. Here's an example for better clarification:

I am uncertain whether this can be achieved using three.js or if it would be more suitable to work directly with webgl. Should I utilize THREE.Mesh in wireframe form or consider employing THREE.Line along with LineDashedMaterial, or perhaps even combining both approaches?

javascriptthree.jswebgl

Answer №1

I successfully accomplished the task. To achieve this, you must create three distinct objects.

First object: a solid 3D representation with its faces highlighted (not the edges).

Second object: all edges included but displayed as solid lines (not dashed).

Third object: all edges present but shown as regular lines (not dashed).

For the first object, apply the material settings as follows: 

color: false, side: THREE.DoubleSide, depthTest: true
.

Configure the second object's material using: 

color: (any color of your choice), depthTest: false
.

To style the third object, utilize: 

color: (any color of your choice), depthTest: true
.

All materials should also have 

polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 1
to eliminate z-fighting issues.

Answer №2

What a brilliant concept! I've successfully integrated your solution exactly as outlined on this site:

http://example.com/dashed-3d-model

For those interested in witnessing it firsthand.

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

Using observables rather than promises with async/await

I have a function that returns a promise and utilizes the async/await feature within a loop. async getFilteredGuaranteesByPermissions(): Promise<GuaranteesMetaData[]> { const result = []; for (const guarantees of this.guaranteesMetaData) { ...

javascriptangularrxjs

Controlling data tables with knockout.js

I have successfully integrated an API in knockout.js, but I am facing an issue with displaying the amount based on accounting principles. My table definition includes columns for id, name, debit, credit, and amount. Since not all amounts fall under debit o ...

javascriptasp.netknockout.jsasp.net-mvc-5

Utilizing the this.setState function within a callback

In my current project, I've encountered an issue with setting the state in a Twitter timeline react component. The code snippet causing trouble is as follows: componentWillMount: function() { twitter.get('statuses/user_timeline', ...

javascriptcallbackreactjsthis

I'm facing an issue where the data I retrieved is not displaying properly in my template within nuxt 3

After fetching data from an api, I can see it logged in my async function. However, the data stored in my array is not rendering on my template in Nuxt 3 The script setup includes: //ARRAY OF ALL THE DAILY WEATHER DATA PER DAY let allDataWeather=[]; ( ...

javascriptarraysvue.jsnuxt.jsnuxtjs3

What is the reason that preventDefault fails but return false succeeds in stopping the default behavior

I'm having trouble with my preventDefault code not working as expected. While using return false seems to work fine, I've heard that it's not the best practice. Any ideas why this might be happening? if ($('.signup').length == 0) ...

javascripthtmlajaxjquery

Creating SVG paths using coordinates for THREE.js

I copied the exact code from this ThreeJs Example designed for generating a three-dimensional City Model. I've created an SVG path outlining city boundaries using Google Maps and now I'm trying to use the above code to create a similar 3D object ...

javascriptcsssvgthree.js

Steps for importing a React component as an embedded SVG image

I have developed a SVG component in React by converting an SVG file to a React component using the svg-to-react cli tool. In order to load and display additional svg files within this component, I am utilizing the SVG image tag as demonstrated below. This ...

javascriptreactjssvg

Issue: Adjustment of elements' size using an "onclick" method when reaching specific screen width

Seeking assistance with implementing media queries in JavaScript. Can an object be resized from JavaScript code based on a specific screen width, rather than the default one? For example, if I have a button that opens a div with a height of 600px when cli ...

javascripthtmlmpmediaquery

list of current items on the sidebar that are currently being

Hey everyone, I could use some assistance with customizing my sidebar design. I am trying to implement an active state in my sidebar using JavaScript. I attempted to utilize the element.css() method to apply styles when an element is clicked. However, I no ...

javascriptjquerycss

Combine several JSON files into a single file

After spending countless hours searching on Google, I finally gathered the courage to ask my question here. I have several json files. localhost/feed01.json localhost/feed02.json localhost/feed03.json All of the json file structures are similar to this ...

javascriptjsonbackbone.js

Using async/await in React to retrieve data after a form submission

I am currently facing an issue with displaying data fetched from an API on the screen. My goal is to retrieve data when a user types something in a form and clicks the submit button. The error message I am encountering is: TypeError: Cannot read propert ...

javascriptreactjsasync-await

Continuing the process of uploading the file

In my development of a single page application that allows users to upload photos, I have encountered a dilemma. What happens if a user is uploading multiple photos and then closes the browser? When they log back in, I want the browser to automatically c ...

javascriptangularreactjsfile-upload

Can a form be submitted to two different pages based on the button name?

I have a form that directs to another page and performs various database operations. <form id="form1" method="post" action="goes_to_page1.php" onsubmit="return checkformvalidation();"> <input type="text" id="field1" name="field1" onblur="checkva ...

javascriptphphtmlbutton

Incorporate visual elements such as images that resemble checkboxes

I'm searching for an innovative approach to replace the traditional checkbox, incorporating images instead. My idea is to have users click on an image, which will then fade out and reveal a tick box overlay. My inspiration comes from Recaptcha 2, whe ...

javascriptjquerycsshtml

What is the process of implementing session storage in an AngularJS directive?

I am trying to save values in Angular session storage within an Angular directive, but I am facing an issue where I only receive NULL. Can anyone provide assistance? app.directive('myDirective', function (httpPostFactory) { return { restrict ...

javascriptangularjs

Avoiding conflicts among jquery prototype/plugin methods

Imagine I have a primary JavaScript file on my website that includes the following code: $.fn.extend({ break: function(){ // Add your custom code here }, cut: function(){ // More code here }, // ...and many other methods }); When using t ...

javascriptjqueryjquery-pluginsconflicting-libraries

Using PHP, create a redirect page that utilizes AJAX and jQuery for a seamless user experience

My goal is to navigate from page a to the profile page with a post session in between. Let's assume that the data is stored in a variable called $name as a string. The current code on page a looks like this: jQuery("#result").on("click",function(e){ ...

javascriptphpjqueryajax

Creating dynamic styles with Material-UI's useStyles

Attempting to implement the same logic using material-ui's useStyle feature <div className={'container ' + (state.unlocked ? 'containerUnlocked' : '')}> I thought it might look like this: <div className={`${clas ...

javascriptcssreactjsmaterial-ui

Tips on resolving the Warning message: "The event handler property `onExited` is a known property in StatusSnackbar component, but it will

When using the StatusSnackbar component, I encountered a warning about a known event handler property onExited. How can I resolve this issue? Component: import Snackbar from '@material-ui/core/Snackbar' import { withStyles } from '@material ...

javascriptreactjsmaterial-ui

Which javascript alternative most closely mimics the features of html5 form validation?

I just finished creating a form validation app using html5 for client side validation. Now, I am searching for a javascript implementation that can replicate this functionality in older browsers. The key qualities I am looking for include: Replicating t ...

javascriptjqueryhtmlpolyfills