ES6 in the browser? #240

morandd · 2021-12-05T10:27:40Z

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:

Download the ES6 module.
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.

The text was updated successfully, but these errors were encountered:

morandd · 2021-12-05T10:29:59Z

ps. Obviously a workaround is to use the <script> tag instead of modules. However, other modules (I'm looking at you, troika-text) are only supported as modules. Plus,ES6 modules are meant to be the future.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ES6 in the browser? #240

ES6 in the browser? #240

morandd commented Dec 5, 2021 •

edited

Loading

morandd commented Dec 5, 2021

ES6 in the browser? #240

ES6 in the browser? #240

Comments

morandd commented Dec 5, 2021 • edited Loading

morandd commented Dec 5, 2021

morandd commented Dec 5, 2021 •

edited

Loading