Create mesh geometry from array of 8 corners (vertices)

Questions
1

I am new to three.js and wondering is it possible to create a geometry mesh from an array of shapes each created by connecting 8 corners ( a corner itself defined by x, y, and z). Each shape (cell) has a centre point and a property(material) associated with. Thanks

2

First of all: Hello!

Could you add a picture of the desired result with some explanation? :slight_smile:

3

Hello! and thanks for reply.
The mesh can have lots of the 8-corner cube.
svggridTutorialCornerPoint_09

4

So far it seems that you’re looking for the voxel technique.
https://threejs.org/examples/?q=voxel#webgl_interactive_voxelpainter

5

I don’t think that simple BoxGeometry with ‘width’, ‘height’, and ‘depth’ (used in above voxelpainter example) is what I want. I don’t know how to create a geometry from the coordinates of 8 corner points (vertices in three.js).

6

If you only want eight vertices per box, you need an indexed geometry in order to draw two triangles per side. The problem is you won’t have proper shading since the normal vectors are shared between multiple sides of the box. Same for uv coordinates.

Using BoxGeometry might be the better alternative since you will have valid vertex information in your application.

1 Like
7

if your points are axis aligned, then you can find width, height and depth of your box and create THREE.BoxGeometry().

1 Like
8

Arbitrary boxes with 8 points (vertices), e.g. following shape, is possible, but not with BoxGeometry’s
width, height, and depth.
cpg-cells

9

Yeah, you need a custom geometry for this use case.

10

What about the PolyhedronBufferGeometry, can the x, y, z of 8 corner points be used to create the vertices and indices required by PolyhedronBufferGeometry ?

11

PolyhedronBufferGeometry is intended to generate platonic solids, a special type of regular polyhedra. One property of those geometries is that all edges have the same length. This is not true for your arbitrary boxes.

12

I’ve tried it in a hurry, that’s what happens.
But the UV’s are weird.20180314-2116-06633

var verticesOfCube = [
    -1,-1,-1.2,    1,-1.2,-1,    1.6, 2.5,-1,    -1, 1,-1,
    -1,-1, 1,    1,-1, 1,    1, 1, 1,    -1, 1, 1,
];

var indicesOfFaces = [
    2,1,0,    0,3,2,
    0,4,7,    7,3,0,
    0,1,5,    5,4,0,
    1,2,6,    6,5,1,
    2,3,7,    7,6,2,
    4,5,6,    6,7,4
];

var geometry = new THREE.PolyhedronBufferGeometry( verticesOfCube, indicesOfFaces, 1, 0 );
var mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: uvTex, side: THREE.DoubleSide, wireframe: true} ));
scene.add(mesh);
1 Like
13

Another crazy idea is to substitute the data of the position attribute of THREE.BoxBufferGeometry() with the data of your eight points :smile: With re-computing of vertex and face normals, of course.

14

What about using ConvexGeometry, does that work?

15

Yeah, really. ConvexGeometry i’t usefull for my case. create an isosceles trapezoid
Thanks your comment.
I leave example link here.,
https://codesandbox.io/p/sandbox/8t82rv

a
a726×455 18.8 KB

1 Like