Texture loading as black. I tried running the.html file through a local server (Servez) but that does not seem to be the issue. I am using visual studio code. The code seems to work fine, the console does not show any errors.
This is my code:
window.onload = function() {
//Define the WebGL renderer:
var renderer = new THREE.WebGLRenderer(); //specify the we will use WebGL
renderer.setSize( 800, 600 ); //scene size (Width, Height)
document.body.appendChild( renderer.domElement );
//Initialize (create) the scene:
var scene = new THREE.Scene();
//Define the camera:
var camera = new THREE.PerspectiveCamera(
35, // Field of view
800 / 600, // Aspect ratio
0.1, // Near plane
10000 // Far plane
);
camera.position.x= 0; //default value anyway
camera.position.y= 0; //default value anyway
camera.position.z = 300;
camera.lookAt( scene.position );
//Define the objects for the scene:
var skygeo = new THREE.SphereGeometry(150, 40, 20);
var skytexture = new THREE.TextureLoader().load("sky.jpg");
var skymat = new THREE.MeshBasicMaterial({map:skytexture});
skymat.side = THREE.Backside;
var skydome = new THREE.Mesh(skygeo, skymat);
scene.add(skydome);
// create a point light:
var pointLight = new THREE.PointLight(0xFFFFFF);
// set the light position:
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 100;
// add the light to the scene:
scene.add(pointLight);
// it renders the scene:
renderer.render( scene, camera );
};
I found here(https://discourse.threejs.org/t/texture-loading-not-working-on-server/14910/10) that it may be because the image files were corrupted. I also found somewhere else that it may be because of browser extensions like AdBlock, but removing extensions did not fix it.
What is the reason for this?