Three.js：平面只有一半时间可见

Posted 2023-02-27

【中文标题】Three.js：平面只有一半时间可见

【英文标题】：Three.js: Plane visible only half the time

【发布时间】：2012-06-09 00:21:21

【问题描述】：

我使用 Three.js 创建了一个可以旋转的平面。出于某种原因，飞机没有显示一半的时间。我创建了一个小提琴here 来显示行为。

【参考方案1】：

它是不可见的，因为飞机的背面没有被渲染（或者更好地说，飞机默认没有背面。在旁注中，请查看backface-culling 关于这一点。虽然它不是在这种情况下，它可能会让您对渲染有所了解）。

Three.js 确实为您提供了一种非常简单的方法来渲染背面。

在 Three.js - r49 及以下：

您需要做的就是将平面对象的 doubleSided - 属性设置为 true。

plane.doubleSided = true;

对于较新的版本 - r50 及更高版本

在较新的版本中，正如 donnyB 在他的回答中已经正确指出的那样，该属性已从 Object3D - 对象移动到 Material - 对象，因此您需要对其进行一些不同的设置，如下所示：

plane.material.side = THREE.DoubleSide;

还编辑了你的小提琴给你看：http://jsfiddle.net/VsWb9/1084/

它使用的是 Three.js - 比 r50 更新的版本，属性设置在第 35 行

【讨论】：

干得好，不知道您的解决方案是针对那些修订版的，很高兴知道。谢谢！

@mattdlockyer 如果是你的，也许你现在应该删除反对票。

【参考方案2】：

请注意，这在 Three.js 版本 r50 中略有改变。可以通过 Material 上的side 属性来渲染平面的两侧，即

plane.material.side = THREE.DoubleSide;

查看here了解更多详情。

【讨论】：

你知道如何在两侧获得 2 种不同的纹理吗？有人吗？

@mattdlockyer 我也有同样的问题，这对我有帮助：***.com/questions/11709760/…