Bump texture issue

Questions
1

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(

    EARTH_RADIUS,

    EARTH_SEGMENTS,

    EARTH_RINGS

  );

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

  earth.add(mesh);

  scene.add(earth);

  //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,

    })

  );
scene.add(nuvole);
2

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.

3

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

4

Have you already added lights to your scene?

5

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

image
image1197×927 72.3 KB

6

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