Delete the scene once the user has logged in successfully

Hey, I'm currently using Three.js for a pre-login homepage and I've wrapped the scene in a DIV. However, when the user clicks login and I try to hide/clear the screen, I'm running into issues with rendering. Even though I attempt to hide it, the dashboard remains unclickable, indicating that the scene renderer is still active on the page. I am working within a single page application (SPA).

Can anyone provide some suggestions on how to effectively remove the Three.js scene? I have tried setting it to null after the user logs in and obtains a token, but this requires manual page refreshes for the dashboard to function properly. Additionally, when logging out, the Three.js scene on the homepage disappears, but I need to manually refresh the page as well.

javascriptdomthree.js

Answer №1

Although I have not personally worked with three.js, it is possible to hide a div using JavaScript. To show or hide an element, you can manipulate the element's style property. Typically, adjusting the element's display property is all that is needed:

element.style.display = 'none';           // Hide
element.style.display = 'block';          // Show
element.style.display = 'inline';         // Show
element.style.display = 'inline-block';   // Show

Alternatively, if you want the element to remain in its position (e.g., hiding a table cell), you can modify the visibility property instead:

element.style.visibility = 'hidden';      // Hide
element.style.visibility = 'visible';     // Show

I hope this explanation proves useful.

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

I'm looking for a way to customize the featureLayer style specifically for level 1 administrative areas in React, using the react-google-maps/api library in conjunction with the

I am currently working on a project in Next.js where I am trying to customize the coloring up to administrative_area_level_1 boundaries on a Google Map using the react-google-maps/api library. However, my struggle lies in finding the correct method to add ...

javascriptreactjsgoogle-mapsnext.jsgoogle-maps-api-3

Using jQuery along with the jQuery Form Plugin to retrieve and parse the plain text responseText from an Ajax

I am currently working on creating a form using ajaxForm from the jQuery Form Plugin. var options = { target: '#output', // target element(s) to be updated with server response beforeSubmit: beforePost, // pre-submit cal ...

javascriptajaxformsjquery-plugins

Encountering a "Module Not Found" Error when attempting to execute a basic "Hello World" script

I attempted to run myfirst.js program from the terminal using the specified directory and command. I expected a window to open up or a browser popup. Upon typing node myfirst.js in the terminal within the same directory, an error message was displayed: no ...

javascriptnode.js

jQuery Alert for Double-Checking Email Entry

Is it possible to create a simple alert pop-up using jQuery if the user does not enter the correct email address in the second email input form? Below is my current code: <div id="reservation-request"> <form method="post" action="test.php ...

phpjavascriptjqueryhtml

Error loading GLTF file

I'm having trouble displaying a GLTF model using three.js. If someone could help me identify the issue in my code, I would greatly appreciate it. import {GLTFLoader} from "./GLTFLoader.js"; var scene = new THREE.Scene(); ...

javascriptthree.jsblender

Interacting with wpdb using AngularJS

I just started learning AngularJS and I'm eager to implement it on my WordPress website. My goal is to display a table with data from a database in my WordPress site, but I am encountering difficulties accessing the WordPress functions and variables. ...

javascriptphpangularjswordpress

What's the best way to implement two AJAX field validations to prevent button redirection on a website?

Can anyone provide guidance on how to implement two ajax field validations for a button to prevent clicking if the data already exists or redirecting to the same page? I am seeking assistance with this issue. Below is the ajax code snippet: function vali ...

javascriptphphtmlajax

Retrieve the student ID from the URL parameters and display all records with the matching ID

I am trying to display all rows with the same id using $_GET['student_id'], but I am encountering an error with Datatables. Here is my code. When I get the id from the URL, for example: example.com/example.php?=2222 All rows with the id 2222 wil ...

javascriptphpmysql

Tips for creating a typescript typeguard function for function types

export const isFunction = (obj: unknown): obj is Function => obj instanceof Function; export const isString = (obj: unknown): obj is string => Object.prototype.toString.call(obj) === "[object String]"; I need to create an isFunction method ...

javascripttypescriptfunctiontype-safetynarrowing

Selecting a specific JSON object to generate numerous arrays

Within my JSON array are thirty objects representing the last 30 days, including today. Each object contains specific properties: { "date": "2013-05-20", "notCachedRequestsDevelopment": "115482", "cachedRequestsDevelopment": "4732914", "no ...

javascriptarraysjsondictionary

Substitute the identifier with an element for a specific webpage

Currently, my navigation consists of two list items: <body id="trips"> <nav> <li><a href="/trips.php" class="trips">Trips</a></li> <li><a href="/trips.php?offer=true" class="offers">Offers< ...

javascriptphpjqueryhtmlcss

How to transform a quaternion from global to local coordinates in THREE.js

Is there a way to synchronize the rotation of one object with another object that have different parent objects in three-dimensional space? I know using object3D's .getWorldQuaternion will provide me with the source object's rotation in world coo ...

three.js

Tips for transforming a style object into a compiled attribute value using Vue API

Can the Vue 2.x API be used to convert an object representing component styles into a format suitable for the style DOM attribute? Essentially, I am seeking an imperative API similar to the v-bind:style directive. For instance: const style = { fontSiz ...

javascriptvue.js

What is the best way for Flask to host the React public files?

When working with React, I created a folder called ./public/assets, and placed an image inside it. Running npm start worked perfectly fine for me. However, after running npm run build in React, I ended up with a ./build folder. To solve this issue, I moved ...

javascriptpythonreactjsflask

Blinking magic of dynamic rendering with NextJs

I am facing some challenges with dynamically importing a component in my NextJs application. I am attempting to import the Froala text editor, which is supported for React. However, when I try to import it, I encounter errors stating that window is not def ...

javascriptreactjsnext.js

How should v-select, item-text, and item-value be correctly utilized?

When I make an API call, the response is returned. https://i.sstatic.net/AsFzu.png from another perspective. https://i.sstatic.net/T4vqa.png I store the result of the API call in a variable called result = [];. To create a dropdown list, I use v-select ...

javascriptvue.jsvuetify.js

Using an image URL in a MongoDB database - a step-by-step guide

I am working on a cosmetics project website and need to create product information for each item. Each product will have an image, which I want to include by creating a URL for it and using EJS. For example, to display the image for a product, I would us ...

javascriptnode.jsmongodbmongooseejs

Implement the functionality of mouse panning on the left mouse button for a 2D graph generated using a modified version of D3.js fork for the 3

I am attempting to create a 2D graph using a 3D Force Directed Graph system (specifically with D3.js, available at this link). My goal is to initiate the graph in 2D mode with disabled camera rotation. Users should have the option to switch to 3D mode with ...

javascriptjqueryd3.jsthree.js

Create a new array containing the keys from an array of objects

My task involves extracting the key puppies from an array of objects and returning it in a new array: The input is an array of dogs structured like this: [ {breed: 'Labrador', puppies: ['Fluffy', 'Doggo', 'Floof&ap ...

javascriptarraysjavascript-objects

Using NodeJS to retrieve the mean price from the OPSkins pricelist

Is there a way to calculate the average price of every skin listed in this document? I'm wondering how one would go about using the dates and prices in order to determine the 60-day average price. My approach would involve extracting the data from t ...

javascriptjsonnode.js