search

hoverinc / ray-tracing-renderer

[UNMAINTAINED] Real-time path tracing on the web with three.js
https://hoverinc.github.io/ray-tracing-renderer/
MIT License
645 stars 68 forks source link

ES6 in the browser? #240

Open morandd opened 2 years ago

morandd commented 2 years ago

Hi,

I'm very excited to try this out. But I encounter problems using the latest THREE.js (v135, from a CDN) using modules in the browser.

To replicate:

  1. Download the ES6 module.
  2. Make index.html: 
    <html><body>
 <script type="module">
  import * as THREE                     from 'https://cdn.skypack.dev/three';
 import * as RayTracingRenderer  from './RayTracingRenderer.js'
</script>
</body></html>

    The error I get in Chrome Inspector is: RayTracingRenderer.js:18 Uncaught TypeError: Cannot read properties of undefined (reading 'PerspectiveCamera') at RayTracingRenderer.js:18

Placing a breakpoint at line 7 in RayTracingRenderer.js we see that THREE$1 is undefined. The problem seems to be that the initialization code (lines 1-5) which look for THREE in a TypeScript ("exports") and NodeJS ("global" or "require") environment, cannot find it.

Maybe to solve this it's necessary to add an init() function, so the user can manually provide a THREE instance. That's less elegant than the current Import, but maybe easier than delving into the ES6 browser module loader.

Or is there a better solution?

ps. Fingers crossed that the flat lens support comes back! That look is lovely.

morandd commented 2 years ago

ps. Obviously a workaround is to use the Githubissues.

  • Githubissues is a development platform for aggregating issues.