Conceal THREE.Mesh using dat.gui controls

I'm exploring the process of creating 3D shapes for 3 buildings, starting with the outlines (with X and Y values for each line start/end) and then extruding them.

Despite my search on Google yielding no helpful results, I'm reaching out to you for assistance. I have provided an image of the lines for reference.

How can I implement a dat.GUI switch to toggle the visibility of the shapes (I'm unsure how to link the geometry with the gui)?

Thank you for your help!

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

Answer №1

A THREE.Mesh is a type of THREE.Object3d that includes the property visible. If you want to hide a mesh, you can simply set the visible property to false using dat.GUI

var cube = new THREE.Mesh(geometry, material)
scene.add(cube)

var dat = new dat.GUI()
dat.add(cube, 'visible')

Check out the demo

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

Execute iMacros Loop and terminate the process before proceeding to the next command

As a newcomer to the world of iMacro scripting, I am struggling with setting up a simple data scrape. I'm looking for guidance on how to create a loop for the following commands: URL GOTO=link1 URL GOTO=link2 URL GOTO=link3 WAIT SECONDS=7.5 Once th ...

Implementing sound playback within an AJAX response

Recently, I implemented a jQuery code to automatically refresh a specific div. This auto-refresh feature uses AJAX to generate notifications whenever there is a new request from a client, similar to social network notifications. I even incorporated music f ...

Update an existing item or add a new one if it is not already present

I am attempting to create a functionality similar to canva.com, where users can select images from the sidebar and drop them anywhere in the "div", allowing multiple images with individual positions. However, when I use setState(prevState=>{return [...p ...

The values returned by the Node.js API can vary for identical requests

I am currently learning how to use Node.js + Express in order to create a REST API. Within this API, I have implemented the following method: apiRouter.route('/training/session/byId/:id_session') // ===== GET ======= .get(function(req, res ...

Guidelines for setting up Kendo notifications using an angularjs service

I have successfully defined the Kendo notification in my Angular service. However, when I try to use it with the line uiService.notify.error("You missed some required fields.");, I am getting an error that says "Cannot read property 'show' of nul ...

What could be causing the "length" property of undefined error when attempting to install React-Bootstrap with the command "npm i react-bootstrap"?

Currently, I am working my way through a comprehensive MERN full-stack tutorial. So far, things have been going smoothly - I used the "npx create-react-app" command to set up the react application and everything is compiling and running perfectly. Howeve ...

Inverting Arrays Recursively with JavaScript

Currently, we are delving into functional JavaScript in my programming course with a particular assignment. However, I seem to be struggling to make the code work as intended. I would greatly appreciate any advice on how to improve this piece of code. Ever ...

trim() function acting strangely

There seems to be an unexpected occurrence with the trim() function, as it is removing the á character. https://i.stack.imgur.com/whZBN.png This particular code snippet is typically used in various JavaScript projects without any issues. However, a clie ...

Report the error efficiently without terminating the process

I created a tool for users to submit data. If the submitted data does not pass validation (validation returns false), I need to respond with an error 500 status code to the user. The issue is that when I use res.status(500), it causes the program to exit ...

Contrasting the uses of element(...) versus element(...).getWebElement() in Protractor

What is the advantage of using element(...).getWebElement() instead of element(...) when they both perform similarly? Why are there two different APIs for the same purpose? ...

Node.js: Error - Module 'html' not found

Currently, I am utilizing Node.js and attempting to exclusively serve HTML files without any Jade or EJS engines. Below is the code for my entry point (index.js): var express = require('express'); var bodyParser = require('body-parser&apo ...

Retrieve the parent node's class using JavaScript without relying on jQuery

Attempting to retrieve the class of the parent node of a selected element using JavaScript, but encountering issues with the following code snippet. Any guidance on what needs to be corrected? function getParentNodeClass() { var parentNodeClass = this.p ...

Detection of collisions using bounding sphere method

In Three.js, each mesh (THREE.Object3D) comes with useful properties like boundingSphere and boundingBox, along with methods such as intersectsSphere and isIntersectionBox. I initially thought I could use these for simple collision detection. However, I n ...

How does the Rx subscribe function maintain its context without the need to explicitly pass it along

Currently, I am utilizing Rx with Angular2 and making use of the Subscribe method. What intrigues me is that the callbacks of the method are able to retain the context of the component (or class) that initiated it without needing any explicit reference pas ...

Spooky results displayed on website from NightmareJS

Is there a way to display the output from nightmareJS onto a webpage when a button is clicked using HTML, CSS, and JS? This is my nightmareJS code: var Nightmare = require('nightmare'); var nightmare = Nightmare({ show: false}) nightmare .go ...

Ways To Obtain Trustworthy Dates Using JavaScript

Last week, I encountered an intriguing issue at my job. I needed to obtain a date accurately using JavaScript, but the code I was working with utilized new Date() which resulted in discrepancies due to some customers having incorrect system time settings. ...

What are the steps for applying a Bootstrap class to an element?

I keep encountering this error in the console: Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('si col-md-4') contains HTML space characters, which are not valid in tokens. Below is a ...

Is there a way to launch QTP from JavaScript without relying on ActiveXObject?

Is there a way to call QTP from JavaScript without relying on ActiveXObject? I would appreciate any guidance on how to accomplish this task. Thanks in advance, Ramya. ...

Assigning multiple identifiers to a single element

Multiple posts have emphasized the importance of using an ID only once. But, I'm facing a situation where I need to pass 2 PHP variables to my JavaScript. I initially thought of using document.getElementById, but since IDs must be unique, this approa ...

Rotate background image upon each visit

I have a collection of around 50 background images that I want to display randomly each time a user visits my website. The idea is to provide a unique background image for every visit, without saving any information about which image was previously display ...