How to use X_ITE with Electron?

create3000 commented 1 year ago

You should be a bit familiar with Electron. There a some files needed to start an Electron window.

main.js: Main entry point to open a BrowserWindow

"use strict"

const
  electron = require ("electron"),
  path     = require ('path')

const window = new electron .BrowserWindow ({
  webPreferences: {
     preload: path .join (__dirname, "window.js"),
     nodeIntegration: true,
     contextIsolation: false,
  },
})

window .loadFile (path .join (__dirname, "window.html"))

window.js: small wrapper to load application.js

"use strict"

window .addEventListener ("DOMContentLoaded", () =>
{
   require ("./application")
})

window.html: a bit HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
  </head>
  <body></body>
</html>

application.js: your browser window environment

"use strict"

const X3D = require ("x_ite")

/// Do something with window, document and X3D.

const 
  canvas  = document .createElement ("x3d-canvas"),
  browser = canvas .browser

document .appendChild (canvas)
browser .loadURL (new X3D .MFString ("path/to/world.x3d"))

zzarkov commented 1 year ago

Thanks. This will be enough to start. I have Electron installed but I was using x-ite like in a regular web page so far.

create3000 commented 1 year ago

There is now a webpage available at https://create3000.github.io/x_ite/how-to-use-x-ite-with-electron which explains the basics.

create3000 / x_ite

How to use X_ITE with Electron? #141