Was macht threejs-textures?
Three.js Texturen – Texturtypen, UV-Mapping, Umgebungsmaps, Textureinstellungen. Einsetzbar bei der Arbeit mit Bildern, UV-Koordinaten, Cubemaps, HDR-Umgebungen oder Texturoptimierung.
Übersicht
Diese Skill-Ressource konzentriert sich auf die Verwendung von Texturen in Three.js. Sie behandelt:
- Texturtypen:
Texture,CubeTexture,DataTexture,CompressedTextureundVideoTexture. - UV-Mapping: Grundlagen von UV-Koordinaten und wie man Texturen auf Geometrien abbildet.
- Umgebungsmaps: Einrichtung von
CubeTextureLoaderund HDR-Umgebungen (RGBELoader). - Textureinstellungen: Filterung (
minFilter,magFilter), Umbruch (wrapS,wrapT), Wiederholung (repeat), Versatz (offset) und Rotation. - Optimierung: Texturkomprimierung, Mipmapping, Speicherverwaltung und Lazy-Loading.
Verwendung
Textur laden
import { TextureLoader } from 'three';
const loader = new TextureLoader();
const texture = loader.load('path/to/texture.jpg');
Textur auf ein Material anwenden
import { MeshStandardMaterial, Mesh, BoxGeometry } from 'three';
const material = new MeshStandardMaterial({ map: texture });
const mesh = new Mesh(new BoxGeometry(), material);
scene.add(mesh);
Cubemap für Umgebungsbeleuchtung
import { CubeTextureLoader } from 'three';
const cubeTextureLoader = new CubeTextureLoader();
const envMap = cubeTextureLoader.load([
'px.jpg', 'nx.jpg',
'py.jpg', 'ny.jpg',
'pz.jpg', 'nz.jpg'
]);
scene.environment = envMap;
scene.background = envMap;
Textureinstellungen anpassen
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(2, 2);
texture.offset.set(0.5, 0.5);
texture.rotation = Math.PI / 4;
texture.minFilter = THREE.LinearMipmapLinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.needsUpdate = true;
Ressourcen
Lizenz
MIT