Threejs with React .. Geometry exists but not showing

Question

Could anyone help me with this code ..?

it's not working properly with React. I want to show the sphere under the light.

here is my code in the sandbox:

https://codesandbox.io/s/three-planet-fwkpx5?file=/src/ThreeMars.js

Answer 1

First, you're changing from not having textures (when marsMaterial is declared) to having them (after the TextureLoader runs). This change requires recompiling the shader program through a call to marsMaterial.needsUpdate = true; . See this page under "Materials."

Second, you need to re-check the URLs for your textures. Viewing them under the "Network" tab of the Dev Tools shows that they're responding not as the textures, but as your whole sandbox (which is how CodeSandbox handles a 404).

To correct the loading of the textures, add imports for them after your existing import statements. The file locations in a React app's source don't correspond to URLs in the running app, because the running app has been bundled; these imports cause the files to be bundled with the app. ¹

+   import marsDiffuse from "./assets/mars/mars-map.jpeg";
+   import marsBump from "./assets/mars/mars-bump.jpeg";

Then, change the loader.load() calls to match.

-   marsMaterial.map = loader.load("./assets/mars/mars-map.jpeg");
-   marsMaterial.bumpMap = loader.load("./assets/mars/mars-bump.jpeg");
+   marsMaterial.map = loader.load(marsDiffuse);
+   marsMaterial.bumpMap = loader.load(marsBump);

Finally, after setting the other properties on your material, add a line to set needsUpdate on it.

    ...
    marsMaterial.specular = new THREE.Color("#000000");
+   marsMaterial.needsUpdate = true;

Oh, and turn down your light, just a hair.

-   let light = new THREE.PointLight(0xffffff, 200, 5000);
+   let light = new THREE.PointLight(0xffffff, 1, 0, 2);    

1. This is a clumsy way to describe the matter, I know; I welcome anyone more familiar with React to comment with a better description.