Setting the vertices of a THREE JS geometry based on a specified angle

Question

Setting the vertices of a THREE JS geometry based on a specified angle

I have the desire to create a triangle with known angles (Alpha, Beta, Gamma) and side lengths (10).

In order to draw a triangle, I must assign 3 vertices to the geometry with specific Vector3 values.

Does THREE.js offer any tools or techniques suitable for this task?

geometry.vertices.push(
    new THREE.Vector3( 0,  0, 0 ),
    new THREE.Vector3( -10, -10, 0 ),
    new THREE.Vector3(  10, -10, 0 ),
);
geometry.faces.push( new THREE.Face3( 0, 1, 2 ));
var material = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } );

var mesh = new THREE.Mesh( geometry, material );

The only method in THREE.js that comes to mind is creating a 2 vector geometry with distances equal to side lengths, utilizing matrix translation to establish rotation center at vector[0], adjusting its position and rotation, and then applying globalToWorld() for vector[1]. However, I believe this may not be the most optimal solution.

javascript three.js

Answer 1

Answer №1

For this task, I utilized the following code snippet:

var length = 10;
var alpha = 0.3; // in radians
var beta = 1; // in radians
geometry.vertices.push(
      new THREE.Vector3(),
      new THREE.Vector3(length, 0, 0).applyAxisAngle(new THREE.Vector3(0, 1, 0), alpha),
      new THREE.Vector3(length, 0, 0).applyAxisAngle(new THREE.Vector3(0, 1, 0), beta),
      new THREE.Vector3(),
);

You can find more information on THREE.Vector3 in the official documentation here.

This code was used in a project involving THREE.JS version 96.

Answer 2

For this task, I utilized the following code snippet:

var length = 10;
var alpha = 0.3; // in radians
var beta = 1; // in radians
geometry.vertices.push(
      new THREE.Vector3(),
      new THREE.Vector3(length, 0, 0).applyAxisAngle(new THREE.Vector3(0, 1, 0), alpha),
      new THREE.Vector3(length, 0, 0).applyAxisAngle(new THREE.Vector3(0, 1, 0), beta),
      new THREE.Vector3(),
);

You can find more information on THREE.Vector3 in the official documentation here.

This code was used in a project involving THREE.JS version 96.

Setting the vertices of a THREE JS geometry based on a specified angle

Answer №1

Similar questions

Using AngularJS to incorporate ng-include with ng-click functionality

Best practices for managing multiple promises in Angular

What is the best way to distinguish a particular item in a <select> element and include a delete button for each row using jQuery?

Performing queries using the ORM Sequelize to fetch data from two separate tables simultaneously during a single page

The destruction of scope is not activated

Error encountered when extending Typography variant in TypeScript with Material UI v5: "No overload matches this call"

Utilize the HTTP path to designate the currently active tab

Why do my posts appear twice on the page after submitting a new post? When I refresh the page, the posts seem to duplicate

Sharing information between sibling modules

Strategies for Returning Multiple Values from a Function in JavaScript

Tips for binding to a single input box within an ngFor loop

Selecting items in an HTML table using a drag-and-drop feature for selecting square or rectangular sections with colspan and rowspan

Detecting URL changes, excluding just the hash, with JavaScript/jQuery

Dependency on the selection of items in the Bootstrap dropdown menu

Vercel deployment issue: Hidden input values not being detected as expected

Converting JavaScript code for Angular: A step-by-step guide

The reactivity of a Vue.js computed property diminishes when it is transmitted through an event handler

Displaying the votes through an advanced system called Ajax voting system

Using a PHP variable within a JavaScript function to incorporate its value into a select field, ultimately generating a response using JavaScript

Substitute <br /> tags with a line separator within a textarea using JavaScript