Can you explain the significance of the order of elements in the Three.js BufferGeometry vertex positions array?

This array showcases the vertex positions sourced from this particular section of the three.js official documentation:

var vertexPositions = [
    [-1.0, -1.0, 1.0],
    [1.0, -1.0, 1.0],
    [1.0, 1.0, 1.0],

    [1.0, 1.0, 1.0],
    [-1.0, 1.0, 1.0],
    [-1.0, -1.0, 1.0]
];

The order in which the elements (vertices) are listed in this array significantly impacts the resulting shape. Understanding why these vertices are arranged in a specific way is crucial for my goal of generating shapes programmatically. If I can grasp the significance of the vertex order, I believe it will greatly enhance my ability to manipulate and create geometries efficiently. Despite my attempts, I have been unable to decipher this on my own.

   

Answer №1

These are the vertices that define two triangles needed to create a square.

For example: https://i.sstatic.net/IABHe.jpg

This image was found through a quick Google search. Even though in this case, the diagonal runs from [-1,-1, 1] to [ 1, 1, 1].

The Z component of the 3D vertices simply shows where on the Z axis the square is located. Depending on the application, changing that value may not result in any visible changes.

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

Passing a JSON file name as an argument to a command line in Node.js

When I run app.js using the command node app.js, it will execute const inputData = require('./input.json'); Now, my question is - can I pass the file name as an argument to const inputData = require('./file.json'); directly from the co ...

Challenges with loading content on the initial page load using the HTML5

Upon page load, I wanted to save the initial page information so that I could access it when navigating back from subsequent pages. (Initial Page -> Page2 -> Initial Page) After some trial and error, I ended up storing a global variable named first ...

Greetings! I am looking for information on how to activate CORS in a Ruby on Rails API application deployed on OpenShift for use with an Angular

My current setup involves a script utilizing Angular to display records fetched from a Rails API REST, which is hosted in OpenShift. In my public/.htaccess file, I have included the following directives: Header add Access-Control-Allow-Origin "*" Header a ...

The issue of NETWORK ERROR cannot be fixed through the use of axios

I'm attempting to communicate with a backend server that is currently offline using axios const backendClient = axios.create({ baseURL : env }); The API call is made here: export const createExpensesRecord = async (createExpenseRecordCmd) => { ...

Steps for inserting an image onto a blank page

Struggling with HTML and javascript - need help with displaying an image on a new page: Creating a new page and want to show an image on it: thepage= window.open('', '', 'height=700,width=800,left=100,top=100,resizable=yes,scroll ...

Difficulty activating JavaScript function - unsure of proper implementation

I'm having trouble with calling a function instead of an alert in my code. I tried using FunctionsName(); and removing the alert(''); but it doesn't seem to be working for me :( Could someone please take a look at the following code an ...

There seems to be an issue with the bullet functionality in phaser.io

I'm having trouble firing a bullet from my object in my game. I have been struggling to find the proper reason for the issue. Here is a snippet of my code. Game.js var Game = { preload : function() { // spaceship image screen th ...

Using a number input with step increments of 0.01 in AngularJS can result in undefined values for specific inputs

An issue arises when using a specific type of input in angularjs (1.6.1) where the values between 9.03 to 9.05 inclusively return undefined. This problem also occurs with other values like 9.62, 9.63, and 17.31. <input type="number" step="0.01" data-ng ...

Navigate to the subsequent frame once the HTML5 video finishes playing

I have created a basic HTML webpage with a fullscreen background video (not set to loop) using the Vide plugin. Everything is working well, but I want the video to pause on the last frame to showcase a logo I have included at the end. This functionality w ...

What is the best way to compile TypeScript files without them being dependent on each other?

I have created a TypeScript class file with the following code: class SampleClass { public load(): void { console.log('loaded'); } } Now, I also have another TypeScript file which contains functions that need to utilize this class: // ...

Verify if the user is already present in the MongoDB database and authenticated with Passport

I'm currently exploring the usage of passport and I am in the process of setting up a "register" page functionality. The registration process is working smoothly, along with the log-in form. Yet, I am looking to implement a validation to check if the ...

New issue with installing npm cra

Recently updated to npm version 6.14.4 and encountered an issue while trying to create a new app with cra-template. How can I resolve this problem? npx create-react-app sphinx.ui.react Error Log 50 timing stage:runTopLevelLifecycles Completed in 5234ms ...

Switch the class between two elements using a link

Here is the HTML code I am working with: <a href="javascript:"> <img class="remove" src="images/remove.png" /> </a> <div class="content"> <h2>About</h2> <p>We are Sydney Wedding Photographers and have ...

What strategies can be employed to mitigate the activation of the losing arm in a Promise.race?

My current task involves sending the same query to multiple identical endpoints (about five) across various Kubernetes clusters. The goal is to aggregate the results without any delays and report failures to the user while continuing with the process seaml ...

Having trouble with shipit.js deployment: Error encountered - git checkout undefined

I have been using shipit.js to deploy my nodejs application on an Ubuntu 16.04 server successfully. However, I recently encountered the following error: ./node_modules/shipit-cli/bin/shipit production deploy start Running 'deploy:init' task... ...

Indexing text fields for MongoDB collection that have been populated

Currently, I am in the process of learning how to use indexing with Mongoose/MongoDB and I am facing an issue that I can't seem to resolve. This is the schema I am working with: const timeSchema = new mongoose.Schema({ actionId:{ type:St ...

ShaderMaterial for a line segment with a BufferGeometry in Three.js

Currently, I am working on creating a graph visualization using Three.js. I have successfully implemented a bufferGeometry to store my vertex data and I am rendering it using a custom ShaderMaterial to display thousands of Three.Points. However, I am now ...

The unique behavior of nested observables within an Ionic2/Angular2 application

Creating an ionic login module involves using 2 observables, with one nested inside the other. Uncertainty exists regarding whether this is the correct implementation. The process includes calling the getHTTP() method to retrieve a string. If the string i ...

The component "SafeAreaViewRN" could not be located within the UIManager

Upon attempting to open a bundle on my Android device, I encountered the following error message: A warning was displayed stating that the app was accessing a hidden field in android's view accessibility delegate. Additionally, an Invariant Violati ...

Adding additional filters to an already existing filter function while querying Azure Mobile Services

In my Angular Web App, I am utilizing the Azure Mobile Services library for JavaScript. The documentation states that there are two methods to filter returned data: passing a JSON object or using a filter function for more complex filtering. Since I need t ...