Threejs 與 React .. 幾何存在但未顯示

Question

誰能幫我這個代碼..？

它不能與 React 一起正常工作。 我想在燈光下展示球體。

這是我在沙箱中的代碼：

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

Answer 1

首先，您正在從沒有紋理（在聲明marsMaterial時）變為擁有它們（在TextureLoader運行之后）。 此更改需要通過調用marsMaterial.needsUpdate = true; . 請參閱“材料”下的此頁面。

其次，您需要重新檢查紋理的 URL。 在開發工具的“網絡”選項卡下查看它們表明它們響應的不是紋理，而是整個沙箱（CodeSandbox 處理 404 的方式）。

要更正紋理的加載，請在現有import語句之后為它們添加導入。 React 應用程序源中的文件位置與正在運行的應用程序中的 URL 不對應，因為正在運行的應用程序已被捆綁； 這些導入會導致文件與應用程序捆綁在一起。 ¹

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

然后，更改loader.load()調用以匹配。

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

最后，在你的材質上設置其他屬性后，添加一行來設置needsUpdate 。

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

哦，關掉你的燈，只是一根頭發。

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

1. 我知道，這是一種笨拙的描述方式； 我歡迎任何更熟悉 React 的人用更好的描述發表評論。