Fatal编程技术网
  • javascript/
  • Javascript 在三个窗口中高亮显示距离鼠标指针最近的边

Javascript 在三个窗口中高亮显示距离鼠标指针最近的边

javascript three.js

Javascript 在三个窗口中高亮显示距离鼠标指针最近的边,javascript,three.js,Javascript,Three.js,在threejs webgl中，我想突出显示距离鼠标指针最近的边，并选择它以获得边的长度。 我正在使用Edgesgeometry创建边 var edgeGeometry = new THREE.EdgesGeometry(meshes[meshIndex]); // or WireframeGeometry var edgeMaterial = new THREE.LineBasicMaterial({ color: 0x00000, linewidth: 2 }); var wireframe

在
threejs webgl
中，我想突出显示距离鼠标指针最近的边，并选择它以获得边的长度。 我正在使用
Edgesgeometry
创建边

var edgeGeometry = new THREE.EdgesGeometry(meshes[meshIndex]); // or WireframeGeometry
var edgeMaterial = new THREE.LineBasicMaterial({ color: 0x00000, linewidth: 2 });
var wireframe = new THREE.LineSegments(edgeGeometry, edgeMaterial);

var object = new THREE.Mesh(meshes[meshIndex], material);
object.add(wireframe);
只是个主意

如果您知道要绘制的面及其边，则可以使用由每条边的顶点构建的
THREE.Line3（）
（因此将使用
THREE.Line3（）
三次）。然后，您知道交叉点，并有三条
three.Line3（）
直线，现在您可以通过选择距离交叉点最近的直线来找到最近的边，该方法将有所帮助。此方法返回边上相对于交点的闭合点

也就是说，只需找到从交点到面的三条边的三个距离。然后高亮显示边，使其与交点之间的距离最小

var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（60，window.innerWidth/window.innerHeight，11000）；
摄像机位置设置（0,0,10）；
var renderer=new THREE.WebGLRenderer({
反别名：对
});
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var geom=new THREE.PlaneBufferGeometry（8,8）.toNonIndexed（）；
var mat=新的三网格基本材料({
颜色：“蓝色”
});
var网格=新的三网格（geom、mat）；
场景。添加（网格）；
renderer.domeElement.addEventListener（“mousemove”，onMouseMove，false）；
var raycaster=new THREE.raycaster（）；
var mouse=new THREE.Vector2（）；
var相交=[]；
var localPoint=new THREE.Vector3（）；
设closestPoint=new THREE.Vector3（）；
var edgeGeom=new THREE.BufferGeometry（）.setFromPoints([
新的3.Vector3（），
新的3.Vector3（）
]);
var edge=新的三线（edgeGeom，新的三线基本材质({
颜色：“浅绿色”
}));
场景。添加（边缘）；
var pos=mesh.geometry.attributes.position；
mouseMove函数（事件）{
mouse.x=（event.clientX/window.innerWidth）*2-1；
mouse.y=-（event.clientY/window.innerHeight）*2+1；
raycaster.setFromCamera（鼠标、相机）；
相交=光线投射器。相交对象（网格）；
if（intersects.length==0）返回；
让faceIdx=与[0]相交；
让线=[
新三线3(
新的三个.Vector3（）.fromBufferAttribute（pos，faceIdx*3+0），
新的三个.Vector3（）.fromBufferAttribute（pos，faceIdx*3+1）
),
新三线3(
新的三个.Vector3（）.fromBufferAttribute（pos，faceIdx*3+1），
新的三个.Vector3（）.fromBufferAttribute（pos，faceIdx*3+2）
),
新三线3(
新的三个.Vector3（）.fromBufferAttribute（pos，faceIdx*3+2），
新的三个.Vector3（）.fromBufferAttribute（pos，faceIdx*3+0）
)
];
设edgeIdx=0；
mesh.worldToLocal（localPoint.copy（与[0].point相交））；
让心灵距离=1000；
for（设i=0；i<3；i++）{
行[i].closestPointToPoint（localPoint，true，closestPoint）；
设dist=localPoint.distanceTo（closestPoint）；
如果（距离<距离）{
距离=距离；
edgeIdx=i；
}
}
让pStart=mesh.localToWorld（lines[edgeIdx].start）；
设pEnd=mesh.localToWorld（lines[edgeIdx].end）；
edgeGeom.attributes.position.setXYZ（0，pStart.x，pStart.y，pStart.z）；
edgeGeom.attributes.position.setXYZ（1，pEnd.x，pEnd.y，pEnd.z）；
edgeGeom.attributes.position.needsUpdate=true；
}
render（）；
函数render（）{
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
}
正文{
溢出：隐藏；
保证金：0；
}
当我将鼠标悬停在一个面上时，你做了什么？我可以高亮显示与它相关的边。if（intersects.length>0）{intersects[0]。object.children[0]。material.color.setHex（0xff0000）；intersectpoint=intersects[0]。point；var line=new THREE.Line3（）；var positions=intersects[0].object.geometry.attributes.position.array；for（var i=0；i