Working with modules

Importing

ThreeFiddle supports ESM imports.

Importing scripts

cube.js

import * as THREE from "three";

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00  });
const cube = new THREE.Mesh( geometry, material );

export default cube;

example.js

function example() {
    console.log("Hello World!");
}

export {
    example
}

main.js

import * as THREE from "three";
import PointerLockControls from "three/examples/jsm/controls/PointerLockControls.js";

import cube from "./cube";
import {example} from "./example.js";


example();

Importing shaders

Using the .glsl file extension signals to the transpiler that you are loading a shader, returning you the contents of your shader as raw text to be used with THREE.ShaderMaterial.

import vertexShader from "./myVertexShader.glsl";
import fragmentShader from "./myFragmentShader.glsl";

const material = new THREE.ShaderMaterial( {

    uniforms: {

        time: { value: 1.0 },
        resolution: { value: new THREE.Vector2() }

    },

    vertexShader: vertexShader,

    fragmentShader: fragmentShader

} );