基于距离向顶点添加点（网格几何）

Posted 2023-02-27

【中文标题】基于距离向顶点添加点（网格几何）

【英文标题】：Distance based addition of points to vertices (mesh geometry)

【发布时间】：2020-01-01 20:57:39

【问题描述】：

我的场景中有一个THREE.Geometry，其中包含超过 5,000 个顶点。我想要做的是将THREE.Points 添加到场景中仅包含几何体的网格的 3 个顶点。我想实现这样的目标：

我取了现有几何体第一个面的 3 个顶点并将它们添加到我的新几何体的顶点，该几何体应该包含 3 个顶点。我使用了THREE.Points 和THREE.PointsMaterial，但我用THREE.LineSegments 和THREE.LineBasicMaterial 尝试了同样的事情，结果是一样的。 （除了点而不是线）。

var vertices = [
  mesh.geometry.faces[0].a,
  mesh.geometry.faces[0].b,
  mesh.geometry.faces[0].c
];


vertices.forEach( function(vId,i)
  vertices[i].index = i;
  vertices[i] = mesh.geometry.vertices[vId].clone();
  vertices[i].l2w = mesh.localToWorld(vertices[i].clone());
  vertices[i].id = vId;
  vertices[i].distance = vertices[i].l2w.distanceTo(camera.position);

)


var plane_geom = new THREE.Geometry();
plane_geom.vertices.push(vertices[0]);
plane_geom.vertices.push(vertices[1]);
plane_geom.vertices.push(vertices[2]);


plane_geom.verticesNeedUpdate = true;
plane_geom.elementsNeedUpdate = true;
plane_geom.computeVertexNormals();


var pointsMaterial2 = new THREE.PointsMaterial(
  size: 2,
  color: "red"
);

var plane_mesh =  new THREE.Points( plane_geom, pointsMaterial2 );
 scene.add( plane_mesh );


mesh.geometry.dispose();
mesh.material.dispose();
scene.remove( mesh);

我的初始几何是全局定义的，是加载的 STL 对象的几何，类型为THREE.Geometry。具有此几何形状的网格会在 init 函数中添加到场景中。几何对象如下所示：

__directGeometry: Object  vertices: (30006) […], normals: (30006) […], 
colors: (30006) […], … 
__bufferGeometry: Object  uuid: "10EE834D-B19E-4C27-B831-F484D908DB06",                   
name: "", type: "BufferGeometry", … 
_listeners: Object  dispose: (1) […] 
boundingBox: Object  min: …, max: … 
boundingSphere: Object  center: …, radius: 135.73491999459804 
colors: Array []
colorsNeedUpdate: false
elementsNeedUpdate: false
faceVertexUvs: Array [ [] ]
faces: Array(10002) [ …, …, …, … ]
groupsNeedUpdate: false
id: 2
lineDistances: Array []
lineDistancesNeedUpdate: false
morphNormals: Array []
morphTargets: Array []
name: ""
normalsNeedUpdate: false
skinIndices: Array []
skinWeights: Array []
type: "Geometry"
uuid: "0EB01FF3-E9BF-4CAD-AA97-5EC2933F0D9C"
uvsNeedUpdate: false
vertices: Array(5003) [ …, …, …, … ]
verticesNeedUpdate: false

将带有新几何体的新网格plane_mesh 添加到场景后，将显示几何体的所有点（每个顶点上）（超过 5,000 个点）。但是，如果我从场景中处理初始网格，我只能看到 3 个点。当打印出plane_mesh 时，一切看起来都很正常，并且网格只包含 3 个顶点...... 经过大量的试验和错误，我意识到所有的操作都是在初始网格上执行的。只有在处理完网格后，plane_mesh 才会添加到场景中。

任何帮助将不胜感激！

【参考方案1】：

您可以为三角形创建一次几何图形，然后通过从原始几何图形复制它们来更改其顶点的值。这里只是一个概念（r108）：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer(
  antialias: true
);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geom = new THREE.PlaneBufferGeometry(10, 10, 4, 4);
var mat = new THREE.MeshBasicMaterial(
  color: "aqua",
  wireframe: true
);
var mesh = new THREE.Mesh(geom, mat);
scene.add(mesh);

var pointsGeom = new THREE.BufferGeometry().setFromPoints([
  new THREE.Vector3(),
  new THREE.Vector3(),
  new THREE.Vector3()
]);
var pointsMat = new THREE.PointsMaterial(
  size: 1,
  color: "red"
);
var points = new THREE.Points(pointsGeom, pointsMat);
scene.add(points);

setInterval(() => 
  let faces = geom.index.count / 3;
  let face = THREE.Math.randInt(0, faces - 1);

  setTriangle(face);

, 1000);

var v3 = new THREE.Vector3(); // temp vector

function setTriangle(face) 

  for (let i = 0; i < 3; i++) 
    v3.fromBufferAttribute(geom.attributes.position, geom.index.getX(face * 3 + i));
    pointsGeom.attributes.position.setXYZ(i, v3.x, v3.y, v3.z);
  

  pointsGeom.attributes.position.needsUpdate = true;



renderer.setAnimationLoop(() => 
  renderer.render(scene, camera)
);

body 
  overflow: hidden;
  margin: 0;

<script src="https://threejs.org/build/three.min.js"></script>