ES6 in the browser? #240
Description
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.