本地html三.js如何解决CORS问题？

Question

我一直在尝试用 Three.js 制作一个带有图像纹理但没有服务器的球体，我的意思是我只是在学习，我只是想使用 vs 代码，但是它提供了本地图像或在线 https 图像这个错误：

Access to image at 'file:///C:/Users/***/...../***/sun.jpg' from origin 'null' has been blocked by

CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app,

chrome 扩展、chrome、https、chrome 不受信任。

GET file:///C:/Users/...../sun.jpg net::ERR_FAILED

这里是我使用的代码：

const geometry = new THREE.SphereGeometry(5, 32, 32);

const cargador = new THREE.TextureLoader().load("sun.jpg");

const cargaTextura = new THREE.MeshBasicMaterial({

map: cargador

});

const sphere = new THREE.Mesh(geometry, material);

scene.add(sphere);

我不是专业程序员，所以如果有人能解释一切那就太好了感谢您的帮助。

Answer 1

浏览器限制从本地文件系统加载文件。

您有多种选择：

您可以使用express、nginx等网络服务器来提供图像......
使用云存储桶并通过URI访问它
您可以将图像转换为base64或其他东西并直接显示它通过执行
```
new THREE.TextureLoader().load(yourBase64string)
```