I've been attempting to add a Texture to my sphere using Three.JS. However, I'm encountering an issue where the function inside the image loading process doesn't execute as expected. Despite verifying that the image is being loaded in the Chrome networking tab.
I'm curious to understand why the function is failing to run.
Below is the code snippet I've utilized in my efforts:
import * as THREE from 'three';
var scene, camera, light, renderer, balltex;
load();
function load() {
var loader;
loader = new THREE.TextureLoader(new THREE.LoadingManager());
// # # # THIS PART HERE IS THE ISSUE # # #
loader.load('textures/flakes.png', function(obj) {
console.log("not running here")
balltex = obj;
init();
console.log("init")
animate();
});
}
function init() {
var height = 500, width = 500, bg = '#000000';
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, height/width, 1, 10000);
camera.position.set(1.5, 1.5, 1.5);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
light = new THREE.AmbientLight(0xffffff);
scene.add(light);
var ballmat = new THREE.MeshBasicMaterial({
map: balltex
});
var ballgeo = new THREE.SphereGeometry( 0.3, 20, 20 );
var ball = new THREE.Mesh( ballgeo , ballmat );
scene.add(ball);
renderer = new THREE.WebGLRenderer({ antialias: true } );
renderer.setClearColor(bg);
renderer.setSize(width, height);
var d = document.createElement('div');
console.log("here",d)
document.body.appendChild(d);
d.appendChild(renderer.domElement);
var c = document.getElementsByTagName('canvas')[0];
c.style.width = width + 'px';
c.style.height = height + 'px'
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
“I had anticipated the function to execute without issue, but for some reason, it's not working as intended.”
Additionally, I'd like to note that instead of utilizing THREE.JS CDN, I opted to use npm to manage the library.
Thank you,