CODEWITHSUNDEEP
javascriptthree.jsgeometry
Przemysław Niemiec
Przemysław Niemiec

Reputation: 1714

Three.js - 2D object in 3D space (by Vertices)

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?

Upvotes: 1

Views: 4044

Answers (1)

prisoner849
prisoner849

Reputation: 17576

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.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Upvotes: 9

Related Questions