When working with THREE.js in Electron, web development tools seem to vanish into thin air

Exploring electron is fairly new to me (if you know of any good documentation, please leave it in the comments) and I've encountered an issue that has left me puzzled:

Everything seems fine until I load the THREE.js library. At that point, even though my scene is rendering, web development tools (such as the JavaScript console) are no longer accessible and I end up with a blank page.

In the first image below, you can see this blank page, when it should resemble the right side of the second picture. Can anyone offer guidance on how to overcome this obstacle?

EDIT: Following the initial response, here is my main.js file:

var app = require('app');
var BrowserWindow = require('browser-window');

var mainWindow = null;

app.on('ready', function() {
    mainWindow = new BrowserWindow({
        height: 720,
        width: 1080,
        frame : false,
        resizable : false
    });

    mainWindow.loadURL('file://' + __dirname + '/main.html');
});

(using npm 3.9.0) https://i.sstatic.net/RwBqs.png

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

Answer №1

Make sure to inspect your main.js script for the presence of the line win.webContents.openDevTools(). If you find it, consider removing or commenting it out.

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 HTML5 Canvas to draw intersecting polygons

Recently, I came across a polygon drawing function that caught my attention: Polygon.prototype.draw = function(ctx) { ctx.save(); ctx.beginPath(); var v = this.vertices[0] ctx.moveTo(this.position.x + v.x, this.position.y + v.y); var i ...

How to extract a particular value from a JSON object using AJAX?

In my test.php file, I have implemented a code where ajax sends a request from index.php to this page. Within this page, I have created an array, converted it to JSON, and returned it as follows: <?php $arr = array( "status"=>200, "result"=>array ...

Encountering a cannot POST / error while using Express

I am encountering an issue with my RESTful API while using Postman to call the route /websites. Despite my efforts, I keep receiving the error message "Cannot POST /websites". In addition, I am exploring the implementation of a job queue utilizing Express, ...

The submitHandler for AJAX does not function properly when using bootstrapvalidator

I'm encountering an issue with the Bootstrap validation tool found at https://github.com/nghuuphuoc/bootstrapvalidator The submitHandler function seems to be malfunctioning for me. Upon form submission, the entry is not being created and the form rel ...

How to keep a window/tab active without physically staying on that specific tab

Whenever I'm watching a video on a website and switch to another tab, the video stops playing. But when I switch back to the original tab, the video resumes. Is there a trick to prevent the video from stopping? I've already tried using scrollInto ...

Avoiding cross-site scripting vulnerabilities, an AJAX response will return an HTML response

function accessAccount() { var errorMessage = ""; var checkedResult = true; $(".errorDisplay").hide(); var accountNumber = document.getElementById('customerAccountNumber').value; var accountType = document.getElementById(&apos ...

The onChange function in Material UI Text Field is preventing users from inputting additional values

My application contains a custom TextField component. I am facing an issue where I cannot increase the value of the first TextField due to the presence of the onChange method. However, the second TextField does not have the onChange method, and I can succe ...

The manner in which sessionStorage or localStorage is shared between different domains

I am looking to persist data across different domains using sessionStorage or localStorage. How can I achieve this? The data needs to be shared between a Vue project and a React project. English is not my strong suit, so I hope you are able to understand ...

Trying to differentiate between a web application built on a Node.js server and an Electron-based application

Currently, I am delving into the world of desktop app development with Electron. While I have experience developing websites in PHP using session variables and includes, this new venture is presenting some challenges. Specifically, I am aiming to create a ...

Having trouble adding/removing/toggling an element class within a Vue directive?

A successful demonstration can be found at: https://jsfiddle.net/hxyv40ra However, when attempting to incorporate this code within a Vue directive, the button event triggers and the console indicates that the class is removed, yet there is no visual chang ...

When using the setTimeout function to update the state, React useContext appears to be ineffective

As a newcomer to React, I have a question about refreshing the score in my card game within a forEach loop using setTimeout. While the state appears to update correctly, the DOM (Component overarching) does not reflect these changes. export function Refill ...

Try implementing Underscore/Lodash to organize an object by values and convert it into an array of pairs that can be utilized with AngularJS ng

My goal is to showcase the details from the given object on the user interface using Angular's ng-repeat. It is essential for me to arrange the key/value pairs based on their values and exhibit them in sequential order in an array from highest to lowe ...

Switching the positions of the date and month in VueJS Datepicker

Recently, I have been utilizing the datepicker component from vuejs-datepicker. However, I encountered an issue where upon form submission, the date and month switch places. For instance, 10/08/2018 (dd/MM/yyyy) eventually displays as 08/10/2018, leading ...

Comparing Buffer and Uint8Array in Node.js

Exploring the documentation for the fs module 1, we come across the following regarding the writeFile method: const data = new Uint8Array(Buffer.from('Hello Node.js')); Further in the documentation 2, it states: With TypedArray now available, ...

Utilizing nested routes in Node.js with express.js framework!

index.js const AuthRouter = require("./Routes/Auth/signup") app.use("/account", AuthRouter) signup.js router.post("/", async (req, res) => { res.send("Signup") }) It's functioning correctly... H ...

What steps should I follow to integrate Semantic UI into a project using React and Express?

As a newcomer to Semantic/React/Express, I am wondering how to incorporate the stylesheet for Semantic in React. Do I need an html file that directly references the Semantic css and JavaScript files? Currently, I am not utilizing any html files. In my mai ...

A guide to finding the mean in Angular by utilizing JSON information

import { Component, OnInit } from "@angular/core"; import { MarkService } from "../app/services/marks.service"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.scss"] }) export class AppComp ...

When altering the color of a mesh in Three.js, only a single face is impacted by the modification

I have a GLB model with multiple parts and hierarchy. My goal is to highlight a specific part of the assembly on mouseover. The code snippet I am using for this functionality is as follows: raycaster.setFromCamera( pointer, camera ); ...

Is there a way to ensure that a statement will not execute until the completion of a preceding function?

I am encountering an issue where the window.open function is being called too quickly, causing my other function not to finish and post in time within my onclick event. I attempted to address this by setting a timeout on the trackData() function, but it o ...

What is the best way to make the children of a parent div focusable without including the grandchildren divs in the focus?

I want to ensure that only the children of the main div are able to receive focus, not the grandchildren. Here is an example: <div class="parent" > <div class="child1" > <!-- should be focused--> <div class="g ...