I have encountered some difficulties while trying to incorporate three.js into a React project. Despite my efforts, I am unable to successfully load texture images. I have set up my own local server, included a callback method for when loading is finished, and attempted to load the images from various paths, but nothing seems to be working.
The images are located in
public/animation/js/img/texture1.pngpublic/animation/js/animation.js. Here is the current code I am working with:
const Pilot = function () {
let faceMaterial;
const geometry = new THREE.CircleGeometry(10, 128);
const manager = new THREE.LoadingManager();
manager.onStart = function (url, itemsLoaded, itemsTotal) {
console.log('Commenced loading file: ', url, '.\nLoaded ', itemsLoaded, ' of ', itemsTotal, ' files.');
};
manager.onLoad = () => {
console.log('Loading finished!');
};
manager.onProgress = function (url, itemsLoaded, itemsTotal) {
console.log('Loading file: ', url, '.\nLoaded ', itemsLoaded, ' of ', itemsTotal, ' files.');
};
manager.onError = function (url) {
console.error('An error occurred while loading ', url);
};
const textureLoader = new THREE.TextureLoader(manager);
textureLoader.setCrossOrigin('anonymous');
textureLoader.load('/img/texture1.png',
texture => {
faceMaterial = new THREE.MeshFaceMaterial([
new THREE.MeshBasicMaterial({ map: texture }),
new THREE.MeshBasicMaterial({ map: texture }),
new THREE.MeshBasicMaterial({ map: texture }),
new THREE.MeshBasicMaterial({ map: texture }),
new THREE.MeshBasicMaterial({ map: texture }),
new THREE.MeshBasicMaterial({ map: texture })
]);
},
undefined,
err => {
console.error('An error occurred:', err);
}
);
this.mesh = new THREE.Mesh(geometry, faceMaterial);
this.mesh.name = 'profile';
};