Guide to creating 2D point shapes with three.js

Question

Guide to creating 2D point shapes with three.js

Is there a way to render a 2D shape of points in three.js? I have been struggling to find a working geometry for this task. I simply want to create a polygon of points that lie on the same plane.

The 'Shape' object doesn't seem to be suitable as it only supports 2D coordinates and I need to work with 3D points...

Currently, I am using the code below to create a shape in the X,Y plane:

 var squareShape = new THREE.Shape();
 squareShape.moveTo( 0, 0 );
 squareShape.lineTo( 0, 50 );
 squareShape.lineTo( 20, 80 );
 squareShape.lineTo( 50, 50 );
 squareShape.lineTo( 0, 0 );

How can I adapt this to work in a 3D world? Is there a solution like this:

squareShape.moveTo( 0, 0, 0 );
squareShape.lineTo( 0, 50, 50 );

Any suggestions or guidance would be greatly appreciated.

javascript 3d three.js shapes

Answer 1

Answer №1

To create a polygon using 3D coordinates, follow this code snippet:

// Define the geometry
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( 6, 4, -1 ) );
geometry.vertices.push( new THREE.Vector3( 7, -5, 0 ) );
geometry.vertices.push( new THREE.Vector3( -9, -3, 3 ) );
geometry.vertices.push( new THREE.Vector3( 6, 4, -1 ) ); // Complete the shape

// Specify the material
var material = new THREE.LineBasicMaterial( { color: 0x00ff00, linewidth: 2 } );

// Create the line
var line = new THREE.Line( geometry, material );
scene.add( line );

Using three.js version r.82

Answer 2

To create a polygon using 3D coordinates, follow this code snippet:

// Define the geometry
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( 6, 4, -1 ) );
geometry.vertices.push( new THREE.Vector3( 7, -5, 0 ) );
geometry.vertices.push( new THREE.Vector3( -9, -3, 3 ) );
geometry.vertices.push( new THREE.Vector3( 6, 4, -1 ) ); // Complete the shape

// Specify the material
var material = new THREE.LineBasicMaterial( { color: 0x00ff00, linewidth: 2 } );

// Create the line
var line = new THREE.Line( geometry, material );
scene.add( line );

Using three.js version r.82

Answer 3

Answer №2

Starting from release 51, a new form of geometry known as THREE.ShapeGeometry has been introduced. This type of geometry represents two-dimensional shapes that lie on a single plane. An illustrative example showcasing its application can be accessed through this link:

To create a 2D shape using THREE.Shape, you can utilize the method shape.makeGeometry() to convert it into a THREE.ShapeGeometry. Below is a pseudo-code snippet demonstrating how to generate a circle:

var circle = new THREE.Shape();
var radius = 6;

for (var i = 0; i < 16; i++) {
  var pct = (i + 1) / 16;
  var theta = pct * Math.PI * 2.0;
  var x = radius * Math.cos(theta);
  var y = radius * Math.sin(theta);
  if (i == 0) {
    circle.moveTo(x, y);
  } else {
    circle.lineTo(x, y);
  }
}

var geometry = circle.makeGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var mesh = new THREE.Mesh(geometry, material);

The resulting mesh object possesses attributes such as position, rotation, and scale, allowing you to manipulate and position the object within a three-dimensional space.

Answer 4

Starting from release 51, a new form of geometry known as THREE.ShapeGeometry has been introduced. This type of geometry represents two-dimensional shapes that lie on a single plane. An illustrative example showcasing its application can be accessed through this link:

To create a 2D shape using THREE.Shape, you can utilize the method shape.makeGeometry() to convert it into a THREE.ShapeGeometry. Below is a pseudo-code snippet demonstrating how to generate a circle:

var circle = new THREE.Shape();
var radius = 6;

for (var i = 0; i < 16; i++) {
  var pct = (i + 1) / 16;
  var theta = pct * Math.PI * 2.0;
  var x = radius * Math.cos(theta);
  var y = radius * Math.sin(theta);
  if (i == 0) {
    circle.moveTo(x, y);
  } else {
    circle.lineTo(x, y);
  }
}

var geometry = circle.makeGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var mesh = new THREE.Mesh(geometry, material);

The resulting mesh object possesses attributes such as position, rotation, and scale, allowing you to manipulate and position the object within a three-dimensional space.

Answer 5

Answer №3

To generate a geometry with the vertices of the shapes (after extraction) and apply triangulation to define the faces, follow these steps:

Here is an example of how the code should be structured:

const geometry = new THREE.Geometry();
const shapePoints = shape.extractPoints();
const faces = THREE.Shape.Utils.triangulateShape(shapePoints.shape, shapePoints.holes);
for (let i = 0; i < shapePoints.shape.length; i++) {
    geometry.vertices.push(new THREE.Vector3(shapePoints.shape[i].x, 0, shapePoints.shape[i].y));
}
for (let i = 0; i < faces.length ; i++) {
    const a = faces[i][2], b = faces[i][1], c = faces[i][0];
    const v1 = shapePoints.shape[a], v2 = shapePoints.shape[b], v3 = shapePoints.shape[c];

    geometry.faces.push(new THREE.Face3(a, b, c));    
    geometry.faceVertexUvs[0].push(
        [new THREE.UV(v1.x, v1.y), new THREE.UV(v2.x, v2.y), new THREE.UV(v3.x, v3.y)]);
}
geometry.computeCentroids();
geometry.computeFaceNormals();

Answer 6

To generate a geometry with the vertices of the shapes (after extraction) and apply triangulation to define the faces, follow these steps:

Here is an example of how the code should be structured:

const geometry = new THREE.Geometry();
const shapePoints = shape.extractPoints();
const faces = THREE.Shape.Utils.triangulateShape(shapePoints.shape, shapePoints.holes);
for (let i = 0; i < shapePoints.shape.length; i++) {
    geometry.vertices.push(new THREE.Vector3(shapePoints.shape[i].x, 0, shapePoints.shape[i].y));
}
for (let i = 0; i < faces.length ; i++) {
    const a = faces[i][2], b = faces[i][1], c = faces[i][0];
    const v1 = shapePoints.shape[a], v2 = shapePoints.shape[b], v3 = shapePoints.shape[c];

    geometry.faces.push(new THREE.Face3(a, b, c));    
    geometry.faceVertexUvs[0].push(
        [new THREE.UV(v1.x, v1.y), new THREE.UV(v2.x, v2.y), new THREE.UV(v3.x, v3.y)]);
}
geometry.computeCentroids();
geometry.computeFaceNormals();

Guide to creating 2D point shapes with three.js

Answer №1

Answer №2

Answer №3

Similar questions

Learn the process of utilizing Uglify.js to combine JavaScript files for individual views within Express.js

Calculation of time intervals based on input values from text boxes, calculating quarters of an hour

Difficulty executing for loop due to multiple buttons, resulting in malfunctioning buttons in JavaScript code

Tips for incorporating a favicon in a React application

Difficulty in transferring a variable from my JavaScript file to my PHP file

Interacting with icons using TouchableOpacity and onPress functionality

Encountering a Javascript Error when trying to begin

Is it possible that JavaScript isn't functioning properly?

Tips for creating a partial matching filter on an array using elements from a separate array

Issues with sending an AJAX POST request to a PHP script

changing a variable in javascript

underscore.js does not allow data to be manipulated outside of the _.each

Transfer data between an HTML page and a PHP page hosted on separate locations using jQuery

Retrieve an image from the database and associate it with corresponding features or news in PHP

Converting an array into a JavaScript Date object

Utilizing the NuxtJS framework to tap into video camera functionalities

The frisbyjs test is not passing due to the absence of proper HTTP headers being sent by the get()

Retrieving JSON data with jQuery's Ajax functionality

When using Vue.js, the class binding feature may not function properly if it is referencing another data property that has variants

Utilizing external libraries with RiotJS for greater functionality