Creating unique shapes in Three.js

I'm having trouble creating a quad with four vertices in three.js. Here's the code I've written, but it doesn't seem to be working:

var pointA = { x:10,
            y:10}
var pointB = {x:50,
           y:50}

var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( pointA.x, pointA.y, 2 ) );
geometry.vertices.push( new THREE.Vector3( pointB.x, pointB.y, 2 ) );
geometry.vertices.push( new THREE.Vector3( pointB.x, pointB.y - 60, 2 ) );
geometry.vertices.push( new THREE.Vector3( pointA.x, pointA.y, 2 ) );
geometry.faces.push( new THREE.Face3(0,1,2) );
geometry.computeFaceNormals();
var material = new THREE.MeshBasicMaterial({ color: "0xff1100"});
var mesh = new THREE.Mesh( geometry, material );
scene.add(mesh);

Where am I going wrong with this code? Also, can I use Face4 instead of Face3 to render quads? Is there a comprehensive resource available for learning all webgl features at once? I find Three.js documentation to be quite organized and detailed.

javascriptthree.jswebgl

Answer №1

To create shapes in three.js, use two Face3 instead of Quads. Here is an example:

var a = { x:10,
          y:10 }
var b = { x:50,
          y:50 }

var geometry = new THREE.Geometry();

geometry.vertices.push( new THREE.Vector3( a.x, a.y, 2 ) );
geometry.vertices.push( new THREE.Vector3( b.x, a.y, 2 ) );
geometry.vertices.push( new THREE.Vector3( b.x, b.y, 2 ) );
geometry.vertices.push( new THREE.Vector3( a.x, b.y, 2 ) );

geometry.faces.push( new THREE.Face3( 0, 1, 2 ) ); // Make sure to follow counter-clockwise winding order
geometry.faces.push( new THREE.Face3( 0, 2, 3 ) );

geometry.computeFaceNormals();
geometry.computeVertexNormals();

Pro Tip: Use material.side = THREE.DoubleSide to render both sides of your geometry. Once it's correct, switch back to THREE.FrontSide.

If you need help learning three.js and WebGL, check out this resource: Learning WebGL and three.js

Powered by three.js r.70

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

The Route.get() function in Node.js is expecting a callback function, but instead received an unexpected object of type

Recently, I started coding with nodejs and express. In my file test.js located in the routes folder, I have written the following code: const express = require('express'); const router = new express.Router(); router.get('/test', (req ...

javascriptnode.jsexpress

Angular has reached the limit of 10 $digest() iterations while trying to create a deep copy of an array. As a

I am aiming to design a table with filters in the table header. The filter should display a list of unique values in each column. Below is a simplified version of the code: <table> <tr> <th class="dropdown" ng-repeat="field in data ...

javascriptjqueryangularjsarrays

What is the best way to delete an item (using its specific identifier) from an array within a mongoose/mongoDB model?

In my app, I have a User schema with a favorites key that stores an array of objects, each with a unique id. I am attempting to delete one of these objects based on its id. Here is the code snippet that I believe should accomplish this: User.updateOne({id ...

javascriptmongodbexpressmongoose-schema

The send_keys function in Selenium with Python operates exactly as intended

I have encountered an issue with uploading files in HTML using Selenium WebDriver. The element.send_keys(absfilepath) method does not work as expected. When I send a click command to the element, it opens the file upload window on my Linux operating system ...

javascriptpythonajaxselenium

What's the best way to exclude a column header in node.js with _.omit lodash?

const workbook = new Excel.Workbook(); const worksheet = workbook.addWorksheet(RESCOL); const collection = recdb.getCollection(RESCOL); collection.find().forEach(row => { if (RESCOL) { if (!hdrsWritten) { workbook.xlsx.writeFile ...

javascriptnode.jslodash

Strategies for sorting an array of objects based on specific attributes

Here is an array of objects containing finalists: finalistsCollection = [ { name: 'Ann' , sections: [{id: '132', name: 'someName'}, {id: '456', name: 'someName'}] }, { name: 'Jack' , sect ...

javascriptarraysfiltering

Are there any issues with setting event handlers using attributes?

Here's a question that might be considered suitable for beginners: You have the option of attaching event handlers using either addEventListener, attachEvent, or $().event(handler) Alternatively, you can use the onclick attribute to assign event han ...

javascriptjquery

How can we efficiently validate specific fields within arrays and objects in express-validator by utilizing the body() method?

I have organized my field names in an array as follows: const baseFields = [ 'employeeNumber', 'firstName', 'lastName', 'trEmail', 'position' ]; These are the only input fields I need to focus on for valid ...

javascriptnode.jsformsexpressexpress-validator

Can SVG use a transformation matrix to switch the values of x and y coordinates?

Currently using the svgpath library to manipulate SVGs, I am looking for a way to alter the coordinate system so that the y-axis becomes the x-axis and the x-axis becomes the y-axis. Is there any method to achieve this? I have attempted to rotate around ...

javascriptmathsvgnpm

Form_Open will automatically submit - Ajax Submission in CodeIgniter

I am facing an issue with submitting my form via Ajax. Despite setting up a function to prevent the page from refreshing upon submission, it seems like the form still refreshes the page every time I click submit. I even tried creating a test function to lo ...

javascriptjqueryajaxcodeigniter

Transmit the document to Django using Ajax

I am encountering an issue when trying to send an image using an AJAX request to Django. Below is the HTML code I am using: <form> <input type="file" id="files" name="image"> </form> Next, here is the corresponding JavaScript code: var ...

javascriptajaxdjango

Avoiding a browser becoming frozen during an AJAX call

I'm currently working on sending a request when a user closes the page using the onbeforeunload event. This event triggers when the tab is closed or the page is refreshed. Here's my event implementation: window.onbeforeunload = function() { ...

javascriptphpjqueryajax

Counting down the days until the new year arrives - JavaScript

I am currently developing a JavaScript countdown that will tick down every second until the end of 2016, at which point a message will be displayed to the user. However, I seem to be consistently one hour off from the actual time. I cross-referenced my cou ...

javascriptjquery

Is it possible to redirect any web traffic using an authentication script?

Scenario: I'm currently working on a social networking project and I'm looking for a way to validate every redirect or refresh by directing the user through another script before reaching their final destination. I've considered using a &apo ...

phpjavascripthtmlajaxapache

Completely obliterate all charts when using the ngDestroy method in Angular 4

In this function, I am responsible for drawing the charts: private drawCharts(charts) { this.charts = charts.map((chart, i) => { this.options.title.text = chart.title; const options = { type: this.type || 'bar' ...

javascriptangularchartschart.js

What is the advantage of parsing values in a switch statement compared to an if condition?

function checkInput() { let value = document.getElementById('test').value; if (value == 1) { console.log("It works with if statement"); } } function checkSwitch() { let value = document.getElementById('test').value; switc ...

javascripthtmlfunctionif-statement

Sending data to SOAP API using AngularJS

I've been struggling to send data to a SOAP API but have hit a roadblock. I've attempted various methods but continue to encounter errors when making the API call. The API URL is - and it requires data in XML format like <?xml version="1.0" ...

javascriptangularjsweb-servicessoapionic-framework

Steps to run a function for updating a JSON data file

I currently have a Leaflet map displaying weather data retrieved from a Json source. There is already a function in place that updates the data every x minutes using setInterval. setTimeout(function () { refreshId = setInterval(function () { ...

javascriptjsonajaxleaflet

The JavaScript slideshow fails to display an image during one rotation

The slideshow displays a sequence of images from pic1.jpg to pic8.jpg, followed by a 4-second pause with no image, and then repeats starting again at pic1.jpg. I am looking to have it loop back to pic1.jpg immediately after displaying pic8.jpg. Below is t ...

javascripthtml

A guide on resolving the 'Unexpected identifier array in JSON Parse Error' encountered during an AJAX Request

I'm currently working on setting up a Contact Form Validation and I require the variable $msg from a php script called 'sendEmail.php'. The actual mailing system is functional, as the script successfully receives form inputs from index.php a ...

javascriptphphtmlajax