Converting threejs' IIFE functions to es6?

Question

I'm trying to break my threejs project into smaller modules and I'm having a tough time. Take this function for example:

var updateCamera = (function() {
    var euler = new THREE.Euler( 0, 0, 0, 'YXZ' );

    return function() {
        euler.x = motion.rotation.x;
        euler.y = motion.rotation.y;
        camera.quaternion.setFromEuler( euler );

        camera.position.copy( motion.position );
        camera.position.y += 10.0;
    };
})();

Lets say I wanted to break this updateCamera function into its own file and import it. I'm a bit confused on how to since it's self executing. Can anyone give me a hand?

Answer 1

Instead of assigning to the (global?) updateCamera variable, use a (default) export. You can drop the whole IIFE, as every module has its own scope; so euler will be inaccessible and static even in the module top level.

You also might want to explicitly declare the dependency on Three.js instead of relying on globals.

// updateCamera.js
import { Euler } from 'three';

var euler = new THREE.Euler( 0, 0, 0, 'YXZ' );

export default function updateCamera(camera, motion) {
    euler.x = motion.rotation.x;
    euler.y = motion.rotation.y;
    camera.quaternion.setFromEuler( euler );

    camera.position.copy( motion.position );
    camera.position.y += 10.0;
}

Then you can use it in other modules by doing

// main.js
import updateCamera from './updateCamera';

…
updateCamer(camera, motion);

Notice that camera and motion should be passed as arguments here. Again, don't depend on globals; if you don't want to pass them around everywhere you might also create a module that exports them and from which you could do

import {camera, motion} from './globals';

Answer 2

Lets say I wanted to break this updateCamera function into its own file and import it. I'm a bit confused on how to since it's self executing. Can anyone give me a hand?

Well the only point of the IIFE in this case is to make euler "private". Because each file gives you its own context in Node, you can do this without the IIFE easily

// Camera.js

import { Euler } from 'three'

const euler = new Euler( 0, 0, 0, 'YXZ' )

export const updateCamera = (camera, motion) => {
  euler.x = motion.rotation.x
  euler.y = motion.rotation.y
  camera.quaternion.setFromEuler( euler )
  camera.position.copy( motion.position )
  camera.position.y += 10.0
}

Using it is like this

import { updateCamera } from './Camera'

// const camera = ..., motion = ...

updateCamera(camera, motion)