three.js中texture的load加载geoserver的数据失败

在vue项目中通过three.js的textureLoad.load加载geoserver的数据，load的onload方法和onerror方法都不执行。控制台也没有报错，也没有渲染出数据，

img


已经在vite脚手架下配置了反向代理来解决geoserver的跨域问题。

img

该回答内容部分引用GPT，GPT_Pro更好的解决问题
你的问题可能是由于浏览器的安全性问题导致的，浏览器会阻止加载来自不同源的文件，所以当你尝试加载geoserver的数据时，浏览器会拦截这个请求，导致onload和onerror方法都不执行。

要解决这个问题，可以在服务端配置CORS（Cross-Origin Resource Sharing），用来允许来自不同域的浏览器请求。

首先，在geoserver的web.xml文件中添加一个CORS过滤器：

<filter>
  <filter-name>CORS</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CORS</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

然后重启geoserver服务。这样就可以允许所有域进行跨域请求。

最后在vue项目中引入three js库，并使用textureLoad .load加载geoserver的数据：

let loader = new THREE.TextureLoader();
let texture = loader.load(url, (texture) => { // 成功回调函数
    // do something...
}, undefined, ( error ) => { // 失败回调函数
    console.error( 'An error happened.' );
});

如此就可以正常加载geoserver的数据了。
如果回答有帮助，望采纳。

以下答案基于ChatGPT与GISer Liu编写：
可能有几个原因导致你的问题：

  • 路径错误：请检查你加载的纹理路径是否正确。在加载纹理时，使用的路径必须是正确的。确保你的路径是指向你的纹理的正确路径，可以通过在浏览器中手动尝试加载该纹理来验证路径是否正确。

  • 跨域问题：如果你的纹理位于另一个域名下，那么你可能会遇到跨域问题。跨域请求需要服务器支持CORS，你需要在你的服务器端配置CORS来解决这个问题。

  • 数据格式问题：请确保你的纹理数据是有效的图片格式。常见的图片格式包括：PNG、JPG、JPEG等。如果你的数据不是有效的图片格式，加载器可能无法正确加载纹理。

  • 加载器问题：如果以上步骤都没有解决你的问题，请检查加载器是否正确工作。在three.js中，有多个加载器可用于加载不同类型的数据，例如：TextureLoader、JSONLoader、OBJLoader等。你需要确保你正在使用正确的加载器来加载你的纹理数据。

你可以通过在控制台中输出错误信息来进一步排查问题。例如，在加载纹理时添加以下代码，可以在控制台中输出错误信息：

textureLoader.load(url, function(texture) {
  // 纹理加载成功
}, function(xhr) {
  console.log('An error happened');
  console.log(xhr);
});

这将允许你在控制台中查看任何可能的错误消息，以帮助你找出问题所在。

请复制代码到评论区谢谢

题主，textureLoader.load里的URL 用双引号括起来。

textureLoader.load("http://localhost:5173/api/geoserver/gwc/service/wmts?layer=workshop:zhuozi&style=&tilematrixset=EPSG:900913x2&Service=WMTS&Request=GetTile&Version=1.0.8&Format=image/png&TileMatrix=EPSG:900913x2:{z}&TileCol={y}&TileRow={x}", (texture) =>

如果还有问题，建议使用浏览器开发者工具检查网络请求是否发送成功，是否返回正确的数据。
如果对您有帮助，请给与采纳，谢谢。

看下这个实例：JavaScript 页面资源加载方法onload，onerror总结，链接：https://blog.csdn.net/LuckyWinty/article/details/114650252

可能是因为textureLoad.load方法返回的是一个Promise对象，可以尝试使用async/await或者.then()方法获取结果并查看返回的结果：

import * as THREE from 'three';

const textureLoader = new THREE.TextureLoader();

async function loadTexture() {
  const texture = await textureLoader.loadAsync('http://localhost:8080/geoserver/wms?service=WMS&version=1.1.0&request=GetMap&layers=test:layer&styles=&bbox=139.7994,35.7101,139.8246,35.7253&width=512&height=512&srs=EPSG:4326&format=image%2Fpng');
  console.log(texture);
}

loadTexture();