three.js 解决加载gltf格式模型纹理贴图和原图不一样问题

最新推荐文章于 2023-08-14 18:13:00 发布
最新推荐文章于 2023-08-14 18:13:00 发布
阅读量1.6k 收藏 2
点赞数
文章标签： javascript css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47133092/article/details/125290487
版权 
renderer.outputEncoding = THREE.sRGBEncoding;

城永
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue使用Three.js加载glTF模型的方法详解
10-15
主要给大家介绍了关于Vue使用Three.js加载glTF模型的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
基于高德地图 JS API2.0 加载GLTF3D模型的demo（配合three.js）.zip
05-18
基于高德地图 JS API2.0 加载GLTF3D模型的demo（配合three.js）.zip
threejs加载GLTF示例
10-14
threejs使用版本117,GLTF文件是通过revit的接口导出，在model目录下，e'xample目录为threejs的源码目录，很多文件是用不到的，这里没有摘除。
Three.js中导入gltf格式的模型并给gltf模型添加贴图
it_bird1999的博客
04-20 5242
Three.js加载gltf格式模型
ThreeJs 学习踩坑
半个脑子的博客
11-12 630
因为renderer.setSize(window.innerWidth / window.innerHeight);看了一上午都没找到问题，一度怀疑是编辑器坏了.真难受…一个非常简单的创建场景的片段，运行后啥都没有，啥操作都没显示。1.有个错误找了一上午…
threejs给gltf模型贴图出现纹理错乱，贴图歪曲解决办法
LJR_BLOG的博客
01-05 4102
threejs给gltf模型贴图出现纹理错乱，贴图歪曲解决办法
threejs 加载glb模型时无法定义模型材质，模型显示为黑色或者出现黑色闪烁的解放方法
Ttowx的博客
02-14 3278
threejs 导入glb自定义模型材质
three.js 模型实现动态切换纹理贴图
qq_37656005的博客
03-29 5708
three.js 模型实现动态切换纹理贴图 如果按照下图官网这种写法，会报错“Texture marked for update but image is undefined”， const texture = new THREE.TextureLoader().load( "textures/water.jpg" ); 原因是：纹理加载是异步的。需要将大部分代码放入加载器回调函数中，所以采取下面这种写法把改变纹理的代码放在回调函数中 /**obj: 代表3d模型**/ /**map: 代表图片地址**
threejs 模型加载后在场景中看不到
weixin_44809409的博客
04-25 4345
threejs 模型加载后在场景中看不到
three.js加载gltf模型
09-17
three.js加载gltf模型的完整demo，使用vue开发的，比较简单，便于理解
threejs引入glb模型展示3d效果
古月水告的博客
10-25 1126
threejs引入glb模型展示
three.js 背景贴图有点失真
pgLi
10-21 2997
原因：图片规格（长和宽大小）不是2ⁿ。非2的幂次方贴图在WebGL的支持是有限的。显卡渲染的要求也是2ⁿ，图片最好是2ⁿ的。 如果想正常渲染非2ⁿ图像，可以参考https://www.khronos.org/webgl/wiki/WebGL_and_OpenGL_Differences ...
Three.js 导入模型demo分析（随笔记）
Dyz_397的博客
02-02 2453
Three.js导入模型glf分析
three.js canvas做为纹理贴图需要注意的点
qq_39503511的博客
06-13 1909
canvas做为纹理贴图需要注意的点概述代码 概述 在使用three.js开发的过程中，我们常常使用canvas来作为纹理贴图。但最后的效果总会被压缩或者模糊，这是由于什么原因造成的呢，这篇文章我们就来实际测试一下 代码 首先我们先创建一个canvas,宽高为1024，512 let canvas = document.createElement("canvas"); canvas.width = 1024; canvas.height = 512; let c = canva
Blender Three.js 智慧3D机房开发 模型创建与导入中的常见问题与解决方案
qq_59060196的博客
03-17 4414
如果你遇到了在本文中没有出现的问题，欢迎评论或者私信我。
threejs中gltf模型出现的问题(黑色，颜色不协调，太小)和解决方案
最新发布
weixin_38441229的博客
08-14 1145
如下图实现效果。
Three.js中的几种贴图效果
地理信息技术杂谈 博客，欢迎技术交流
03-15 2978
Three.js中通过给物体对象设置不同纹理，达到不同的显示效果，本篇通过效果图，简单的介绍几种纹理效果。 普通贴图 作用在物体上，显示图片的本身效果，three.js上设置的方式： const texture = new THREE.TextureLoader().load(贴图路径); let material = new THREE.MeshBasicMaterial(); material.map = texture; 凹凸贴图 作用在物体上，具有凹凸的效果，three.js上设置的方式： con
threejs-纹理贴图
qq_37987033的博客
09-03 4307
threejs中的纹理贴图效果详述
vue中使用three.js加载gltf，但是模型自带的材质加载不出来
06-01
在使用three.js加载gltf模型时，可能会遇到模型自带的材质加载不出来的问题，这可能是因为模型的材质格式不被three.js所支持。解决这个问题的方法是将模型的材质转化为可以被three.js所识别的材质格式。你可以使用GLTFLoader加载模型后，通过遍历模型的材质数组，将每个材质转化为对应的three.js材质类型，例如THREE.MeshBasicMaterial、THREE.MeshLambertMaterial、THREE.MeshPhongMaterial等。具体的实现可以参考以下代码示例： ```javascript var loader = new THREE.GLTFLoader(); loader.load( 'model.gltf', function ( gltf ) { gltf.scene.traverse( function ( child ) { if ( child.isMesh ) { for ( var i = 0; i < child.material.length; i ++ ) { var material = child.material[ i ]; if ( material.isGLTFSpecularGlossinessMaterial ) { material = THREE.MeshStandardMaterial().copy( material ); } else if ( material.isGLTFMaterial ) { material = THREE.MeshStandardMaterial().copy( material ); material.map = null; material.lightMap = null; material.aoMap = null; material.emissiveMap = null; material.bumpMap = null; material.normalMap = null; material.displacementMap = null; material.roughnessMap = null; material.metalnessMap = null; } material.needsUpdate = true; child.material[ i ] = material; } } } ); scene.add( gltf.scene ); }, undefined, function ( e ) { console.error( e ); } ); ``` 在这个示例中，我们通过遍历模型的材质数组，将每个材质转化为THREE.MeshStandardMaterial类型，这是three.js中支持的一种材质类型。如果你的模型不支持这种材质类型，你可以根据你的模型选择其他的材质类型。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值