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 的人用更好的描述发表评论。