How can Geometry Segments be displayed/modified in Three.js?

I am working with a simple TRHEE.BoxGeometry within a THREE.Scene. My goal is to display the outline of the Geometry Segments rather than the Mesh itself.

Although I came across an example demonstrating this, I am struggling to replicate it successfully.

The reference example looks similar to the image shown below:

How can I show segment outlines and dynamically update the geometry during runtime?

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

Answer №1

To duplicate a mesh, you can use the geometry.clone method.

const material = new THREE.MeshPhongMaterial();

const geometry = new THREE.BoxGeometry(150, 150, 150);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

const material2 = new THREE.MeshPhongMaterial({
  color: 0x00FF00,
  wireframe: true
});
const mesh2 = new THREE.Mesh(geometry.clone(), material2);
scene.add(mesh2);

Check out this fiddle: http://jsfiddle.net/abc123xyz/

If you want to change the thickness of the line, you can use the wireframeLinewidth property.

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

Having trouble initiating MongoDB on localhost with node.js

I'm new to the world of node.js and MongoDB. Trying to set up a simple project has been quite the adventure for me. After navigating to my project directory, I kick things off by typing node init, sticking with the default choices. Following that, I ...

What is the optimal method for verifying two distinct conditions simultaneously using Javascript?

Hey there, I'm working on a code snippet to check the status of a Rails model. Here's what I have so far: var intervalCall = setInterval(function(){ $.post("getstatus", {id:id}); var finished = "<%= @sentence.finished%>"; // CONDI ...

Opt for Object.keys() over .length when dealing with Firebase Objects

How can I update this snippet to use Object.keys()? It currently works well when the comment ids are numbers, but how can it be adapted to work with auto-generated ids from Firebase? (The data structure is provided below) ngOnInit() { this.route.param ...

Troubles with setting up slash commands in discord.js v13

I am encountering an issue while trying to deploy a slash command. The error message DiscordAPIError[50035] is displayed, stating "Invalid Form Body guild_id[NUMBER_TYPE_COERCE]: Value \"undefined\" is not snowflake." const path = require('n ...

Creating a resilient node websocket client with enhanced security (overcoming the challenge of verifying the initial certificate)

What's Working? I successfully created a node server using WebSocket technology. I used the library WebSocket-Node and added key/cert to my HTTPS/secure websocket server as shown below: import WebSockerServer from "websocket"; import fs fro ...

Changing an ng-repeat filter following the manual update of a text input

Utilizing jQuery auto-complete to automatically populate values as users type into a text input. <input type="text" ng-model="tags" name="tags" id="tags" value="" /> Subsequently, the ng-repeat is filtering content based on the entered text <di ...

Can you provide guidance on implementing structured data jsonLD in a Next.js 13 application's router?

I have been struggling to implement structured data in my Next.js 13 (app router) application and have not been able to find the correct method. The next-seo package is also throwing errors for me. When I tried using next-seo, I encountered this error: ...

Finding and removing the last portion of the innerHTML can be achieved by employing specific techniques

Looking to manipulate a <div> element that includes both HTML elements and text? You're in luck. I need to locate and remove either the last, nth-from-last, or nth plain text section within it. For example: <div id="foo"> < ...

How can I take a screenshot from the client side and save it on the server side using PHP?

Currently, I am exploring the possibility of screen capturing at the client side. It appears that the "imagegrabscreen()" function can only capture screens on the server side. After some research, I discovered a new function that allows for screen capture ...

Warning: Unhandled promise rejection in MSSQL with NodeJS detected

Currently, I am in the process of experimenting with NodeJS to set up an API. However, whenever SQL encounters an error related to NULL columns, my http call gets stuck, and the error is displayed in the node console. The specific error I encounter is: ...

generate JSON containing a nested array of data and headings using NodeJS express

My Node.js API is currently returning JSON in the following format: [ { "id" : "1", "tstamp": "2017-06-01T00:00:00.000Z", "dmemberprofiles","48400" "dgroupprofiles","4800" "msclprofiles","400" }, { ...

How can I trigger a page postback in ASP.NET after downloading a file?

Here is my current scenario: The user clicks on a LinkButton, triggering a PostBack on the page. However, I also need to initiate a file download for the user simultaneously. To achieve this, I added the following code to the LinkButton: lnkPrint.Attri ...

The code base encountered a server error with response code 500 while running on a development server

I recently built a React Native application using the WebStorm IDE. The code I used was just the default boilerplate, but now I'm encountering an error. https://i.sstatic.net/UXwfI.png Is there anyone who can assist me with this issue? ...

Ensure that confirmation is only prompted in ASP.NET when necessary

I am faced with a scenario where I need to handle the value of Session["actionMode"] in conjunction with a button click event. Here is what I currently have implemented in my code: protected void Button1_Click(object sender, EventArgs e) { if ((int)S ...

I'm having trouble with my bootstrap dropdown and I've exhausted all of my options trying to fix it based on my current understanding

My dropdown menu is not working despite adding all necessary Bootstrap CDN and files along with the jQuery script. Even with the table being handled by JavaScript, the button does not respond when clicked repeatedly. I suspect the issue lies within the han ...

An operator in rxjs that transforms an Observable of lists containing type X into an Observable of type X

Currently, I am facing a challenge while dealing with an API that is not very user-friendly using Angular HTTP and rxjs. My goal is to retrieve an Observable<List<Object>> from my service. Here's a snippet of the JSON output obtained from ...

Utilizing JSON compression techniques on both the client and server ends for more efficient data transfer

I'm searching for a tool that can compress JSON on the server side (using C#) and then decompress it on the client side, as well as vice versa. The entire data model for my webpage is in JSON format and I need to find a way to reduce its size. I' ...

What is the best way to save the response data into an array outside of the current function in Node.js?

How can I efficiently store all the result data into an array called pImages? I am able to retrieve the results, but I believe using an async function would be more suitable. However, I am unsure of how to implement it. Any assistance would be greatly appr ...

I am struggling to decide which attribute to use for implementing image swap on mouseover() and mouseout()

I have a problem using jQuery to switch between images when hovering on and off. Here's the code snippet I'm working with: HTML <img class="commentImg" src="images/comments.png" data-swap="images/comment_hover.png" alt=""> jQuery $(" ...

Unable to utilize query parameters with an ExpressJS API on localhost

Within my index.js file app.use('/api/v1/users', userRouter) In the Router file router.get("/:id", getUserDataById); When using Postman: The GET URL I am using is: http://localhost:3000/api/v1/users?id=120622 The error message is: C ...