Build an equilateral triangle with the power of three.js

I'm currently working on creating an equilateral triangle using three.js, but it seems like what I've created is a bit too tall. My vertices are defined as follows:

new THREE.Vector3(0, 0, 0),
new THREE.Vector3(4, 0, 0),
new THREE.Vector3(2, 4, 0)

Check out this fiddle to see what I have so far: http://jsfiddle.net/dkrotts/9d79ewff/. Any suggestions on how I can adjust this to create a triangle with equal sides?

Answer №1

The height of the triangle may seem a bit exaggerated, but that's because it is indeed tall. If you prefer each side to have a length of 4 units, then the third vertex, which is the top one, is not located at (2, 4, 0) but rather at (2, 3.4641, 0), where 3.4641 represents the square root of 12.

drawTriangle(
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(4, 0, 0),
  new THREE.Vector3(2, 3.4641, 0)
);

http://jsfiddle.net/9d79ewff/2/

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

Merge multiple underscore templates from a folder into one JavaScript file and then import it for use within a Backbone application

Is there a way to merge all underscore templates in a directory into a single js file, possibly precompiling it for use with the backbone.js portion of my sails.js application? I am considering using the plain fs module in node.js to read and combine the ...

Encountering a value accessor error when attempting to test a simple form in Angular 4 and Ionic 3

My ionic form is quite simple: <ion-header> <ion-navbar> <ion-title>Foo</ion-title> </ion-navbar> </ion-header> <ion-content padding> <form [formGroup]="fooForm"> <ion-item> ...

What is the best method to place files from a file input into an array in the Firefox browser?

(I am using Vue 3) I have a functionality where I add files from an input file to an array, and then conditionally render these file names. Everything works perfectly on Chrome, but I encountered an issue with Mozilla Firefox. In Firefox, the array of file ...

Exploring the power of Angular through the use of promises with multiple

I've come across some forum discussions about angular promises in the past, but I'm having trouble implementing them in my current situation. My backend is nodejs/locomotive and frontend is Angular. In the controller code below, I am trying to a ...

Bring in items and then go through each one

I'm curious if there's a way to loop through imported objects? import { Row, Col, Form, FormItem, Icon, Input, Tooltip, Image, Button, Dialog } from 'element-ui' objects.forEach(object => { // do something here }) When I have a ...

Getting an error message like "npm ERR! code ENOTFOUND" when trying to install Angular CLI using the command "

Currently, I am eager to learn Angular and have already installed Node version 18.13.0. However, when attempting to install Angular CLI using the command npm install -g @angular/cli, I encountered an issue: npm ERR! code ENOTFOUND' 'npm ERR! sys ...

Debugging Typescript code with line numbers

When opening the console in a browser, typically the javascript line number of a function call or error message is displayed. However, my current setup involves using TypeScript, which gets compiled to Javascript. I am wondering if there is a way to retr ...

Can anyone suggest a method to block the execution of Javascript commands in the console?

Regarding the inquiry mentioned in the question title. Is it possible to prevent individuals from executing functions on my webpage using the console, even though it is not necessary? I have experimented with various methods, and the code below represent ...

React Native animation encountered a rendering issue: Invalid transform scaleDisliked value: { "scaleDisliked": 1 }

While working on my react native app, I encountered an issue when trying to apply a transform:scale effect to an Animated.View component. I am using interpolate for this purpose, but unfortunately, I keep receiving the following error message: Render error ...

JavaScript: Add an element to the precise middle of an array

Sorry if this is a repeat question, but I couldn't find the answer despite searching. Let's say there's an array of unknown length and you want to insert items at a specific position, such as the center. How can you achieve this? Here&apos ...

Converting object values to strings is a common practice during JSON posting operations

I encountered an issue with a date object when sending it to a NodeJS server. While the object is still preserved, the time gets converted to a string during the process. Is there a way to prevent this conversion? I tried parsing the object but received an ...

Launch an Android application directly from a web browser upon the webpage's loading

When a user visits www.example.com/myApp, I want my app to open automatically without any click required. I have attempted the following methods: window.onload = function () { window.location.replace("intent://something#Intent;scheme=myapp;packag ...

The hamburger menu on the navigation bar only functions the first time it is clicked

I've encountered an issue with my hidden menu nav bar. The hamburger and close buttons only work once. Should I organize the events within a function and call it at the end, or perhaps use a loop for the button events? It's worth noting that I d ...

Issues detected with the functionality of Angular HttpInterceptor in conjunction with forkJoin

I have a Service that retrieves a token using Observable and an HttpInterceptor to inject the token into every http request. It works seamlessly with a single request, but when using forkJoin, no response is received. Here is the code for the interceptor: ...

Tips for sending AngularJS expressions to a controller

I am looking to pass a value from an AngularJS Expression to the controller. Here is the HTML code : <div data-ng-controller="AlbumCtrl"> <div data-ng-repeat="z in songInfo"> <div data-ng-repeat="b in z.album& ...

The iPad Air 2 experiencing issues with rendering on three.js

Recently, I've transitioned to using an iPad Air 2 for work and decided to explore equirectangular panoramas. While these panoramas work perfectly on my desktop, I was excited about utilizing the device orientation features on my iPad/iPhone. However ...

Exploring HTML5 video playback in AngularJS

When I use this code: <video id="video" class="video-js vjs-default-skin" controls width="640" height="264"> <source src="http://localhost:3000/files/public/photos/Let-her-go.mp4" type='video/mp4' /> <p class="v ...

Stopping a NodeJS script execution: Tips and Tricks

While working on my NodeJS application, I've noticed that occasionally my CPU usage spikes to 100%, but there is no memory variation. This causes my Event Loop to become blocked by the operation. I recalled how browsers handle problematic scripts by ...

Creating a time-limited personal link with Django Rest Framework and React

I have a frontend application built with React Framework that I want to provide access to via a time-limited personal link, without the need for additional authentication functions. With approximately 1-2 new users per day, my proposed implementation is as ...

Selenium and JavaScript integration for opening new browser tabs

Hello there, I am looking to open new tests ('it' method) in new tabs and currently trying this approach: driver = new Builder().forBrowser('chrome').build(); beforeEach(() => { // driver.manage().window().open('url') ...