Exploring the vertices of a single face of a cube using three.js

My current project involves manipulating the x position of all coordinates on a single face of a cube. Here is my current method:

var wDepth = 200;
var hDepth = 200;
var geo = new THREE.CubeGeometry( 20, 40, 40, 20, wDepth, hDepth);

        for ( var i = 0; i < wDepth; i++ ) {
            for ( var j = 0; j < hDepth; j++ ){
                var index = j * wDepth + i;
                geo.vertices[index].x += heightData[ index ];
            }
        }

However, when I view my model, I notice that an entire row from the face is missing (only the first point on the last row is transformed). How can I adjust my iteration to cover the entire face of the cube so that I can access and modify all points?

Answer №1

Initially, it appears that you may need to update the title of your query as it pertains to one side of a cube rather than a single face.
In terms of addressing your inquiry, one potential solution could involve manipulating the structure generated by three.js for the cube. Perhaps by identifying a pattern where the initial 500 faces or first few hundred vertices correspond to one particular side. However, the effectiveness of this method is uncertain. For a more robust and versatile approach, it is recommended to examine the face normals of each face as they indicate the desired orientation. An example of pseudo-code to achieve this could be: (where 'face index' refers to the vertices of a specific triangle)

for all geometry.faces 
if (geometry.face[i].normal.equals{Vec3(1,0,0}) then
       for each geometry.face[i].index 
       geometry.vertices[geometry.face[i].index].x = 4; 

By following this logic, faces pointing in a specific direction (e.g., positive x-axis) will have their x-coordinate adjusted to a predetermined value of 4. It is believed that employing a similar strategy should yield positive results.

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 jQuery click function triggers immediately upon the loading of the page

Despite my best efforts to resolve this issue independently and conduct extensive research on Google, I am still unable to identify the root of the problem. It seems that the click function continues to activate upon page load. Kindly elucidate the under ...

The useEffect alert is triggered before the component is re-rendered

Can someone help me understand why the HP in the code below is displayed as "1" when the alert is thrown, and only set to "0" after I confirm the alert? Shouldn't the component be rerendered before the alert is thrown so that it has already been displ ...

Does the syntax for the $.ajax() function appear to be incorrect in this instance?

I am attempting to use .ajax to retrieve the source HTML of a specific URL (in this case, www.wikipedia.org) and insert it into the body of a document. However, the code provided below is not producing the expected outcome. <!DOCTYPE html> < ...

The Vue component mistakenly saves the image to the incorrect location when the file @change event is triggered

I've encountered an issue with my image slider component. Users have the option to add an extra image to the end of the slider, but when there are multiple instances of the same slider component on a page, it always adds the image to the first compone ...

Convert Ajax null value to NoneType in web2py

Every time I save information on a page, an AJAX request is sent with all the necessary data to be stored in the database. The format of this data looks similar to this example: {type: "cover", title: "test", description: null, tags: null} However, when ...

Tips for adding your artistic touch to photos

I'm currently facing a challenge in creating a chart that overlaps an image. The bars and text on the chart are displaying perfectly when I remove the background image. However, I'm struggling to get the bars and text to appear on top of the imag ...

Angular directive for automatically selecting a <select> value when there is only one option available in ngOptions

How can I create a directive that automatically preselects an option if only one item is available in the ngOptions scope? Currently, my code looks like this: <select id="provider" name="provider" class="form-control" ng-model="foo.provider" ...

The asynchronous nature of how setInterval operates

I am working with a setInterval function that executes asynchronous code to make calls to the server: setInterval(()=> { //run AJAX function here }, 5000); In scenarios where the server does not receive a response within 5 seconds, there is a like ...

Fetching Unicode block specials using axios in getStaticProps with Next.js

Click here to view the code and data results My attempt using the fetch method was successful, but I encountered issues when trying to use 'axios' ...

Identifying the completion of loading a HTML page using an object tag

I am trying to load an HTML page using an object tag, and once the page is fully downloaded, I want to display something. I have attempted the following approach, but it is not working: document.querySelector(".obj_excel").addEventListener("load", funct ...

Using Selenium to Perform Drag and Drop Operations on an SVG Object

I am attempting to drag a specific Webelement and drop it inside an SVG "container" that contains four elements, which are represented by polygons. Each polygon is labeled as g[1], g[2], and so on. Here is the HTML code of the container: <div class=&qu ...

Ways to display JSON in a structured format on an HTML page

Is there a way to display JSON in a formatted view on my html page? The JSON data is coming from a database and I want it to be displayed neatly like the following example: { "crews": [{ "items": [ { "year" : "2013", "boat" ...

Refine the Crossfilter dimension according to the specified date range

What is the proper way to filter a date range using Crossfilter? The code above does not seem to yield any results, but I am certain that there are records within that specified time period. Var myDimension = CrossFilterObj.dimension(function(d) { retur ...

Why is the complete object not being saved in the mongoose subdocument array?

I encountered a problem with my two nested schemas, where one is inside the other as an array. Even though I tried to push into the array and save the subdocument, it didn't save correctly. The saved object only includes its _id without any other fiel ...

Conceal / Modify / Incorporate a picture

My ultimate goal is to have a hidden box and image that will be revealed based on the result of other functions. The box should change its background color, display an image, and switch images depending on the function called. I am facing two issues with ...

Creating a div overlay triggered by the addition of a child tag

Using the Paypal zoid feature, I have a button that opens an iframe in the parent div when clicked. However, the iframe causes the other contents of the website to shift around, making it look messy. I'm wondering if there is a way to make the parent ...

What is the most effective way to utilize getStaticPaths in a dynamic manner within next.js

There is a need to paginate static pages for each of the 3 blog categories, but the problem lies in the variable number of pages and the inability to access which category needs to be fetched in getStaticPaths. The project folder structure appears as foll ...

What is the best way to accurately determine an element's location after scrolling to it?

I'm currently working on pinpointing the location of a specific element on a webpage once it has been scrolled to using JavaScript. Queries: How can I precisely determine the position of an element post-scroll? What are some common errors or extra st ...

Tips for creating an editable div that can also incorporate a textarea and the option to upload or delete photos

On my website, users can upload images, names, and descriptions which are saved in a MySQL database. The information is then fetched to display on the website. The code below allows users to enter this information and see it displayed when they click the s ...

Issue with changing the opacity of a Javascript button style is not functioning correctly

The button's opacity used to change gradually in increments of 0.1 every 500 milliseconds, but now it instantly changes to 0.9 without the delay. Issue: Despite being placed within a window load handler and all elements loading properly, the loop is ...