Блог

Я хотел бы отобразить объект, содержащий треугольники и изолированные вершины в Three.js. Это закодировано в СЛОЕ. Я использую ТРИ.Сетка для отображения треугольников и ТРИ.Очки за очки, передавая один и тот же geometry объект обоим. Однако отображаются только вершины, принадлежащие треугольникам.

Я также провел тест, в котором сохранил вершины, но удалил все треугольники (грани) в файле СЛОЕВ. В этом случае отображаются все вершины…

Что я могу сделать, чтобы иметь и то, и другое?

Я включаю небольшой файл тестового слоя, в котором есть 4 вершины, 3 из которых принадлежат треугольнику. Если вы загрузите его с помощью этого кода, вы увидите, что отображаются только 3 вершины треугольника.

 const meshString = `ply
format ascii 1.0
element vertex 4
property float x
property float y
property float z
element face 1
property list uchar int vertex_indices
element edge 0
property int vertex1
property int vertex2
end_header
-1 1 0.000000 
1 1 0.000000 
1 -1 0.000000 
-1 -1 0.000000 
3 0 1 3
`;
const loader = new THREE.PLYLoader();
geometry = loader.parse( meshString );
const meshPoints = new THREE.Points( geometry, pointsMaterial );
scene.add(meshPoints);
 

Изменить 1

Вот картинка, показывающая, что я хотел бы получить, и что я на самом деле получаю:

Изменить 2

Я сделал кодовую строку, показывающую проблему.

Правка 3

Я нашел проблему, но мне все равно было бы очень интересно узнать, есть ли хорошее решение. Что происходит, так это то, что загрузчик создает индекс, если есть грани, и индекс содержит только вершины, принадлежащие граням. Если граней нет, индекс=null, и мы получим все вершины. Создание версии геометрии без использования индекса geometry.toNonIndexed не помогает, так как сохраняются только вершины, принадлежащие граням. Одним из решений является установка вручную geometry.index=null , и в этом случае отображаются недостающие вершины.

Одним из решений является создание клона геометрии и установка geometry.index=null , как в правке №3. Однако это приведет к созданию копии вершин. Чтобы предотвратить это, сделайте вот так:

 const loader = new THREE.PLYLoader();
const geometry = loader.parse(meshString);

// the mesh: for displaying the triangles
mesh = new THREE.Mesh(geometry, Mesh.meshMaterial);
scene.add(mesh);

// the points: even those outside triangles
const geometry2 = geometry.clone(); // clone the original geometry
geometry2.index = null; // do not use indexing
geometry2.attributes.position = geometry.attributes.position; // use the same vertices as the original mesh
meshPoints = new THREE.Points( geometry2, Mesh.pointsMaterial );
scene.add(meshPoints);