Guide to creating a polygon with any number of sides using Three.JS

Looking to create an n-Sided Area using Three.JS. All Vector3's and their order have been provided and added to the geometry vertices array with coordinates in the format (x,0,y).

How can I fill this area with faces? Is there a function available or is it more of a mathematical problem to divide the area into triangles?

Seeking a solution to this challenge.

Answer №1

If you're looking to achieve your goal, one option is to utilize the Shape object.

myshape = new THREE.Shape();

Alternatively, you could also use:

myshape = new THREE.ShapeGeometry();

You can check out a demonstration here:

Another approach is to draw a path and then fill it afterwards:

context.lineWidth = 0.05;
context.beginPath();

// add your drawing logic here

context.closePath();
context.stroke();
context.fill();

I hope this information proves useful.

Regards,

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I encountered a response error code 500 from the development server while using my emulator

As I embark on setting up the react-native environment for development, I encounter an error when executing the command react-native run-android. root@pc:~/l3/s2/DevMobMultipltm/Wakapp# ` A series of tasks are carried out including scanning folders for sy ...

What is the best way to determine the final letter of a column in a Google Sheet, starting from the first letter and using a set of

My current approach involves generating a single letter, but my code breaks if there is a large amount of data and it exceeds column Z. Here is the working code that will produce a, d: const countData = [1, 2, 3, 4].length; const initialLetter = 'A&a ...

The Ajax validation form mistakenly redirects the echoes to a different page instead of the intended page for displaying the output

I am currently working on creating an ajax-form to validate the client-side server of my sign-up form. My goal is to have error messages displayed on the same page where they are triggered, without loading a separate page. Below is the code from my (sign ...

Transforming every function into a for loop using jQuery

Previously, I sought help from the knowledgeable individuals on stackoverflow to assist me in shifting a background image the correct distance during a mouseover event. The solution worked smoothly, however, I am now pondering the efficiency of utilizing t ...

Restful Spinner

app.config(function(RestangularProvider) { RestangularProvider.addRequestInterceptor(function(element) { console.log("Request initiated"); return element; }); RestangularProvider.addResponseInterceptor(function(data) { ...

Add data to a JSON structure

I'm attempting to populate the screenshot object with all PNG files in the following code: common.getFilesInFolder(reportDir, '.png', function(err, PNGs) { if(!err && PNGs.length > 0){ for(var i=0; i< PNGs.le ...

Preserve data on page even after refreshing in Angular

Upon opening my website, I expect to see "Finance/voucher" at the top. However, after refreshing the page, only "Finance" appears which is not what I want. I need it to always display "Finance/voucher" even after a page refresh. I have included all the r ...

Express 4: The requested route was not found by the router

Encountering a peculiar issue - the initial route functions properly, but when trying the parameterized route, a 404 error is returned. const express = require('express'); const router = express.Router(); router.route('/') .get(fu ...

Injecting Vibrant Lines into Browser Using three.js

My current project involves drawing colored lines in a browser without using meshes. I am retrieving data from a MySQL database where geometry and other attributes are stored, and then converting this data into text blocks that create individual line objec ...

Utilize the $slots property when working with v-slot in your Vue application

When dealing with a specific use-case, it becomes necessary to retrieve the rendered width and height of a DOM element inside a slot. Typically, this can be achieved by accessing this.$slots.default[0].elm. However, complications arise when introducing sc ...

Can a websocket be used to communicate with a server that is not the same as the one hosting the html5 website?

My goal is to establish communication between a hardware device and an HTML5 website. It seems like the best way to do this would be through WebSockets or possibly WebRTC over a WiFi network. Is that correct? I haven't come across any solutions invol ...

Guide to sending parameters to the method function of the Vue.js router

I am encountering an issue while trying to pass 'joke.id' as a parameter to the router: edit: function(joke) { this.$router.push({ '/edit/' + joke.id }); } The specific route in question is: {path: '/edit/:id', compone ...

Tips for utilizing a personalized technique on an array

Can you explain why a custom method on an array is not functioning properly in this scenario? function runTestMethod() { alert("method running"); } String.prototype.testMethod = runTestMethod; var A = "A"; A = A.testMethod(); // This works ...

Unexpected Error with Background Position Variable

Hello, I am attempting to create an animated background effect that moves up and down using the .animate() and .hover() methods in jQuery. Within my DOM, there is a div with id="#menu" containing a UL list where each item has a background positioned at dif ...

The if-else statement doesn't seem to be functioning correctly once the else condition is included

I'm currently developing a search function for an address book that iterates through the contact array and displays them in a popup. Initially, it was working correctly by finding and displaying the contacts that were found. However, once I added the ...

C# Selenium Struggles to Find a Concealed Element coded in Javascript

Can anyone help me locate the element with the tag <span _ngcontent-c19=""> ACME Nursing </span> using Xpath or any other method? I have attempted various ways to use actions in order to moveToElement, as well as other methods, but I am unable ...

Formatting Numbers in HighCharts Shared Tooltip

My first experience with HighCharts JS has been quite positive. I am currently creating multiple series and using a shared tooltip feature. The numbers displayed in the shared tooltip are accurate, but the formatting is not to my liking. For instance, it s ...

The unzipper will disregard any empty directories within the file

I am a Japanese Web Developer. Unfortunately, I struggle with English. https://www.npmjs.com/package/unzipper This library is currently in use by me. Below you will find my code snippet: // unzip module import fs from 'fs-extra' import unzip ...

Is UseEffect selectively triggering specific components?

I am attempting to ensure that each time my search field changes, the code within useEffect is executed. Strangely, only console.log('hi') seems to be running while the other code is not. I am struggling to understand why useEffect is choosing t ...

Following the submission of a POST request, an error occurred stating: "Unable to assign headers once they have been sent to

I'm having trouble figuring out what's wrong with my code. Whenever I send a post request, I get an error message saying "Cannot set headers after they are sent to the client". My model includes a comment schema with fields for user, content, and ...