It seems like the issue could be related to the texture not finishing loading before the mesh is rendered. To fix this, ensure that the texture(s) are fully loaded before initiating the render loop. There are various approaches to accomplish this, but a simple method involves passing a function to the loader's load() method and triggering the renderer from within it. Here's a revised version of the provided code:
var scene, camera, light, renderer, balltex;
load();
function load() {
var loader;
loader = new THREE.TextureLoader(new THREE.LoadingManager());
loader.load('pic1.jpg', function(obj) {
balltex = obj;
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');
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);
render();
}
function render() {
renderer.render(scene, camera);
}