notes.chiubaca.com

Loading textures into Three.js is super easy

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load(
  "http://192.168.1.106:8080/assets/images/c548d2d05b1ab054651d3e401b8e4ede.jpg"
);

the texture can then be used inside the MeshBasicMaterial class.

const material = new THREE.MeshBasicMaterial({ map: texture });

Note there are also three callback functions that can hookeded into:

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load(
  "http://192.168.1.106:8080/assets/images/c548d2d05b1ab054651d3e401b8e4ede.jpg",
  () => {
    console.log("load");
  },
  () => {
    console.log("progress");
  },
  () => {
    console.log("error");
  }
);

Oftenly used to create loading bar is created by utalising the THREE.LoadingManager class. There are callback which can be accessed

const loadingManager = new THREE.LoadingManager();
const textureLoader = new THREE.TextureLoader(loadingManager);

loadingManager.onStart = () => {
  console.log("Start");
};

loadingManager.onLoad = () => {
  console.log("Load");
};

loadingManager.onError = () => {
  console.log("Error");
};

UV coordinates is the mechanism for specifying how textures get mapped onto a geometry. Premade geometries by Three.js have set UV coordinates which can be access via the attributes property on any Geometry classs. it will be a represented as a Float32Array
Textures can be remapped at runtime by tweaking the propertie on the texture object.
- repeat.x/y - repeat a texture x amount of time on the x or y axis
- offeset.x/y - offset a textureon either the x or y axis
- offeset.wrapS - this is needs to be set with Three.MirrorRepeatWrapping
- offeset.wrapT - this is needs to be set with Three.MirrorRepeatWrapping
- rotation
- rotation.center - changes to pivot point when rotating
Image filtering can change the appearance of texture to make them more or less sharp
- minFilter has better performance but will stretch and blur your textures
- magFilter will make your image looks sharp and remove any blurryness
- Both needs to be set with Three.NearestFilter
texture resolutions must be by a power of two otherwise performance will suffer
jpg is smaller but lossy. png is lossless but heavy
places to get textures