face4 in three.js creates a triangle shape instead of a square

I've encountered an issue while attempting to create a square using custom Geometry in tree.js. The code snippet I'm using is:

var cubeGeo = new THREE.Geometry();
cubeGeo.vertices.push( new THREE.Vector3( -25,  25, -25 ) );
cubeGeo.vertices.push( new THREE.Vector3(  25,  25, -25 ) );
cubeGeo.vertices.push( new THREE.Vector3( -25, -25, -25 ) );
cubeGeo.vertices.push( new THREE.Vector3(  25,  -25, -25 ) );
cubeGeo.faces.push( new THREE.Face4( 0, 1, 2, 3, new THREE.Vector3( 0,  0,  1 ), 0xffffff, 0) );

    var cube = new THREE.Mesh(
  cubeGeo,  
  //new THREE.CubeGeometry(50, 50, 50),
  new THREE.MeshPhongMaterial({color: 0x696969, emissive: 0x696969, specular:0x696969, shininess: 15})
);

However, instead of generating a square, it creates a triangle. Could someone please help me understand why this unexpected result is occurring?

javascriptgeometrythree.js

Answer №1

An issue arises with the THREE.Face4, which has been removed in the recent update. The GitHub Three.js - Wiki - Migration page explains:

r59 -> r60

Face4 is no longer available. Instead, use 2 Face3 to achieve similar functionality.

The reason behind seeing a triangle instead of a square is because:

THREE.Face4 = function ( a, b, c, d, normal, color, materialIndex ) {

    return new THREE.Face3( a, b, c, normal, color, materialIndex );

};

Answer №2

Face4.Three is no longer recommended.

To create a square using 2 Face3 instances, follow these steps:

function drawSquare(x1, y1, x2, y2) { 

    var square = new THREE.Geometry(); 

    //define 4 vertices
    square.vertices.push( new THREE.Vector3( x1,y2,0) );
    square.vertices.push( new THREE.Vector3( x1,y1,0) );
    square.vertices.push( new THREE.Vector3( x2,y1,0) );
    square.vertices.push( new THREE.Vector3( x2,y2,0) );

    //add first triangle
    square.faces.push( new THREE.Face3( 0,1,2) );

    //add second triangle
    square.faces.push( new THREE.Face3( 0,3,2) );

    //return the square object with both faces
    return square;
}

Answer №3

The correct shape to be drawn resembles a bow-tie instead. The order of the vertices is incorrect, so please swap the positions of the last two vertices.

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

Ways to extract text from a temporary element

Here is my HTML code: <div class="p-login-info" ng-show="loggedOut()">My text.</div> This is the corresponding JavaScript code: var e = element(by.className('p-login-info')); e.getText() .then(function(text){ var logoutText = ...

javascriptseleniumtextprotractorend-to-end

Using Vuejs: incorporating imported plugin mixins locally

Can a mixin from a VueJS plugin be used in just one component? I made a plugin and noticed that once I import it, I can use the mixin's functions in all my components. Is there a method to restrict it to just one component, or do plugins inherently ...

javascriptvue.jsvuejs2vue-componentvue-mixin

Visual elements failing to load in canvas due to fs/nodejs integration

I've been working with nodesjs and fs to set up a server that can render an HTML page. The HTML page includes a script written in JavaScript to create a canvas, load an image, and draw the image on the canvas. I've run into an issue where when I ...

javascriptnode.jshtml

What is the best way to send a JavaScript variable to PHP for storage in a WordPress database?

I am currently in the process of developing a star rating system within Wordpress and am looking to store the rating data in the Wordpress database. To achieve this, I have saved the star rating PHP code as a template within my Wordpress theme folder. Belo ...

javascriptphphtmlcssajax

The color of active links in TailwindCSS remains unchanged

In my project, I am using NextJS along with Tailwind CSS to create a top navigation bar. My goal is to change the text color for active links within the navigation bar. Below is the code snippet I have implemented: const Header = () => { return( ...

javascripthtmlcssnext.jstailwind-css

Tips for utilizing the feathersjs filter service efficiently

Hey, I'm a bit confused about what the filter service is and how to use it. I recently updated my node, npm packages, and all node_modules. When creating a new service, I receive a new file that looks like this: /* eslint no-console: 1 */ console.war ...

javascriptnode.jsexpressmongoosefeathersjs

Unable to fetch valid JSON from a different domain using JQuery and AJAX

I'm having trouble accessing a JSON api from a specific adult-themed website. I've been trying to make it work but so far no luck. You can find my code snippet in this jsfiddle: http://jsfiddle.net/SSqwd/ and here is the script: $.ajax({url: &ap ...

javascriptjqueryajaxjson

Utilizing Vue CLI's sourcemaps to pinpoint the styling within a Vue component file

Currently, I am working on a Vue CLI project. After setting up the project and making some development changes, my package.json file now includes: package.json "dependencies": { "bootstrap": "^4.3.1", "core-js": "^3.0.1", "preload-it": "^1.2. ...

javascriptvue.jswebpacksource-maps

Creating a Line with Dynamic Vertex Addition in Three.js

After successfully drawing a line in threejs, I encountered an issue with dynamically adding vertices to it. Despite my efforts to update the scene by setting geometry.verticesNeedUpdate = true, the changes do not reflect. ...

three.js

Jquery auto-suggest form validator

I have implemented a search dropdown menu using jQuery. Everything is working fine, and the 'not match' message displays properly when entering data that does not match any items. However, if I select an item from the dropdown and then modify it ...

javascriptjquery

Styling a textbox within a gridview using JavaScript

Looking for a way to format a textbox within a gridview using JavaScript? Take a look at how the gridview columns are set up: <Columns> <asp:TemplateField> <ItemTemplate><asp:ImageButton runat="server" id="imgbtnEnterAmt" ...

javascriptc#asp.net

When HTML elements are unable to access functions defined in separate JS files

After successfully resolving the issue, I am still curious as to why the initial and second attempts did not work: The problem lay with an HTML element connected to an event (myFunction()): echo '<button class="btn remove-btn" onclick="myFunction( ...

javascripthtml

What is the best way to connect to the Microsoft Azure Machine Learning Studio API - through Vue Axios or an Express

I am currently utilizing the following code to establish a connection with a web service. However, I now require assistance in connecting to the Microsoft Azure Machine Learning Studio Api using Vue Axios or Express. Can someone provide guidance? var http ...

javascriptnode.jsazureexpressvuetify.js

What is the most effective way to display multiple variables simultaneously in Mongoose/Node.js?

As a newcomer to programming, my initial major project involves building a website using Mongoose and Node.js. I have a query regarding rendering two variables for ejs simultaneously without encountering an error due to attempting to render a query that h ...

javascriptnode.jsasynchronousmongoose

Delete the placeholder image from a div once live content has been inserted into it

If I have a container div that displays an image when empty, but I want to remove the image when content is dynamically added to the container, what would be the most effective way to do this with jQuery? The usual method of checking if the container' ...

javascriptjqueryhtmlcss

Encountered an error: data.map is not functioning as expected in the React component

Hi there, I've encountered a small issue with my modal component. The error message I'm getting is: Uncaught TypeError: meatState.map is not a function. Any suggestions on what may be causing this problem? Your assistance would be greatly appreci ...

javascriptreactjs

programming issue: unable to resolve

The issue at hand involves creating a function that can determine the presence of all the letters from the second element in the array within the first element. For example, when given the arguments ["hello", "hey"], the function should return false becaus ...

javascript

Collecting Images Based on Quantity

Despite using async to download URIs on every request and closing when a certain count is reached, I am still encountering the issue of files not being downloaded properly and exiting before reaching their maximum. Can someone suggest the best solution t ...

javascriptnode.jsasynchronous

What is the best way to make changes to elements in an express array?

I have been developing an express application that enables users to manage a list of web projects through various HTTP methods such as get, post, put, and delete. So far, I have successfully implemented the logic for handling get, delete, and post reques ...

javascriptexpress

The 'innerText' property is not found in the 'Element' type

Currently, I am working with Typescript and Puppeteer. My goal is to extract the innerText from an element. const data = await page.$eval(selector, node => node.innerText); However, I encountered an error: The property 'innerText' is not ...

javascripttypescriptpuppeteer