jasonChen1982 / three.interaction.js

three.js interaction toolkit, help you built an interaction event-system for three.js, binding interaction event like browser-dom
411 stars 73 forks source link

ES6 directly into Browser #28

Open psytron opened 4 years ago

psytron commented 4 years ago

Your lib is fantastic and really powerful.

We are loading ES6 directly into modern browsers for optimized loading with Import promise etc. Noticing that three.interaction causes error when used directly.

Example:

<script type="module">     
    import * as THREE from "./node_modules/three/build/three.module.js";
    import { Interaction } from "./node_modules/three.interaction/build/three.interaction.module.js";
</script>

Produces error:

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

As incremental loading becomes more popular with new browser import Promise, bundle based approach will become less appealing.

Any thoughts?
Is there a way to use /three.interaction.module.js directly in a browser ? Perhaps a version on https://www.unpkg.com/ ? Maybe there is a way to update / extend to work with bundlers and directly at the same time?

jasonChen1982 commented 4 years ago

do you import three before you use three.interaction

c4b4d4 commented 4 years ago

Having same problem here.

Example:

<script type="module">     
    import * as THREE from "./node_modules/three/build/three.module.js";
    import { Interaction } from "./node_modules/three.interaction/build/three.interaction.module.js";
</script>

Produces error:

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

As incremental loading becomes more popular with new browser import Promise, bundle based approach will become less appealing.

adamf59 commented 3 years ago

I was having the same issue. The error is not your import, but rather the importing of THREE inside of three.interaction.module.js, hence the Failed to resolve module specifier. Depending on how your node_modules is setup, you simply have to change the import (1st line) inside of that file to:

import { EventDispatcher, Object3D, Raycaster, Vector2 } from '../../three/build/three.module.js';

I would not recommend this as a long term solution - however. Versions change, and it'll likely get overwritten.