I'm currently attempting to add texture to a sphere using Three.js while running a Python server.
The console displays "Success! image-size: 1024 x 1024". I am having trouble identifying the issue.
Main.js:
const scene = new THREE.Scene()
const geometry = new THREE.BoxGeometry(1, 1, 1)
const texture = texLoader.load('Fabric_Lace_026_height.png',
// If successful
function(texture) {
console.log("Success!");
console.log(texture);
},
// Progress (not utilized)
undefined,
// In case of error
function(err) {
console.log("Error");
console.log(err);}
);
const material = new THREE.MeshBasicMaterial({map: texture})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
const sizes = {width: window.innerWidth,height: window.innerHeight}
const camera = new THREE.PerspectiveCamera(75, sizes.width /sizes.height, 1, 1000)
camera.position.z = 3
const canvas = document.querySelector('canvas.webgl')
const renderer = new THREE.WebGLRenderer({canvas: canvas})
renderer.setSize(sizes.width, sizes.height)
renderer.render(scene, camera)