# Bump texture issue

**URL:** <https://discourse.threejs.org/t/bump-texture-issue/26280>\
**Category:** Questions\
**Tags:** bump-maps\
**Created:** [May 15, 2021, 7:36am UTC](https://discourse.threejs.org/t/bump-texture-issue/26280 "2021-05-15T07:36:25Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![lorra](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lorra/32/18233_2.png) [@lorra](https://discourse.threejs.org/u/lorra)\
**Post date:** [May 15, 2021, 7:36am UTC](https://discourse.threejs.org/t/bump-texture-issue/26280/1 "2021-05-15T07:36:25Z")

</div>

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:

```javascript
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);

```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 15, 2021, 7:54am UTC](https://discourse.threejs.org/t/bump-texture-issue/26280/2 "2021-05-15T07:54:09Z")

</div>

> [@lorra](#):
>
> `trasparente: true,`

There is a typo. It should be `transparent`.

> [@lorra](#):
>
> `(material.speculare = new THREE.Color("blue"));`

Same here. It’s `specular`.

> [@lorra](#):
>
> `(material.bumpScale = 0.005),`

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

---

<div class="post-metadata">

**Author:** ![lorra](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lorra/32/18233_2.png) [@lorra](https://discourse.threejs.org/u/lorra)\
**Post date:** [May 15, 2021, 8:36am UTC](https://discourse.threejs.org/t/bump-texture-issue/26280/3 "2021-05-15T08:36:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 15, 2021, 8:55am UTC](https://discourse.threejs.org/t/bump-texture-issue/26280/4 "2021-05-15T08:55:58Z")

</div>

Have you already added lights to your scene?

---

<div class="post-metadata">

**Author:** ![lorra](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lorra/32/18233_2.png) [@lorra](https://discourse.threejs.org/u/lorra)\
**Post date:** [May 15, 2021, 9:41am UTC](https://discourse.threejs.org/t/bump-texture-issue/26280/5 "2021-05-15T09:41:41Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/b/dbfecfcda166858702185318796f29c21b8a937a.jpeg)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 15, 2021, 2:17pm UTC](https://discourse.threejs.org/t/bump-texture-issue/26280/6 "2021-05-15T14:17:14Z")

</div>

> [@lorra](#):
>
> 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 🤷‍♂️.