Simple model viewer using three.js in electron

Ozymandiaz · May 25, 2018, 4:10pm

hi.

i try to make a simple model viewer on desktop using electron.

but i have a problem. here is my step.

Read a geometry data from file in main process.
Create a BufferGeometry (main process).
Pass a BufferGeometry instance to renderer process using ipcrenderer
Make mesh and add to scene (renderer process).
console are some error: ‘Uncaught TypeError: geometry.addEventListener is not a function’.

i print log for passed geometry instance. and it seems look like not have problem.

so, how can i fix it?

do i pass to just data only and create geometry, mesh in renderer process?

best regards.

Mugen87 · May 25, 2018, 7:04pm

Have you realized that the official editor can already be used with electron? Just run npm install and then npm run editor in the main directory of the repository. Maybe you can use this implementation as an orientation for your own project.

github.com

mrdoob/three.js/blob/dev/editor/main.js

const electron = require( 'electron' );
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

const path = require( 'path' );
const url = require( 'url' );

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;

function createWindow() {

	mainWindow = new BrowserWindow( { webPreferences: {
		nodeIntegration: false
	} } );

	mainWindow.maximize();
	mainWindow.setMenu( null );

This file has been truncated. show original

donmccurdy · May 25, 2018, 8:55pm

Are you trying to create a desktop application, or just generate screenshots?

I have an example of an electron model viewer here, note the packaging steps. For screenshots I’ve found electroshot quite helpful.

Ozymandiaz · May 26, 2018, 1:30pm

Mugen87, thanks for know to me. i will check that example.

donmccurdy, i try to desktop application for my custom model format.

and thanks guys, your advice are very helpful for me both of you.

DirkP · October 3, 2020, 1:01pm

I think ipcrenderer will convert to/from json, so you lose functions in the process

GlifTek · October 4, 2020, 4:09am

Is it possible to have the editor work with Qt5?

Mugen87 · October 4, 2020, 1:55pm

@GlifTek Sorry, I’m not familiar with Qt5. I also think that your question is way too broad. I mean you are asking if a C++ library “works” with a JavaScript based WebGL scene editor. TBH, I don’t understand the relation between both things…

GlifTek · October 4, 2020, 9:38pm

Hi, yeah sorry, I’m just becoming familiar with qt5 myself. The reason I brought that up was because I had just been reading about this new library made for Vue to use Qt to make desktop apps, Vue node gui, and there was much discussion about comparing qt5 to electron.
I know there are Vue/three.js APIs so I guess I’m looking for a similar way as you described above to streamline the editor-Vue-qt process, as one would with electron.

Again, I’m just learning.
Thanks

Topic		Replies	Views
Large scale app using Electron Questions electron	5	672	October 17, 2019
Opening local model files from electron Questions electron	4	1794	March 26, 2020
Using ThreeJs in electron Questions electron	2	3534	May 29, 2017
THREE.BufferGeometry sent from api request to client side for rendering: issues adding geometry to scene Questions geometry , buffergeometry	4	3475	January 20, 2020
Creating Buffer Geometry Questions geometry	1	629	August 5, 2020

Simple model viewer using three.js in electron

Related topics