Three.js / BufferGeometry 如何使用mesh & line材质答案

【问题标题】：Three.js / BufferGeometry how to use mesh & line materialThree.js / BufferGeometry 如何使用mesh & line材质
【发布时间】：2015-10-28 12:45:17
【问题描述】：

我正在使用 BufferGeometry 来绘制三角形。我可以使用网格几何，为每个三角形指定 3 个索引属性。我正在使用没有线框的基本材料。我想我可以使用 raycast。

我还看到了线框的线段方法。很有趣。

好的，我的问题...我想把我的三角形看成一个线框，而且我需要光线投射。所以....解决方案是创建我自己的着色器，不是吗？谢谢

【问题讨论】：

标签： three.js

【解决方案1】：

您不必创建自定义着色器，您可以使用带有线框材质的网格，并且光线仍应“击中”对象

var mesh = new THREE.Mesh(geometry,new THREE.MeshBasicMaterial({wireframe : true}));

如果由于某种原因它没有命中或者您想要 LineSegments 对象，您可以跟踪影响对象的所有变换，并将它们应用到您不会添加到场景中的网格上

var segmentObject = new THREE.LineSegments(geometry,lineMaterial);
scene.add(segmentObject);
var meshNotInScene = new THREE.Mesh(geometry,dummyMaterial);

您将使用网格物体来确定光线投射是否击中物体

通过这种方式，您可以为一个对象设置不同的命中框，例如，如果您有一个飞行的甜甜圈，通过将其与圆形网格配对，您可以选择它，即使您单击它的孔等...

请记住，材料有侧面，如果您不关心哪一侧是哪一侧，则将“侧面”设置为 THREE.DoubleSide

【讨论】：

BufferGeometry 与材质无关，如果您使用缓冲几何和线框材质创建网格，它将创建线框，我测试它只是为了确保使用简单的 PlaneBufferGeometry 和简单的材质，它确实做到了显示为线框，所以你的问题一定在其他地方