ThreeJS：纹理在调试中显示，但在正常模式下不显示

Question

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

• 原点处的立方体。
• XY 平面上的“地板”，它使用从图像加载的棋盘纹理。

如果我在调试模式（VS Code）下运行它，那么一切都很好，但如果我只运行 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加载完成回调，在纹理完成加载时创建地板，但没有任何区别。

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

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

你可以看到立方体被切成两半，所以网格在那里，但没有纹理。 帮助表示赞赏！

Answer 1

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

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

以下指南中有关此主题的更多信息。

https://threejs.org/docs/index.html#manual/en/introduction/How-to-run-things-locally