threejs 加载glb模型时无法定义模型材质，模型显示为黑色或者出现黑色闪烁的解放方法

最新推荐文章于 2024-06-23 16:35:00 发布
最新推荐文章于 2024-06-23 16:35:00 发布
阅读量3.5k 收藏 4
点赞数 2
文章标签： 材质 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ttowx/article/details/129028711
版权

对导入的glb/gltf进行遍历，为其mesh对象的geometry属性添加 child.geometry.computeVertexNormals();即可
原因：glb格式的模型，默认是去掉了法向量的数据的，所以环境光跟平行光作用不到模型上面
(详细说明请看：http://blog.hubwiz.com/2021/07/17/three-js-modeling-tutorial/)
在这里插入图片描述

橘子柿子Coox
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
threejs修改载入的glb模型颜色
九段刀客的博客
01-29 1097
【代码】threejs修改载入的glb模型颜色。
three.js材质纹理显示不出来（显示黑色）
Z_Gleng的博客
12-14 1354
【代码】three.js材质纹理显示不出来（显示黑色）
Three.js加载glb模型（持续更新）
qq_45020145的博客
06-18 738
使用three.js加载glb模型
关于three.js导入obj模型是黑色的问题解决
最新发布
weixin_56615053的博客
06-23 633
介绍three.js导入obj模型为黑色的解决方法。
Threejs gltf/glb模型加载成功但是变成黑色
哈米西的博客
11-28 4003
threejs项目中gltf/glb模型成功加载但是模型渲染成黑色、渲染不出来、加载失败
Three.js中导入GLTF模型变黑无法看到模型
simajinxiu的博客
08-22 7168
一个下午都在Three.js官网导入GLTF模型，但是很不幸，根据官网DEMO中一直待有texture纹理，不能单独载入模型，后经一番查找，发现其实早已经单独讲模型载入到网页中，但是模型与背景色均为黑色，无法判断是否成功加载，所以一直在如何加载模型的道路上越走越偏，之后后来加载一个带有坐标轴的模型后，发现坐标轴可以呈现，但是模型不见，可以约看到个模型大概轮廓，所以改变方向，解决模型显示黑色问题，随...
three.js 加载GLB模型的时候无法显示纹理，模型只有黑色
qq_17627195的博客
08-21 1569
使用three加载GLB模型，加载出来以后，模型为黑色，没有纹理。但是用win10系统直接打开模型的时候，是有纹理和颜色的。降低three版本，我当前使用的是155版本，降低为146版本以后，就可以正常显示了。这里记录一下，刚开始做three，可能还有其他解决方法。
babylon导出glb/gltf格式模型出现黑色
a937325763的博客
04-21 982
有时候导出遇到模型出现黑色，其他模型没问题，这种问题的其中一个原因是模型的顶点颜色导致的。
three.js导入 glb模型颜色变暗
宏斌的博客
01-18 6439
渲染器加 renderer.outputEncoding = THREE.sRGBEncoding; 纹理加 /** * Textures */ const bakedTexture = textureLoader.load('baked.jpg') bakedTexture.flipY = false bakedTexture.encoding = THREE.sRGBEncoding
threejs加载glb模型变黑
weixin_42959900的博客
02-28 1545
threejs加载模型变黑的解决办法。
ThreeJS加载glb模型实用案例
01-26
本篇文章将深入探讨如何使用Three.js加载glTF（GL Transmission Format）格式的3D模型，特别是一个名为"gltfForRock2022.1.24"的glTF模型文件。 首先，理解glTF是什么至关重要。glTF是一种开放标准的3D模型格式，...
Threejs显示glb模型线框效果
05-17
本例子加载glb文件，显示一个房子的模型的线框。 用traverse遍历模型里的所有子对象，如果是网格对象用child.material.wireframe = true;使其显示线框。 相关技术英文网站搜索关键字：three.js model wireframe
Three.js 给obj模型添加材料纹理的样例
01-15
Three.js 给obj模型添加材料纹理的样例，鼠标左键可以围绕中心点对3d物体进行旋转和缩放
Vue使用Three.js加载glTF模型的方法详解
10-15
主要给大家介绍了关于Vue使用Three.js加载glTF模型的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
threejs操作glb，gltf格式3D模型案例，包含点击部位高亮操作
08-24
threejs操作glb，gltf格式3D模型案例，包含点击部位高亮操作，控件提示等，也可直接引入到vue项目中使用
three官网glb模型.rar
06-11
【标题】"three官网glb模型.rar" 是一个包含3D模型资源的压缩包，源自three.js官方网站。Three.js是一个非常流行的JavaScript库，用于在Web浏览器中创建和展示3D图形。GLB是3D模型的一种高效、统一的文件格式，它...
threejs加载模型材质失效解决方案
weixin_43336525的博客
05-11 1428
当我们在threejs中使用loader方法，加载已经绘制好的三维模型。在三维建模软件中，我们可以看到三维模型有材质贴图，但当使用threejs加载时，材质呈现黑色或者与原有材质相差很大。
threejs中gltf模型出现的问题(黑色，颜色不协调，太小)和解决方案
weixin_38441229的博客
08-14 1373
如下图实现效果。
three.js学习笔记(十八)——调整材质
hongsir的博客
08-09 4887
修改three.js内置材质
threejs加载glb模型
06-06
### 回答1： Threejs是一款基于WebGL渲染引擎的JavaScript库，它可以在web端展示3D模型，其中加载glb模型是其中一种常见方式。 首先，需要在html文件中引入threejs的js文件和相关加载器 。然后，创建一个场景、相机和渲染器。接着，使用GLTFLoader加载glb模型。代码如下： ```javascript <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script> <script src="https://cdn.rawgit.com/mrdoob/three.js/r68/examples/js/loaders/GLTFLoader.js"></script> <script> var scene = new THREE.Scene(); // 创建场景 var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000); // 创建相机 var renderer = new THREE.WebGLRenderer(); // 创建渲染器 renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var loader = new THREE.GLTFLoader(); // 创建glb loader loader.load('model.glb', function(glb){ // 加载glb模型 // 添加模型到场景中 scene.add(glb.scene); }, function(xhr){ console.log((xhr.loaded / xhr.total * 100) + '% loaded'); // 显示加载进度 }, function(error){ console.log(error); // 加载出错显示错误信息 }); </script> ``` 通过以上代码可实现加载glb模型并展示在web页面中。同时，threejs提供丰富的API，可以调整模型的位置、旋转角度、材质等属性，满足不同的交互需求。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值