Skip to content

Transform examples/js to support modules #9562

Closed
@ghost

Description

The main source code has recently been ported to ES2015 modules (see #9310); however, some parts are still relying on global namespace pollution and have thus become unusable.

Specifically the things in /examples/js/ haven't been transformed to support modules yet; this makes them currently unusable from within environments such as webpack or SystemJS.

Edit, 11-20-2016: They can be used, but it requires a lot of setup: SystemJS, webpack. If you need assistance with these: Sorry, but this is the wrong thread to announce it! 😄

Activity

ghost changed the title [-]Transform examples/js to support modules[/-] [+]Transform `examples/js` to support modules[/+] on Aug 22, 2016
ghost

ghost commented on Aug 22, 2016

@ghost

Side note: You could theoretically use these from within webpack by injecting the global THREE variable (and others, depending on what you're trying to load) using imports-loader, but the problem still remains for SystemJS and native module evaluation that will eventually land in browsers.

mrdoob

mrdoob commented on Aug 23, 2016

@mrdoob
Owner

I don't know how this can be fixed. We can't turn those files into ES6 Modules because, not only browsers don't support them yet, we want to support old-ish browsers too.

So, as far as I can see, the "hack" for Webpack and SystemJS is the price to pay for now?

andrevenancio

andrevenancio commented on Aug 23, 2016

@andrevenancio
Contributor

Either things like examples/js/postprocessing/ become a module of themselves or we need to come up with some kind of plugin logic.

@mrdoob what if github.com/threejs becomes a thing? You can create different repos inside of it which have a similar build system as the current threejs, which can be used via modules or people can just download the legacy code in the build folder. Again with the postprocessing in mind, it will have THREE has a dependency, and it would be both a module or you can use the /build/EffectComposer.js for legacy code?

mrdoob

mrdoob commented on Aug 23, 2016

@mrdoob
Owner

@mrdoob what if github.com/threejs becomes a thing?

I have a hard time maintaining one single repo already 😕

andrevenancio

andrevenancio commented on Aug 23, 2016

@andrevenancio
Contributor

the idea was to give you and the maintainers more control over the releases, a bit like https://github.com/airbnb or https://github.com/facebook I'm happy to pick up some bits and bobs as I need them but you'll end up with github.com/randomuser/effectscomposer github.com/randomuser2/orbitcontrols :(

GGAlanSmithee

GGAlanSmithee commented on Aug 23, 2016

@GGAlanSmithee
Contributor

Does it really make sense to make the examples be modules though? If I understand it correctly, the examples are consumers of three, not a part of it. They are there to provide you with example usages of three.js.

I think a more correct way to go about it would be to move as much as possible to the core of three.js and rely on tree shaking to eliminate dead code. (I understand this will be problematic for users that does not want to use a build pipe of their own though..)

andrevenancio

andrevenancio commented on Aug 23, 2016

@andrevenancio
Contributor

We're not saying we should have the examples as modules. We're saying that some of the files referenced in the examples folder aren't yet modularised, like OrbitControls.js or EffectsComposer.js or many others that are very often used in demos, prototypes and even in production. Those files, should be, as I was suggesting, modules of their own, outside of three.js

satori99

satori99 commented on Aug 23, 2016

@satori99
Contributor

I agree in regards to OrbitControls and the the other control classes. They are too useful to be just examples.

killroy42

killroy42 commented on Aug 23, 2016

@killroy42

I wrote a small universal module loader, which supports various module systems and falls back to global namespace. It makes it all work, just by including the script. Should I do a demo with it for the examples?

mrdoob

mrdoob commented on Aug 23, 2016

@mrdoob
Owner

They are too useful to be just examples.

What does that mean? Do you mean that they are too commonly used?

satori99

satori99 commented on Aug 23, 2016

@satori99
Contributor

Yeah exactly. Especially OrbitControls. It might just be me, but I end up including that file a lot.

danrossi

danrossi commented on Aug 23, 2016

@danrossi
Contributor

I've ported OrbitControls over to a module, you can do something similar. My version has some changes when to dispatch start events on movement.

It can then include it within Three.Js main app file ie

export { OrbitControls } from '../three-vr-orbitcontrols/src/OrbitControls.js';

I've had to include other examples that are not modules yet, you concat them in with rollup in the rollup script like so

var fileList = [
    "../three.js/examples/js/effects/StereoEffect.js",
    "../three.js/examples/js/effects/AnaglyphEffect.js",
    "../three.js/examples/js/controls/VrControls.js",
    "../three.js/examples/js/controls/DeviceOrientationControls.js"
];

var out = fileList.map(function(filePath){
    return fs.readFileSync(filePath, 'utf-8');
});


var footer = out.join("\n");


export default {
    entry: 'Three.js',
    dest: 'build/three.js',
    moduleName: 'THREE',
    format: 'umd',
    indent: '\t',
    plugins: [
        glsl()
    ],

    outro: outro,
    footer: footer
};

https://github.com/danrossi/three-vr-orbitcontrols

I've done something similar for the VREffect but have refactored and cleaned it up also.

https://github.com/danrossi/three-vreffect

killroy42

killroy42 commented on Aug 23, 2016

@killroy42

Perhaps we could start a small initiative to modularize these commonly used helpers from the examples. Clean them up and improve the quality (For example I rebuild the FPS controller to include keyboard controls, events, etc).

375 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @mcmire@arpu@mrdoob@backspaces@garyo

        Issue actions

          Transform `examples/js` to support modules · Issue #9562 · mrdoob/three.js