Currently working with Three.js and aiming to refactor the code. I am looking to create a dedicated class called "Floor" for generating floors:
import {
Mesh,
MeshBasicMaterial,
PlaneGeometry,
RepeatWrapping,
sRGBEncoding
} from 'three';
export class Floor {
constructor(textureLoader, pathName) {
let floorMat;
const geometry = new PlaneGeometry(1000, 1000, 50, 50);
geometry.rotateX(-Math.PI / 2);
const texture = textureLoader.load(pathName, function (map) {
map.wrapS = RepeatWrapping;
map.wrapT = RepeatWrapping;
map.anisotropy = 4;
map.repeat.set(10, 24);
map.encoding = sRGBEncoding;
floorMat.map = map;
floorMat.needsUpdate = true;
});
const material = new MeshBasicMaterial({
color: 0xffffff,
map: texture
// side: DoubleSide,
});
this.mesh = new Mesh(geometry, material);
this.mesh.needsUpdate = true;
this.mesh.position.y = 0;
}
}
This class is then used in my main.js file like so:
const textureLoader = new TextureLoader();
const floor = new Floor(textureLoader, "textures/hardwood2_diffuse.jpg");
Although everything seems to be functioning correctly, the browser's console is showing an error message: "Uncaught TypeError: Cannot set property 'map' of undefined". This issue has got me stumped.
#EDIT:
The solution turned out to be as follows:
constructor(textureLoader, pathName) {
const geometry = new PlaneGeometry(1000, 1000, 50, 50);
geometry.rotateX(-Math.PI / 2);
const texture = textureLoader.load(pathName, function (map) {
map.wrapS = RepeatWrapping;
map.wrapT = RepeatWrapping;
map.anisotropy = 4;
map.repeat.set(10, 24);
map.encoding = sRGBEncoding;
floorMat.map = map;
floorMat.needsUpdate = true;
});
const floorMat = new MeshBasicMaterial({
color: 0xffffff,
map: texture
});
this.mesh = new Mesh(geometry, floorMat);
this.mesh.needsUpdate = true;
this.mesh.position.y = 0;
}