在Three.js里面导入glb/gltf 不受光材质的模型

最新推荐文章于 2024-06-01 09:53:03 发布
最新推荐文章于 2024-06-01 09:53:03 发布
阅读量3.1k 收藏 3
点赞数 2
分类专栏： Blender
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41022370/article/details/112247027
版权

在Three.js里面导入glb/gltf 不受光材质的模型

以带贴图的模型举例子，首先这次用的软件是一个国外的开源软件blender，因为它可以直接编辑glb模型并且可以对其进行一系列的操作。其实操作方法并不是很难，主要运用到的一个着色器就是“背景”如图
在这里插入图片描述

之后打开shading界面编辑模式，将材质图片拉到颜色栏，即可达到不受光的效果。最终效果图三
在这里插入图片描述
这里区别于普通的 原理化BSDF着色器，模型不会呈现任何受到光照之后的效果，但是可以调整透明度

南昌摩的教父
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Three.js - MeshLambertMaterial 用于暗淡不光亮表面的材质
ithanmang
08-07 4021
这种材质，可以创建看上去并不光亮（不具有光滑度）的表面，例如墙体等。该材质会对场景中的光源产生反应，并且该材质自身也会发出颜色，自身发出的颜色不受环境的影响。 示例：MeshLambertMaterial.html 基础材质中很多属性，它基本上都具有，不同的是，它具有一个自发光的属性emissive，可以设置自发光的颜色、强度、以及贴图属性。 它的color属性是漫反射的颜色，默认为白色。 ...
THREEJS导入glb,gltf可能不受环境光影响问题
u013470619的博客
05-26 897
对比建模的材质和在threejs创建的网格标准材质发现，你的模型没有材质的话，默认的金属度为1，而three创建的材质默认金属度为0，金属度过高导致看起来模型还是黑色。
探索3D模型的未来：gltf-viewer——高效直观的glTF查看器
最新发布
gitblog_00066的博客
06-01 1038
探索3D模型的未来：gltf-viewer——高效直观的glTF查看器 项目地址:https://gitcode.com/bwasty/gltf-viewer 项目介绍 在数字内容创作与渲染的世界中，glTF（OpenGL传输格式）作为新一代的3D模型文件标准，正逐渐成为业界的宠儿。而gltf-viewer正是这一领域的佼佼者——一个完全由Rust编写的强大glTF 2.0查看器。利用gltf-r...
threejs加载gltf模型
rui913的博客
02-23 1076
let loader = new GLTFLoader();/*实例化加载器*/ loader.load('models/gltf/MaterialsVariantsShoe/glTF/CeShi.gltf',function (obj) { // console.log(obj); obj.scene.scale.set(0.3,0.3,0.3) //模型大小缩放 // group.add(obj.sce...
threejs引入glb模型展示3d效果
古月水告的博客
10-25 1171
threejs引入glb模型展示
图形化开发（五）021-Three.js之材质——不受光影响-MeshBasicMaterial-同颜色&MeshNormalMaterial-方向不同颜色&LineBasicMaterial线条材质
weixin_44867717的博客
09-10 2129
图形化开发（五）03-Three.js之材质——不受光影响-MeshBasicMaterial-整个物体颜色一样&MeshNormalMaterial-方向不同自动改变颜色 & LineBasicMaterial线条材质 材质 这一节我们讲解一下模型的表现，也就是我们看到的模型的外观——材质。 简单的说就是物体看起来是什么质地。材质可以看成是材料和质感的结合。在渲染程式中，它是表面各可视属性的结合，这些可视属性是指表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。Three.j
three.js加载gltf模型
09-17
加载GLTF模型的关键在于创建一个Three.js的场景、相机和渲染器，然后使用GLTFLoader加载模型。以下是大致的步骤： 1. **初始化Three.js场景**：创建一个场景（Scene），这是3D世界的基础，所有3D对象都将放置在此...
Vue使用Three.js加载glTF模型的方法详解
10-15
主要给大家介绍了关于Vue使用Three.js加载glTF模型的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
ThreeJS加载glb模型实用案例
01-26
在Three.js中加载glTF模型，我们需要使用`THREE.GLTFLoader`。这个加载器是Three.js库的一部分，专门用于处理glTF格式的模型。以下是一个基本的加载流程： 1. **引入Three.js库**：在HTML文件中，你需要通过`...
基于高德地图 JS API2.0 加载GLTF3D模型的demo（配合three.js）.zip
05-18
在本项目中，我们主要探讨如何使用高德地图JavaScript API 2.0版本与three.js库结合，来加载和展示3D GLTF模型。高德地图API提供了丰富的地图交互功能，而three.js是一个广泛使用的JavaScript 3D库，用于在Web浏览器...
threejs 展示gltf模型加了环境光，全黑
tcmmx1993的博客
12-03 5260
首先确定是否是gltf格式出现原因： 使用glft viewer 确定gltf 能否展示https://gltf-viewer.donmccurdy.com/ 查看exposure是否为大于0的数，在webGLRender 中设置 查看emissive和emssiveMap: 如果使用环境光看到黑色（或者其他纯色），将emssive设置为material.color,如果有纹理，将纹理赋值给emssiMap。 var loader = new THREE.GLTFLoader(); loa.
three.js 模型材质变黑的以及背面消影问题
firefoxddk的博客
07-25 1093
three.js模型材质变黑的以及背面消影问题。
Three.js场景过暗
u014291990的博客
10-29 3507
Three.js场景过暗 如果你通过Three.js创建一个三维场景或者加载一个stl、obj、fbx等三维模型，可能会遇到整个场景非常暗情况，这一般和场景中的光源有关，如果光源强度过大，场景会太亮，如果光源强度过小，场景自然太暗。 光源设置 关于Three.js光源的设置，这里不详细解析，只简单说下思路，具体可以参考Threejs视频教程第5张的光照对象介绍。 Three.js提供了点光源Poi...
Blender Three.js 智慧3D机房开发 模型创建与导入中的常见问题与解决方案
qq_59060196的博客
03-17 4927
如果你遇到了在本文中没有出现的问题，欢迎评论或者私信我。
threejs封装加载 .glb 格式模型，修改贴图
前端
11-11 3474
threejs封装加载 .glb 格式模型，修改贴图
Three.js中导入GLTF模型变黑无法看到模型
simajinxiu的博客
08-22 7126
一个下午都在Three.js官网导入GLTF模型，但是很不幸，根据官网DEMO中一直待有texture纹理，不能单独载入模型，后经一番查找，发现其实早已经单独讲模型载入到网页中，但是模型与背景色均为黑色，无法判断是否成功加载，所以一直在如何加载模型的道路上越走越偏，之后后来加载一个带有坐标轴的模型后，发现坐标轴可以呈现，但是模型不见，可以约看到个模型大概轮廓，所以改变方向，解决模型显示黑色问题，随...
threejs 加载glb模型时无法定义模型材质，模型显示为黑色或者出现黑色闪烁的解放方法
Ttowx的博客
02-14 3510
threejs 导入glb自定义模型材质
Blender导出gltf格式ThreeJS不显示问题-
wv112406的博客
06-28 2172
ThreeJS不显示模型问题
three.js 轻量化glb模型 详细全过程
Bug1997的博客
09-08 3446
three.js glb轻量化 全过程
vue集成three.js,并加载glb、gltf、fbx、json模型
08-05
对于glb和gltf模型，可以直接使用GLTFLoader加载器。对于fbx模型，可以使用FBXLoader加载器。对于json模型，可以使用JSONLoader加载器。 4. 将加载的模型添加到场景中，并设置其位置、旋转、缩放等属性，以适应场景...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值