Three.js中导入GLTF模型变黑无法看到模型

一个下午都在Three.js官网导入GLTF模型,但是很不幸,根据官网DEMO中一直待有texture纹理,不能单独载入模型,后经一番查找,发现其实早已经单独讲模型载入到网页中,但是模型与背景色均为黑色,无法判断是否成功加载,所以一直在如何加载模型的道路上越走越偏,之后后来加载一个带有坐标轴的模型后,发现坐标轴可以呈现,但是模型不见,可以约看到个模型大概轮廓,所以改变方向,解决模型显示黑色问题,随后发现了https://blog.csdn.net/qq_35377699/article/details/83539581 这哥们的文章,解决我的大问题,解决方法:

出现原因分析
首先确定是否是gltf格式出现原因:
使用glft viewer 确定gltf 能否展示
查看exposure是否为大于0的数,在webGLRender 中设置
查看emissive和emssiveMap:
如果使用环境光看到黑色(或者其他纯色),将emssive设置为material.color,如果有纹理,将纹理赋值给emssiMap。

那对事实胜于雄辩,我们来对比下效果

调整前的模型效果如下:

通过圈住的部分可以推测出确实模型加载成功,但是现实为黑色,

调整后的模型效果如下:

若是纠结深层原因,请到这里https://blog.csdn.net/qq_35377699/article/details/83539581

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在uniapp微信小程序使用three.js导入gltf模型包,你可以按照以下步骤进行操作: 1. 将gltf模型文件放置在uniapp项目的静态资源目录,比如`static/models`。 2. 在uniapp页面或组件的js文件引入three.js库和GLTFLoader。 ```javascript import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; ``` 3. 创建一个canvas元素作为渲染器的渲染目标。 ```html <template> <canvas id="canvas"></canvas> </template> ``` 4. 在mounted钩子函数编写加载和渲染模型的代码。 ```javascript mounted() { const canvas = document.getElementById('canvas'); const renderer = new THREE.WebGLRenderer({ canvas }); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000); camera.position.z = 5; const loader = new GLTFLoader(); loader.load('../../static/models/model.gltf', (gltf) => { const model = gltf.scene; scene.add(model); // 设置模型的初始位置、旋转等属性 model.position.set(0, 0, 0); model.rotation.set(0, 0, 0); model.scale.set(1, 1, 1); }); function animate() { requestAnimationFrame(animate); // 更新模型、相机等状态 renderer.render(scene, camera); } animate(); } ``` 请确保将`../../static/models/model.gltf`替换为你实际的模型文件路径。 这样,当页面或组件加载后,就会渲染gltf模型在canvas上。 希望对你有所帮助!如有其他问题,请继续提问。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值