如何在Three.js中修复线在网格表面上的Z形战斗？

Question

我正在尝试在Three.js中的脸上画线

除了线条几乎看不到之外，其他所有东西都工作正常-不管我把它们做成多粗：它们看起来像这样：

画线的代码是：

var lgeometry = new THREE.Geometry();
var lmaterial = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 4 } );

var v1 = p1;
var v2 = p2;

lgeometry.vertices.push(v1);
lgeometry.vertices.push(v2);

console.log(lgeometry);
var line = new THREE.Line( lgeometry, lmaterial );

scene.add( line );

我怀疑-由于线条精确地在表面上，所以它们不会被渲染（这就是所谓的z-fighting吗？）

有没有办法解决这个问题？

我正在考虑：

• 绘制圆柱体或其他形状而不是线条
• 沿着法线在表面上方勉强画线

有什么建议或方向吗？

Answer 1

这可以通过图层和模板缓冲区的组合来实现。

工作演示： https://jsfiddle.net/mmalex/dg417kvn/

---

解决方案：

有关说明，请遵循以下代码中的注释：

<record id="id of new view" model="ir.ui.view">
        <field name="name">Name of view</field>
        <field name="model">model of new view</field>
        <field name="arch" type="xml">
            <form string="">
                <button name="generate_report" string="Generate Report
                        type="object" class="oe_highlight" />
            </form>
        </field>
    </record>