I have an array of 3D Points. How to draw a face in 3D Space? I mean: a flat object, but in 3D Space.

I want to draw line from Points[0] to Points[1], from Points[1] to Points[2] etc.

Now I have the following solution:

var geometry = new THREE.BufferGeometry();

var vertices = faceToTriangles(VerticesArray);  // my function

var uvs = new Float32Array([
    0.0, 0.0,
    1.0, 0.0,
    1.0, 1.0,

    0.0, 0.0,
    1.0, 1.0,
    0.0, 1.0
]);


geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.addAttribute('uv', new THREE.BufferAttribute(uvs, 2));
var material = new THREE.MeshLambertMaterial({ color: 'red' });
material.side = THREE.DoubleSide;
var mesh = new THREE.Mesh(geometry, material);

My function:

function faceToTriangles(VerticesArray) {
    var Triangles = new Float32Array((VerticesArray.length - 2) * 9);

    var i = 0;
    for ($v = 1; $v < Face.Vertices3D.length - 1; $v++) {
        Triangles[i++] = parseFloat(Face.Vertices3D[0].x);
        Triangles[i++] = parseFloat(Face.Vertices3D[0].y);
        Triangles[i++] = parseFloat(Face.Vertices3D[0].z);

        Triangles[i++] = parseFloat(Face.Vertices3D[$v].x);
        Triangles[i++] = parseFloat(Face.Vertices3D[$v].y);
        Triangles[i++] = parseFloat(Face.Vertices3D[$v].z);


        Triangles[i++] = parseFloat(Face.Vertices3D[$v + 1].x);
        Triangles[i++] = parseFloat(Face.Vertices3D[$v + 1].y);
        Triangles[i++] = parseFloat(Face.Vertices3D[$v + 1].z);
    }

    return Triangles;
}

I wrote it some time ago, and it works fine in most cases.

It makes triangles from objects. But in some cases, function faceToTriangles() works incorretly. It generates triangles going beyond the object.

How make it correctly? How to display a 2D flat object (given by an array of vertices) in 3D space? Maybe without converting to triangles?

I have an array of 3D Points. How to draw a face in 3D Space? I mean: a flat object, but in 3D Space.

I want to draw line from Points[0] to Points[1], from Points[1] to Points[2] etc.

Now I have the following solution:

var geometry = new THREE.BufferGeometry();

var vertices = faceToTriangles(VerticesArray);  // my function

var uvs = new Float32Array([
    0.0, 0.0,
    1.0, 0.0,
    1.0, 1.0,

    0.0, 0.0,
    1.0, 1.0,
    0.0, 1.0
]);


geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.addAttribute('uv', new THREE.BufferAttribute(uvs, 2));
var material = new THREE.MeshLambertMaterial({ color: 'red' });
material.side = THREE.DoubleSide;
var mesh = new THREE.Mesh(geometry, material);

My function:

function faceToTriangles(VerticesArray) {
    var Triangles = new Float32Array((VerticesArray.length - 2) * 9);

    var i = 0;
    for ($v = 1; $v < Face.Vertices3D.length - 1; $v++) {
        Triangles[i++] = parseFloat(Face.Vertices3D[0].x);
        Triangles[i++] = parseFloat(Face.Vertices3D[0].y);
        Triangles[i++] = parseFloat(Face.Vertices3D[0].z);

        Triangles[i++] = parseFloat(Face.Vertices3D[$v].x);
        Triangles[i++] = parseFloat(Face.Vertices3D[$v].y);
        Triangles[i++] = parseFloat(Face.Vertices3D[$v].z);


        Triangles[i++] = parseFloat(Face.Vertices3D[$v + 1].x);
        Triangles[i++] = parseFloat(Face.Vertices3D[$v + 1].y);
        Triangles[i++] = parseFloat(Face.Vertices3D[$v + 1].z);
    }

    return Triangles;
}

I wrote it some time ago, and it works fine in most cases.

It makes triangles from objects. But in some cases, function faceToTriangles() works incorretly. It generates triangles going beyond the object.

How make it correctly? How to display a 2D flat object (given by an array of vertices) in 3D space? Maybe without converting to triangles?

• javascript
• three.js
• geometry

Share Improve this question Follow edited Feb 18, 2024 at 19:16 janw 9,6661212 gold badges5050 silver badges6868 bronze badges asked May 10, 2018 at 11:55 Przemysław NiemiecPrzemysław Niemiec 1,71411 gold badge1313 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Just a concept, using a quaternion:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 2, 4).setLength(40);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x101010);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.AxesHelper(3));

var rawPoints = [{
  "x": 10,
  "y": 10,
  "z": 1
}, {
  "x": 9.421052631578952,
  "y": 11.736842105263158,
  "z": 6.789473684210525
}, {
  "x": 5,
  "y": 12.142857142857142,
  "z": 7.7142857142857135
}, {
  "x": 5.285714285714286,
  "y": 13,
  "z": 10.628571428571426
}, {
  "x": -1,
  "y": 13,
  "z": 10
}, {
  "x": 0,
  "y": 10,
  "z": 0
}]

var points = [];
rawPoints.forEach(r => {
  points.push(new THREE.Vector3(r.x, r.y, r.z));
});

var tri = new THREE.Triangle(points[2], points[1], points[0]);
var normal = new THREE.Vector3();
tri.getNormal(normal);

var baseNormal = new THREE.Vector3(0, 0, 1);
var quaternion = new THREE.Quaternion().setFromUnitVectors(normal, baseNormal);

var tempPoints = [];
points.forEach(p => {
  tempPoints.push(p.clone().applyQuaternion(quaternion));
})

var shape = new THREE.Shape(tempPoints);
var shapeGeom = new THREE.ShapeGeometry(shape);
var mesh = new THREE.Mesh(shapeGeom, new THREE.MeshBasicMaterial({
  color: "red",
  side: THREE.DoubleSide,
  wireframe: false
}));
console.log(points);
mesh.geometry.vertices = points;
scene.add(mesh);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs/build/three.min.js"></script>
<script src="https://threejs/examples/js/controls/OrbitControls.js"></script>