【问题标题】:Transparent cube with stroke only仅带笔划的透明立方体
【发布时间】:2019-03-04 15:41:05
【问题描述】:

在three.js中,如何渲染一个没有填充但只有边缘的立方体? 例如:

【问题讨论】:

    标签: three.js


    【解决方案1】:

    如果您需要控制线条的粗细,可以使用在 THREE.js 示例文件夹中实现的 LineGeometry 类,该类创建三角形条带而不是 GL.Lines 进行渲染。

    请参阅以下示例:

    如果您需要澄清,请告诉我,我可以尝试提供更多细节。

    编辑

    我已采纳您的示例评论并在此处稍作修改:https://jsfiddle.net/L21ozkdq/2/

    以下是需要牢记的重要事项(它们在 cmets 中也有提及): - 导入 LineGeometry 示例文件。

    • 创建 LineGeometry 对象而不是 BufferGeometry。

    • 创建 LineMaterial 而不是 LineBasicMaterial。

    • 从几何体和材质创建 Line2 对象。

    • 为 LineGeometry 创建一个位置数组而不是一个属性。

    • 从一条线而不是位置数组中的许多线段创建一个框。

    【讨论】:

    • 使用lines_fat_wireframe示例我可以得到一个带有笔划的立方体,但它的每个面也有线条,我该如何避免这种情况?代码:pastebin.com/1m8VFpGc
    • 内置的三个盒子将在每个面上都有线条,因为它是由三角形组成的。您必须使用仅沿着立方体边缘的线条创建自定义 LineGeometry(如 in catmull rom 曲线 webgl_lines_fat 示例)。
    • 我创建了可以工作的立方体线,但由于 OpenGL 的限制,无法更改线宽。可以做些什么来解决这个问题?代码:jsfiddle.net/rxcmhpfe 文档:threejs.org/docs/#api/en/materials/LineBasicMaterial.linewidth
    • @Owen 我已经用更多细节更新了答案。您必须使用我发布的链接中提供的扩展三个的示例脚本。希望有帮助!
    猜你喜欢
    • 1970-01-01
    • 2012-03-03
    • 2015-01-07
    • 1970-01-01
    • 1970-01-01
    • 2020-03-15
    • 1970-01-01
    • 2012-11-11
    • 1970-01-01
    相关资源
    最近更新 更多