Javascript ThreeJS:Texture在调试时显示，但在正常模式下不显示

我正在学习ThreeJS（和JavaScript），目前正在创建一个包含2个网格的场景：

• 猎户座的立方体
• XY平面上的“地板”，使用从图像加载的棋盘纹理

如果我在调试模式（VS代码）下运行它，那么一切都很好，但是如果我只运行index.html，那么“地板”的纹理就不会加载（参见下面的图片）

以下是创建地板的相关代码示例：

const textureLoader = new THREE.TextureLoader();
const floorTexture = textureLoader.load('img/checkerboard.jpg');
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set(2,2);
const floorMaterial = new THREE.MeshBasicMaterial({ map: floorTexture, side: THREE.DoubleSide });
const floorGeometry = new THREE.PlaneGeometry(100, 100, 1, 1);
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
scene.add(floor);

注意：我确实尝试了

TextureLoader

LoadFinished回调，在纹理加载完成时创建地板，但没有任何区别

这是在调试中运行时显示的内容，从VS代码运行（不介意它是旋转的）：

但是，如果直接从文件资源管理器启动index.html，则可以看到以下内容：

您可以看到立方体被切成两半，因此网格在那里，但没有纹理。谢谢你的帮助

但是，如果直接从文件资源管理器启动index.html，则可以看到以下内容：

如果从外部文件加载模型或纹理，由于浏览器的同源策略安全限制，从文件系统加载将失败，并出现安全异常。解决此问题的最佳解决方案是在本地web服务器上运行内容

有关此主题的更多信息，请参见以下指南

---

THREE的哪个版本？@manthrax应该是当前最新的r113，但问题现在已经解决了！谢谢，修好了！我知道这很可能是因为我对web开发缺乏了解，而不是代码本身！