three.js textureLoader加载图片失败

已于 2022-11-30 14:14:22 修改
阅读量5.3k 收藏 5
点赞数 1
分类专栏： 生命不息，填坑不止 文章标签： javascript 前端 开发语言
于 2021-05-11 10:28:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38280242/article/details/116643969
版权

textureLoader无法加载图片


three.js的坑真的不是一般的多，关键是使用者还少，面向百度谷歌编程根本搜不到类似案例。
博主在使用three.js中的textureloader，加载本地图片失败，加载网络图片跨域错误。基本无解。

搜索之后发现一篇神文

解决方案

注：源码行数因版本不同会有不同，尽量搜索有关textureloader的关键字来查找，比如

	THREE.TextureLoader.prototype

在这里插入图片描述

修改图示中标记的行

星海拾遗
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
three.js纹理添加跨域问题：No 'Access-Control-Allow-Origin' header is present on the requested resource.
weixin_44775117的博客
09-25 720
前言 在调试上一个示例时发现，添加本地图片作为纹理映射时，实际物体总是展示位黑色。在用VScode进行html调试时发现错误 然后寻找解决方法时，有人说创建一个本地服务器，用node.js搭建一个简单的服务器或者用Apache搭建一个本地服务器。刚开始用node.js搭建了本地服务器，也能读取本地的文件，然后将纹理应用的图片放在本地服务器上，但是打开html还是原来的问题。然后下载了Apache...
three.js加载obj+mtl文件源码
03-21
在三维图形渲染领域，Three.js 是一款非常流行的 JavaScript 库，它使得在浏览器中创建复杂的3D场景变得简单。本教程将深入探讨如何使用 Three.js 加载 obj 和 mtl 文件，以及如何为 obj 模型添加纹理。 首先，我们...
Three.js THREE.TextureLoader() 纹理加载
热门推荐
qq_40897124的博客
03-18 1万+
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); re...
Three.js-实现加载图片并旋转
最新发布
m0_62785037的博客
06-02 640
Three.js中加载图片时，你可以使用THREE.TextureLoader类。这个类可以帮助你加载图像文件，并创建一个纹理对象，你可以将这个纹理应用到材质上。
Vue3 THREE.TextureLoader()加载图片失败
请叫我欧皇！的博客
06-15 1208
问题：使用three开发的时候，想要添加图片环境纹理这些，结果发现一直引入不进去，使用require也报错，这边有俩种解决方法，怕忘记，记录一下。
three.js 贴图为图片时跨域问题
Amos_luoye的博客
03-15 7759
解决three.js 跨域图片无法贴图问题，报错code：DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.
Threejs加载纹理的时候显示跨域，解决方法
lmzstree的博客
07-17 721
先看看自己的vscode里，下载了live-serve的插件没有，没有下载的话，就去下载然后打开方式是openinlive-serve打开。
three.js中CubeTextureLoader()天空盒效果加载不出
weixin_48736508的博客
04-27 559
找了好久问题，代码没问题但黑屏加载不出，立方体！所用背景图片宽高要一致！
three.js的室内地图展示
05-21
将地图图像贴到3D模型表面，可以使用TextureLoader加载图片并应用到Material上。 5. **相机设置**：为了模拟用户视角，我们需要配置Camera对象，如设置视口大小、位置和方向。在室内地图应用中，可能还需要实现相机...
使用THREE.js加载obj文件
10-25
<script src="https://threejs.org/build/three.min.js"> ``` 然后，创建一个WebGL渲染器、场景和相机，这是所有THREE.js应用的基础： ```javascript var scene = new THREE.Scene(); var camera = new THREE....
three.js实现3D全景看房
10-23
可以使用THREE.ObjectLoader或者THREE.TextureLoader来加载模型和纹理。 4. 加载模型和纹理： ```javascript const loader = new THREE.GLTFLoader(); loader.load('house.gltf', function(gltf) { scene.add(gltf...
Universal Image Loader加载本地图片
08-21
Universal Image Loader加载本地图片，GridView布局，GridView中有CheckBox，解决CheckBox错乱的问题。
ogl-basis-texture-loader:将Threejs BasisTextureLoader修改为OGL
04-16
ogl基础纹理加载器 将Threejs BasisTextureLoader修改为 用法 :warning: 将base-transcoder目录复制到您的公共目录。 // import import { Renderer } from "ogl" ; import { BasisTextureLoader } from "./basis-texture-loader" ; BasisTextureLoader . setTranscoderPath ( "you-public-directory/transcoder" ) ; // create const renderer = new Renderer ( ) ; const basisLoader = new BasisTextureLoader ( renderer . gl ) ; // load const texture = awai
three.js天空盒资源
01-12
3. **加载纹理**：利用`THREE.TextureLoader`加载天空盒的六个面的图像，然后创建`CubeTexture`对象，将加载的纹理传入。 4. **创建材质**：创建一个`MeshBasicMaterial`或`MeshCubeMaterial`，并设置其`map`属性为...
threejs加载纹理图跨域
weixin_46352558的博客
08-03 1901
threejs加载纹理图报错Failed to execute 'texImage2D' on 'WebGL2RenderingContext': The image element contains cross-origin data, and may not be loaded
可跨域加载图片并截图的Loader类
沙漠之泉
10-09 1159
默认情况下Loader可以跨域加载图片的，但是由于安全沙箱的问题不能draw。 一直都用URLStream把图片以二进制方式加载后，再用Loader的方法来绕开这个安全沙箱问题，直到最近才发现这也仅适用于所加载的图片拥有一个可访问的策略文件的情况下。 如果加载的图片根
AS3跨域加载图片时设置LoaderContext类
hereson
03-27 135
今天碰到的小问题，AS2加载外部图片从来没这么麻烦过...OK，认了。跨域加载外部图片除需要设置crossdomain外，还需要在loader.load()方法添加context参数，文档显示context参数为LoaderContext 类： load(request:URLRequest, context:LoaderContext = null):void When loadi...
ThreeJS 跨域
guzicheng1990的博客
05-22 1821
环境 ThreeJS 107版本 three.min.js 说明 给地球贴图片材质时，发现报错图片跨域了。 解决方案 方案一 网上找到方法修改threejs.module.js文件中的ImageLoader.prototype 参考原文地址：https://blog.csdn.net/qq_41923622/article/details/103756549 在return之前加上image.crossOrigin=’’ 方案二 方案一是用源码的情形下，我这是直接用的压缩包three.mi.
threejs 加载纹理图片时报304跨域
mao0523的博客
02-25 697
threejs 加载纹理图片时报304跨域
three.js加载图片
07-28
在three.js中加载图片可以使用TextureLoader类。TextureLoader是three.js中用于加载纹理的工具类。你可以使用它来加载各种类型的图片文件，如jpg、png等。加载图片的代码示例如下： ```javascript // 创建一个TextureLoader实例 var textureLoader = new THREE.TextureLoader(); // 加载图片 textureLoader.load('path/to/image.jpg', function(texture) { // 图片加载完成后的回调函数 // 可以在这里将纹理应用到你的模型上 var material = new THREE.MeshBasicMaterial({ map: texture }); // ... }); ``` 在上面的代码中，我们首先创建了一个TextureLoader实例，然后使用load方法加载图片。load方法接受两个参数，第一个参数是图片的路径，第二个参数是加载完成后的回调函数。在回调函数中，你可以将加载的纹理应用到你的模型上。 请注意，加载图片的路径应该是相对于你的HTML文件的路径。如果图片和HTML文件在同一个目录下，可以直接使用图片的文件名作为路径。如果图片在其他目录下，需要提供相对于HTML文件的路径或者绝对路径。 希望这个回答对你有帮助！\[1\] #### 引用[.reference_title] - *1* [three.js加载3D模型(glb/gltf/fbx)](https://blog.csdn.net/DP323/article/details/116790186)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值