I'm currently experimenting with three.js to load textures.
Here is the snippet from my main.js file:
const worker = new Worker('../workers/worker.js', {
type: 'module'
});
And this is a simplified version of worker.js that I am using:
import * as THREE from 'https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9de9f5eff8f8ddadb3acafacb3ac">[email protected]</a>/build/three.module.js';
const textureLoader = new THREE.TextureLoader();
textureLoader.load(
// Resource URL
'images/texture.jpg',
// onLoad callback
function ( texture ) {
// In this example, we create the material when the texture is loaded
const material = new THREE.MeshBasicMaterial( {
map: texture
} );
},
// onProgress callback is currently not supported
undefined,
// onError callback
function ( err ) {
console.error( 'An error occurred.' );
}
);
However, I encountered the following error:
Uncaught ReferenceError: document is not defined
After some research, I learned that accessing the DOM directly is not possible. I am now seeking guidance on how to resolve this issue. Thank you.