Bump texture issue

Bumpy images are not displayed.
And when I add to the scene the new sphere, created to put the clouds detached from the already existing one, the black earth is displayed.

I leave you the code below:

var sphere = new THREE.SphereGeometry(





var material = new THREE.MeshBasicMaterial({

    transparent: true,

    opacity: 0.9,


  THREE.ImageUtils.crossOrigin = "";

  (material.map = THREE.ImageUtils.loadTexture("img/earth-large.jpg")),

    (material.bumpMap = THREE.ImageUtils.loadTexture("img/bump-large.jpg")), //does not work

    (material.bumpScale = 0.005),

    (material.specularMap = THREE.ImageUtils.loadTexture("img/large-nz-a.png")) ,//does not work

    (material.speculare = new THREE.Color("blue"));

  // Create a new mesh with sphere geometry.

  var mesh = new THREE.Mesh(sphere, material);

  // Add mesh to globe



  //create a new sphere for the overlay clouds

  var nuvole = new THREE.Mesh(

    new THREE.SphereGeometry(300, 80, 80),

    new THREE.MeshPhongMaterial({

      map: THREE.ImageUtils.loadTexture("img/clouds-large.jpg"), //does not work

      trasparente: true,



There is a typo. It should be transparent.

Same here. It’s specular.

This value is so low that you probably see no bump effect. I suggest you remove this line for now.

it was a translation problem, in the file it is written right, but the earth appears all black

Have you already added lights to your scene?

I hadn’t added it.
now I put the light like this:
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 3, 5);

but what I get is that the second sphere (which does not rotate like the first) completely covers the sphere below, because it is not transparent

Um, it’s seems this is the expected result if objects are opaque :man_shrugging:.