Three.js模型在Vue中使用贴图，模型变黑的问题

已于 2023-04-11 10:33:53 修改
阅读量682 收藏
点赞数
分类专栏： three.js 文章标签： vue.js javascript 前端
于 2023-04-10 14:33:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57065653/article/details/130059131
版权

一般来说是贴图图片引入的问题

 

解决方法: 使用require

 这样就可以正常显示了

 要注意的是，require的使用方法，直接使用 require(src)会报错，使用`folder${src}` 或者"folder"+src,就可以了

EverGlowShan
关注
专栏目录
Three.js（0.165.0）入门到实战
郭宝的博客
08-20 3588
WebGL是一个图形库，WelGL给我们提供了很多 Javascript API ，用于在Web浏览器中呈现交互式3D和2D图形，而且无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 紧密相符合的API，可以在HTML5 的 元素中使用。WebGL给我们提供了一系列的图形操作接口，能够让我们通过 Javascript 去使用 GPU 来进行浏览器图形渲染。
Vue+Three.js，三维3d模型 虚拟人 glb gltf
南七小僧的学海无涯
11-29 2446
原因是设备的物理像素分辨率与CSS像素分辨率的比值的问题，我们的canvas绘制出来后图片因为高清屏设备的影响，导致图片变大，然而我们在浏览器的渲染窗口并没有变大，因此图片会挤压缩放使得canvas画布会变得模糊。该值也可以被解释为像素大小的比例：即一个CSS像素的大小相对于一个物理像素的大小的比值。渲染结果的横向尺寸和纵向尺寸的比值，这里我们使用的是 浏览器窗口的宽高比。透视相机用来模拟人眼所看到的景象，物体的大小会受远近距离的影响，它是3D场景的渲染中使用得最普遍的投影模式。
vue加载three模型成功，但显示黑屏？
空谷足音的博客
04-03 5161
遇到问题解决方案： 遇到问题：导入到场景内的模型无法查看，而且也没有报错 这种会有可能有多种情况造成的，一般情况下都是下面两种情况造成的： 1.模型太小或者太大，这种情况可以尝试放大一千倍或者缩小一千倍来查看效果。 2. 模型的位置太偏，根本不在相机照射范围内，这种问题我们可以将模型居中到相机照射的焦点位置看 获取模型的大小： // 获取模型大小 let box = new TH...
Three TextureLoader纹理贴图不显示图片（显示黑色）的原因分析
weixin_44166849的博客
06-03 1696
基于vue 导入图片 需要改成。第一种：导入的方式不对。第二种：物体材质不对。
Three.js中导入GLTF模型变黑无法看到模型
simajinxiu的博客
08-22 7368
一个下午都在Three.js官网导入GLTF模型，但是很不幸，根据官网DEMO中一直待有texture纹理，不能单独载入模型，后经一番查找，发现其实早已经单独讲模型载入到网页中，但是模型与背景色均为黑色，无法判断是否成功加载，所以一直在如何加载模型的道路上越走越偏，之后后来加载一个带有坐标轴的模型后，发现坐标轴可以呈现，但是模型不见，可以约看到个模型大概轮廓，所以改变方向，解决模型显示黑色问题，随...
3dmax导出的FBX加载到three.js后有黑色的处理参考
大英雄不该去雪山打滚
09-08 2250
这里写自定义目录标题场景处理方案其他提醒 场景 准备优化一下之前建的模型，重新建了一下，放到场景之后发现模型有的地方是黑色，而且还有看不到的，必须从另一个方向才能看到的问题，下图是黑色的问题，右为正确模型 处理方案 模型面没闭合，其实在3dmax里用“标准”模型查看模型的时候，就能看到黑色和不黑的 通过给边加“桥”把边连成面使面闭合 焊接多余的点，通过框选选择顶点，有些时候经过附加或者镜像，同一个位置会有多个点，这个应该是影响了面的方向，导致黑面 删除点和线时不能直接按delete，得点右键菜单里的删
Web3D项目中three.js加载FBX模型变黑和透明背景问题
挨T工作室的博客
03-19 8576
文章目录three.js加载模型添加关联的js文件初始化渲染器初始化场景初始化相机初始化操控插件模型加载动画和渲染FBX模型变黑问题设置透明背景THE END three.js加载模型        为了开头不显得那么生硬，这里我们先来看一下3D模型的加载。在three.js加载模型中，需要经历以下几个步骤。 添加关联的js文件 <script th:src="@{/web3d/js/three.js}"></sc
vue2项目中使用three.js开发三维IT机房
最新发布
幽幽谷
09-07 1646
vue2项目中使用three.js开发三维IT机房
THREE.js设置背景图和播放动画学习 | 大帅老猿threejs特训
m0_69753694的博客
01-08 1464
three.js入门之设置全景背景图和播放动画
Threejs进阶之十五：在Thereejs 使用自定义shader
九仞山的专栏
05-22 981
详细介绍了在Thereejs 如何使用自定义shader，重点介绍了ShaderMaterial的核心属性uniforms、vertexShader顶点着色器和fragmentShader片元着色器；并结合实例进行了详细的介绍
vue3中使用threejs加载fbx模型.zip
07-04
vue3中使用threejs加载fbx模型， 首先需要npm install three， 并且threejs场景正常
threejs导入模型为黑色原因
qq_44929535的博客
12-28 7329
【代码】threejs导入模型为黑色原因。
Vue3使用Three.js导入gltf模型并解决模型为黑色的问题
Heartsuit的博客
12-17 2664
Three.js 可以让我们在网页上创建交互式的 3D 图形和动画。它是一个强大的 JavaScript 库，可以帮助我们轻松地在浏览器中实现复杂的 3D 效果，而无需深入了解底层的 WebGL 技术。如果你需要在网页上展示 3D 内容或者构建交互式的3D体验， Three.js 是一个非常有用的工具。今天通过 Vue3.0 集成 Three.js 来实现对 gltf 模型的加载、渲染与操控，并设置模型背景为透明色，解决模型为黑色的问题。
使用three.js加载FBX模型时，模型有材质但显示为黑色
hhuangjinfeng的博客
01-04 1760
使用three.js加载FBX模型时，模型有材质但显示为黑色的部分解决方案：
three.js材质纹理显示不出来（显示黑色）
Z_Gleng的博客
12-14 1498
【代码】three.js材质纹理显示不出来（显示黑色）
关于 threejs 加载fbx 材质是黑色 没有贴图 的问题
热门推荐
ljason1993的博客
06-04 1万+
材质是黑色的原因不是丢贴图,也不是颜色错了,而是发光通道的问题,默认用的材质MeshPhongMaterial 或者fbx自己有指定 MeshLambertMaterial 这时候我也不知道为什么如果不开发光通道你的材质就会黑.... 把发光颜色 强度 贴图 都换掉 直接贴代码 function _ChangeMaterialEmissive(parent) { ...
three js 报错， 贴图黑乎乎
cvper's world !
09-26 1470
情景： 想给一个平面 plane 进行贴图， 进行下面的操作，想把一张图片贴在plane上面； var planeMaterial = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('./blue.jpg') } );   问题： 执行之后，plane 一片黑乎乎的，没有成功，查看控制台，已经报错了，信...
three.js-解决外部模型太暗的问题
zyf_baby的博客
07-25 1341
three.js-解决外部模型太暗的问题
【threejs】render方法，渲染区域为黑色
qq_44408319的博客
01-12 610
renderer.render(scene, camera)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值