Three.js 和 React

Posted 2023-02-19

【中文标题】Three.js 和 React

【英文标题】：Three.js and React

【发布时间】：2020-12-15 20:26:44

【问题描述】：

我是 Three.js 的超级菜鸟，试图让它与 React 一起工作..

我一直在关注这篇中型文章 Starting with React 16 and Three.js in 5 minutes

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

https://threejs.org/examples/?q=snow#webgl_points_sprites https://github.com/mrdoob/three.js/blob/master/examples/webgl_points_sprites.html

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

我可能是错的，但它似乎没有加载雪花图片（？）。我的 sprite1 的 console.log 显示：image: undefined

我已经玩了几个小时了，我只能得到一个黑屏......

【参考方案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");

Click for working demo

【讨论】：

哇，谢谢，它在 vscode 中也不起作用。但是当我使用直接 URL 方法时，一切正常。