Static asset loading

Static asset loading works almost the same as module loading with most of the work being done for you behind the scenes by the ThreeFiddle transpiler. Importing a static asset such as a png, jpg, or glb converts the given path to the corresponding file location found at assets.three-fiddle.xyz. You can then use this location when loading a static asset in your three.js code.

Loading images

./cube.js

import * as THREE from "three";
import logo from "./logo.png";

const geometry = new THREE.BoxGeometry();
const loader = new THREE.TextureLoader();
const material = new THREE.MeshBasicMaterial( { 
    map:loader.load(logo),
    transparent: true,
    color: 0x544545
});

const cube = new THREE.Mesh( geometry, material );

// export our mesh to be imported
// by the main file
export default cube;