What is the Three.js equivalent for the resource named "GL_POLYGON"?

I'm struggling to create a polygon in a 3D space using Three.js. The resources I've found so far are not helpful for my specific needs.

Here are the coordinates of the polygon I want to draw:

    (  x,    y,    z )
P1: (-200, -200, -200) 
P2: ( 200,  200,  200) 
P3: ( 150, -150,  150) 
P4: (-200, -200, -200) 

The "z" coordinate value is always coming out as zero, which is not what I want.

var points = [];
points.push(new THREE.Vector3(-200, -200, -200));
points.push(new THREE.Vector3(200, 200, 200));
points.push(new THREE.Vector3(150, -150, 150));
points.push(new THREE.Vector3(-200, -200, -200));           

var squareShape = new THREE.Shape( points );
var geometry = new THREE.ShapeGeometry( squareShape );      
var material = new THREE.MeshBasicMaterial( { color: 0x357fff } );

var poligon = new THREE.Mesh( geometry, material );
scene.add(poligon);

If anyone has any insights or solutions, I would greatly appreciate the help.

Answer №1

Follow this comprehensive guide on creating a basic shape: Three.js OpenGL tutorial lesson 2

Begin by setting up a scene and incorporating the mesh into it (Scene.add(poligon );). Afterward, execute renderer.render(scene, camera); to display the rendering on the screen.

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

Using THREE.JS with interactive buttons for initiating and stopping animations

My goal is to trigger an animation from the GUI using THREE.js. The interface consists of two buttons, "Start" and "Reset," meant to control the rotation of a sphere. Clicking on the "Start" button should launch the animation, changing the button text to ...

Creating Transparent Rounded Backgrounds in Google Chrome Packaged Apps: Achieving the same look as Google Hangout app

Looking at the screenshot below, it is evident that the Hangout app has a fully transparent design with background shadow effect applied to it. I have tried various methods in vain, such as applying CSS styling to the "html" and "body" tags of the page, a ...

Utilize JavaScript to create a toggle menu feature that can target multiple variables with just one click function

I am attempting to create a collapsing menu on click functionality with additional modifications. One of the changes I would like to implement is altering the background of another element when the menu collapses. Currently, the code snippet only works fo ...

Integrate JavaScript date into the gulp-rev workflow

I have been encountering an issue while using the gulp-rev plugin to add a revision of my app/html page generated by the Yeomann webapp generator. My workflow involves zipping the app and then adding a revision, but I am having trouble replacing the hash t ...

Accessing the value returned by an asynchronous function in Node.js with Electron

As I embark on a new project, my goal is to take user input, process it through a function, and then return the updated value back to the user. Despite being a novice with async functions, I've done extensive research but still can't pinpoint if ...

What about those ready-made HTML components that have not been revealed yet?

If I have a form with property elements that need to be duplicated, and each property element is a div containing input elements. When the user clicks on an "Add Properties" button, I want another instance of this properties element to be created. The que ...

Prevent IonContent from scrolling to the bottom or top when using Ionic framework

In my Ionic app, I have a long text page with 2 buttons that trigger the actions scrollToBottom and scrollToTop. Due to the length of the page, I have set the scroll duration to be 30 seconds. I am facing two issues here: How can I stop the scrolling ...

"Discover the method for tallying the quantity of radio buttons based on their names within AngularJS

Can anyone guide me on how to determine the number of radio buttons by name in AngularJS using a directive? <label ng-repeat="elements in [1,2,3,4,5,6,7]"> <input type="radio" name="phone" ng-model="phone" value="example"> </label& ...

Display various React components for widgets

I am looking to display multiple instances of a widget in html. I have 3 divs with the same id, each with different attributes, and I want to render my react component three times on the page. Currently, I am only able to display the first component. Here ...

Unable to include checkout and clear cart buttons in popover within bootstrap 5

I am currently working with BootStrap version 5.0.0 beta-2 and facing an issue when attempting to dynamically add a button within my popover. I have ensured that the scripts are included in the following order: <script src="https://ajax.googleapis. ...

When a class and ID are dynamically applied, the click event may not fire and the CSS may not be applied

Hey everyone, I am facing an issue with declaring id and class when creating a table dynamically. I have tried multiple functions to make my click event work but without success. Can anyone help me with this? Below is the code for my dynamic table where I ...

Generate a folder structure based on the Delta data provided by the Dropbox API utilizing the file paths

I came across a query on how to convert a file path into a treeview, and I'm uncertain about achieving the desired outcome using JavaScript: My goal is to transform an array of paths into a JSON tree structure: var paths = [ "/org/openbm ...

JavaScript AJAX function is returning an undefined value rather than a boolean true or false

My AJAX call function in jQuery has a complete section with the following code: complete: function(XMLHttpRequest, textStatus) { if(textStatus == "success") { return(true); } else { return(false); } } However, when ...

Effortless integration of jQuery with Google Maps autocomplete feature

I've successfully implemented Google Maps Autocomplete on multiple input tags like the one below: <input class="controls pac-input" id="pac-input" type="text" onfocus="geolocate()" placeholder="Type custom address" /> To enable Google Maps au ...

Utilizing JavaScript to bring JSON image data to the forefront on the front-end

In my quest to utilize JavaScript and read values from a JSON file, I aim to showcase the image keys on the front-end. To provide clarity, here's an excerpt from the JSON dataset: { "products": {"asin": "B000FJZQQY", "related": {"also_bought": ...

The HTML image is not updating, the function does not appear to be triggering

My attempt to add a source to an image using JavaScript and some jQuery code I found online isn't working as expected: <html> <head> <script src = "http://www.example.com/images/"> var count=1; var initnumber=100 ...

Incorporating list updates in Angular

I am brand new to angular and currently working on adding functionality to a list. I have a couple of queries. Why does the console.log output for $scope.newChat show as undefined? Is newChat accessible to the sendChat() function due to variable hoistin ...

What is the method for entering text into a Code Mirror line using Selenium?

When I use IE to enter text into a CodeMirror-line text box, the text disappears when I try to save it. I have attempted using JavascriptExecutor to write to the CodeMirror, but it seems to only be for visual purposes. How can I input text into the code mi ...

Matching patterns with regular expressions in Javascript

There's a string that goes like this: |Africa||Africans||African Society||Go Africa Go||Mafricano||Go Mafricano Go||West Africa|. I'm attempting to craft a regular expression that will only match terms containing the word Africa or any variation ...

Is it possible to change the style of an element when I hover over one of its children?

Encountered an issue while working with HTML and CSS: //HTML <div> <div class="sibling-hover">hover over me</div> </div> <div class="parent"> <div>should disappear</div> </div> ...