Three.js与反应

Question

我是Three.js的超级菜鸟，试着让它与反应一起工作。

我在关注这篇媒体文章https://blog.bitsrc.io/starting-with-react-16-and-three-js-in-5-minutes-3079b8829817

我试图在Three.js中复制这个示例：

精灵 sprites.html

我的密码箱：https://codesandbox.io/s/clever-sid-r7egd?file=/src/ThreeCanvas.js

我可能错了，但它似乎没有装载雪花图片(？)My console.log of sprite1显示:图像:未定义

我已经做了几个小时了，我只能得到一个黑色的屏幕.

Answer 1

这必须是CodeSandbox设置其本地文件结构的方式，因为如果您对Three.js示例图像使用直接的URL，则演示将按预期工作：

var threeFolder = "https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/sprites/";
var sprite1 = textureLoader.load(threeFolder + "snowflake1.png");
var sprite2 = textureLoader.load(threeFolder + "snowflake2.png");
var sprite3 = textureLoader.load(threeFolder + "snowflake3.png");
var sprite4 = textureLoader.load(threeFolder + "snowflake4.png");
var sprite5 = textureLoader.load(threeFolder + "snowflake5.png");

单击以获取工作演示