I am looking to create a 2D octagon using Three.js

When attempting to create a regular octagon, I encountered an unusual triangle with this code:

    var geom = new THREE.Geometry(); 

    geom.vertices.push( new THREE.Vector3(100, 250, 0));
    geom.vertices.push( new THREE.Vector3(250, 100, 0));
    geom.vertices.push( new THREE.Vector3(250, -100, 0));
    geom.vertices.push( new THREE.Vector3(100, -250, 0));
    geom.vertices.push( new THREE.Vector3(-100, 250, 0));
    geom.vertices.push( new THREE.Vector3(-250, -100, 0));
    geom.vertices.push( new THREE.Vector3(-250, 100, 0));
    geom.vertices.push( new THREE.Vector3(-100, 250, 0));

    geom.faces.push( new THREE.Face3(0, 1, 2));
    geom.faces.push( new THREE.Face3(0, 2, 3));
    geom.faces.push( new THREE.Face3(0, 3, 4));
    geom.faces.push( new THREE.Face3(0, 4, 5));
    geom.faces.push( new THREE.Face3(0, 5, 6));
    geom.faces.push( new THREE.Face3(0, 6, 7));



    var material = new THREE.MeshBasicMaterial();

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

    mesh.position.set(0, 0, -1000);

    scene.add(mesh);

In addition, one of the vertices of the resulting triangle seems to be located in a position not specified in the code. It appears that only the last face added is being displayed, but my expectation was to see all faces connecting to form a regular octagon.

javascriptthree.jscoordinates

Answer №1

In the sequence of vertices in a face, they should be arranged counter-clockwise, and it's important to note that the 5th and 8th points must be different:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 500);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);

var geom = new THREE.Geometry();

geom.vertices.push(new THREE.Vector3(100, 250, 0));
geom.vertices.push(new THREE.Vector3(250, 100, 0));
geom.vertices.push(new THREE.Vector3(250, -100, 0));
geom.vertices.push(new THREE.Vector3(100, -250, 0));
geom.vertices.push(new THREE.Vector3(-100, -250, 0)); //  y-coordinate is corrected
geom.vertices.push(new THREE.Vector3(-250, -100, 0));
geom.vertices.push(new THREE.Vector3(-250, 100, 0));
geom.vertices.push(new THREE.Vector3(-100, 250, 0));

geom.faces.push(new THREE.Face3(0, 2, 1)); // order of vertices
geom.faces.push(new THREE.Face3(0, 3, 2));
geom.faces.push(new THREE.Face3(0, 4, 3));
geom.faces.push(new THREE.Face3(0, 5, 4));
geom.faces.push(new THREE.Face3(0, 6, 5));
geom.faces.push(new THREE.Face3(0, 7, 6));

geom.computeFaceNormals();
geom.computeVertexNormals();

var material = new THREE.MeshBasicMaterial({
  color: "white"
});

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

scene.add(mesh);

var points = new THREE.Points(geom, new THREE.PointsMaterial({
  size: 20,
  color: 0xff0000
}));
scene.add(points); // just to visualize the points

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
body {
  overflow: hidden;
  margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

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

Guide to activating the isActive status on a live link within a map iteration utilizing the NEXTUI navigation bar

Check out the new NEXTUI navbar I'm using: I am having trouble setting the isActive property on the active link in my NavBar component in Next.js. I couldn't find much help on Google, so I'm hoping someone here has experience with this or k ...

javascriptreactjsnext.js

Surprising results from using the useCallback hook in my React component

I am brand new to the world of React and JavaScript. Currently, I am working on building a component that utilizes the HighCharts library. One of the functionalities I am trying to implement involves a formatter callback. This callback should be able to ac ...

javascriptreactjshighchartsreact-hooks

Exploring the ins and outs of webpage loading speed

I am working on writing JavaScript code that includes a button to open a webpage of my choice. I now want to understand how to detect when the page I called is finished loading. Any suggestions or ideas on this topic? I apologize if my explanation was no ...

javascripthtmlcss

FullCalendar Angular 10 not displaying correct initial view

I am currently using Angular 10 along with FullCalendar version 5.3.1., and I am facing an issue where I cannot set the initial view of FullCalendar to day view. It seems to be stuck on the dayGridMonth view by default. Below is the HTML snippet: <full ...

javascriptangularfullcalendarfullcalendar-5

What happens if the conditions in a JavaScript if statement are not satisfied?

It seems I've encountered a puzzling logic error that has me stumped. While all conditions besides 1024 are triggering the correct if statements, for some mysterious reason, the 1024 condition isn't being met. Any insights would be greatly apprec ...

javascriptangularjsif-statement

Ways to confirm the presence of animation data in a glTF file

When I try to transition from displaying a static mesh (which works fine) to an animated one, I encounter some errors. I have a feeling that the problem lies in the FBX file that I'm exporting to glTF format. Here are my questions: Firstly, how can I ...

animationthree.jsgltf

Using Node.js and Express to retrieve data from a MySQL database and update a table

My .ejs file contains a form that sends data to a MySQL database and then displays two tables with the retrieved data on the same page. However, I am facing an issue where the tables do not refresh after submitting the form, requiring me to restart the ser ...

javascriptmysqlnode.jsexpress

Adjusting the height of an element as you scroll will activate the scroll event

One issue I'm facing is with adding a class to my header. The goal is to reduce the height of the top part of the header when the user scrolls down and then remove the class when they scroll back up. While this functionality is working, there is an un ...

javascriptjquerycssonscroll

Querying Denormalized Data in AngularFire 0.82: Best Practices and Strategies

I have a question that is related to querying denormalized data with AngularFire. I am looking for a solution specifically using AngularFire (current version 0.82). Here is an example of the data structure I am working with: { "users": { "user1": { ...

javascriptangularjsfirebaseangularfire

Displaying a meager 0.5% on the BootStrap progress indicator

Utilizing the bootstrap progress bar to display the percentage of a person's miles covered out of a total of 23,872 miles. Take user A as an example, they have covered only 5 miles: 5/23872 = 0.00020945 * 100 = 0.02094504 miles. Currently, anything ...

javascriptangularjstwitter-bootstrapprogress-bar

Javascript problem: Trouble with event.clientX position

I found a great resource on learning javascript at this website, I'm having trouble understanding the code snippets in function XY(e, v), specifically these two lines: event.clientX + document.documentElement.scrollLeft and event.clientY + document ...

javascripthtmlinternet-explorer

Deactivate click events in the container div

Here is the html code snippet that I am working with: <div class="parent" ng-click="ParentClick()"> . . . <div class="child" ng-click="ChildClick()"> Some Text </div> </div> When clicking on Som ...

javascripthtmlcssangularjs

Dockerode is compatible with node, but unfortunately, it does not function properly when utilized with

I am on a mission to develop a web application capable of initiating a Docker container. To achieve this, I have incorporated the dockerode module into my project. The compact module setup looks like this: //index.js var Docker = require('dockerode& ...

javascriptnode.jsdockerwebpack

The onChange event for React select is being triggered twice, incorrectly using the old value the second time

I am currently implementing React Select to display a list of items. When an item is changed, I need to show a warning based on a specific flag. If the flag is true, a dialog box will be shown and upon confirmation, the change should be allowed. After each ...

javascriptreactjsreact-reduxreact-hooks

Unable to submit form in Node.js with Express

I am just starting out with node.js and I need help with a sample form to insert values into a database. Below is the code snippet for my test page: <form action="/create" method="POST" class="form-horizontal" enctype="application/x-www-form-urlencode ...

javascriptnode.jsexpress

What could be causing jQuery document ready to restrict access to global variables?

Currently, I am working on a project that involves three separate JavaScript files (example1.js, example2.js, and example3.js) being scripted into a single HTML file (index.html). These JS files are responsible for making an API call and manipulating the r ...

javascriptjquery

Performing CRUD operations with mongoose and express

My express app is currently being developed with mongoose, and the goal is to integrate it with React for the front end. In my customer controller, I have outlined some CRUD operations, but there are aspects of this approach that I find unsatisfactory. W ...

javascriptnode.jsmongodbexpressmongoose

Incorporating the Material UI App Bar alongside React Router for an enhanced user

For my web development course project, I am venturing into the world of JavaScript and React to create a website. Utilizing Material UI's appbar for my header design, I have successfully incorporated react router to enable navigation on my site. Howev ...

javascriptreactjsreact-routermaterial-ui

THREE Illumination diminishing as distance increases

The documentation for THREE.DirectionalLight states that this light will act as if it is infinitely far away and the rays it emits are all parallel. However, I have noticed that as I move an object with THREE.MeshStandardMaterial farther from the light ...

three.js

Guide to creating a cryptosystem using a Synchronous Stream Cipher with Vue js

I am currently working with a pseudo-random number generator that creates binary numbers using a user-supplied polynomial and the LFSR method. To enhance the process, I need to convert a loaded file into binary format so that I can apply the XOR operatio ...

javascriptvue.jscryptography