three.js,透明模型能够遮挡可见模型
·
本人在开发眼镜试戴的AR项目中,遇到一个问题:当脸部转动的时候,眼镜镜教部分会直接盖在脸上,使得试戴体验并不好。翻阅很多资料后发现,可以通过透明模型遮挡的方法来遮住镜脚。说白点就是在场景中放置一个人头模型,人头跟着脸部旋转,这样,旋转切换模型的时候,镜脚如果被人头模型遮住,镜脚就不会被渲染。
如此,假如glasses为眼镜,head为人头。
glasses模型需要遍历一下所有的mesh并设置renderOrder的值大于0,使其能够先于透明模型(head)被渲染(模型默认的renderOrder = 0);
glasses.traverse(function (obj) {
if (obj.type === 'Mesh') {
obj.renderOrder = 1;
}
})
随后再调整head如下
head.traverse(function (obj) {
if (obj.type === 'Mesh') {
obj.material.colorWrite = false; // 重点是这段代码
obj.material.side = THREE.DoubleSide; // 是否双面渲染看具体需求,加不加问题不大
}
})
后面head没有设置renderOrder是因为默认的就是0了,无需再重复设置。但是如果有需要的话,得保证head的renderOrder小于glasses的renderOrder。
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)