关于 Three.js 的 Face culling 与 Material 的 side 问题

发布于 2022-09-05 14:52:31 字数 875 浏览 21 评论 0

想详细了解 Face culling 与 Material 的 side 属性的关系。

体验该链接:http://threejs-outsidelook.os...

当设置以下剔除模式时,就会实时把 Mesh 的正面剔除:

renderer.setFaceCulling(THREE.CullFaceFront, THREE.FrontFaceDirectionCCW)

可是为什么反面却会显示呢?材质默认是应用在正面的 THREE.FrontSide

new THREE.Material({
    side: THREE.FrontSide
})

默认状态下,下面的平面绕Y轴旋转180度后,是不可见的。而上述案例的背面为什么又是可见的呢?

// 剔除模式默认是 THREE.CullFaceBack,但即使设置为 CullFaceNone,却依然不可见。
renderer.setFaceCulling(THREE.CullFaceNone, THREE.FrontFaceDirectionCCW)

var planeGeometry = new THREE.PlaneGeometry(10, 10)
var planeMaterial = new THREE.Material({ color: 0xff0000 })
var plane = new THREE.Mesh(planeGeometry, planeMaterial)
scene.add(plane)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

任谁 2022-09-12 14:52:31

问下,解决了吗,我也遇到这个情况,设置THREE.CullFaceNone是没有效果的

已经解决了哈,在设置render渲染模式为CullFaceNone之前,对材质material也需要同时设置双面贴图
new Material({side:THREE.DoubleSide})

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文