Creating a custom Shape Geometry that is derived from BoxBufferGeometry

Looking to create a ShapeGeometry that can be defined by a list of points representing the shape boundary or faces, along with a corresponding list of textures for each face. While the BoxBufferGeometry class provides a starting point, I am in need of guidance and examples on how to handle a variable number of points and calculate vertices, indices, normals, and UVs procedurally based on this list of points or vectors.

I have extended the buildplane section to accommodate two cubes, resulting in two nested cubes being displayed. However, I am unsure how to position or place the second set of shape vectors in relation to the first. Although I have tried using the merge mesh function, it causes the joined faces to display a line despite being on the same "plane". Additionally, custom angles cannot be achieved using existing geometries.


buildPlane( 'z', 'y', 'x', - 1, - 1, basedepth, baseheight, basewidth, depthSegments, heightSegments, 0 ); // px
buildPlane( 'z', 'y', 'x', 1, - 1, basedepth, baseheight, - basewidth, depthSegments, heightSegments, 1 ); // nx
buildPlane( 'x', 'z', 'y', 1, 1, basewidth, basedepth, baseheight, widthSegments, depthSegments, 2 ); // py
buildPlane( 'x', 'z', 'y', 1, - 1, basewidth, basedepth, - baseheight, widthSegments, depthSegments, 3 ); // ny
buildPlane( 'x', 'y', 'z', 1, - 1, basewidth, baseheight, basedepth, widthSegments, heightSegments, 4 ); // pz
buildPlane( 'x', 'y', 'z', - 1, - 1, basewidth, baseheight, - basedepth, widthSegments, heightSegments, 5 ); // nz

buildPlane( 'z', 'y', 'x', - 1, - 1, facedepth, faceheight, facewidth, depthSegments, heightSegments, 6 ); // px
buildPlane( 'z', 'y', 'x', 1, - 1, facedepth, faceheight, - facewidth, depthSegments, heightSegments, 7 ); // nx
buildPlane( 'x', 'z', 'y', 1, 1, facewidth, facedepth, faceheight, widthSegments, depthSegments, 8 ); // py
buildPlane( 'x', 'z', 'y', 1, - 1, facewidth, facedepth, - faceheight, widthSegments, depthSegments, 9 ); // ny
buildPlane( 'x', 'y', 'z', 1, - 1, facewidth, faceheight, facedepth, widthSegments, heightSegments, 10 ); // pz
buildPlane( 'x', 'y', 'z', - 1, - 1, facewidth, faceheight, - facedepth, widthSegments, heightSegments, 11 ); // nz

Currently seeking a solution to plot vectors or points in 3D space, define faces, and assign unique textures to each face as the shape is dynamically generated at runtime from saved data including location, size, and textures.

Illustration of the issue at hand:

Answer №1

If you want to create a buffer geometry from edge vertices, consider using a helper function to fill in the "position," "color," and "uv" buffer attributes. It is not recommended to use indexed buffered geometry for this purpose.

For examples of how to do this, check out the following links: Custom buffer geometry

Indexed buffer geometry

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

Unable to move cursor in contenteditable section

I am currently working on developing a rich text editor in React, but I have encountered an issue that has me stuck. The problem I am facing is that as I type each character, the insertion point does not update accordingly, causing the cursor to remain stu ...

Guide to tallying the occurrences of a specific key within an object array and attaching the count to each key's current value

Is there a way to determine the number of occurrences of the 'value' key within an object that is part of an array, and then add the count to each value if applicable? In this case, 'a' represents the original data var a = [ { id: ...

Guide on sending JSON messages between Node.js services within a Docker Compose environment

If I have two Node.js services running in a Docker Compose, one listening on port 4000 and the other on port 5000, how can I exchange JSON messages between them using Express? ...

Mapping textures to ThreeJS objects using UV coordinates

I'm currently in the process of creating a configurator for custom cups. These cups will be showcased in 3D and customers will be able to upload their own designs as textures. However, in order for the design to be properly displayed, it needs to be u ...

Prevent a <span> element from affecting the linking functionality of an <a> tag

Is it possible to make a hyperlink clickable without including the <span> tags within it and instead attaching a jQuery event to those tags? This is the code I'm using. It utilizes bootstrap's list-group for a navigation element: <ul cl ...

Cross-Origin Resource Sharing (CORS) for HTML

Here is a code snippet I found on http://jakearchibald.com/scratch/alphavid/ $("#video").append('<video id="movie" style="display:none" autobuffer><source id="srcMp4" src="https://host-away-from-host.com/file.mp4" type=\'video/mp4; ...

The assignment of object properties seems to be failing in the outcome produced by Mongoose

After running a mongoose find query and storing the result in an object, I attempted to add a total coin value to each object by using the exec operation. However, when I printed the object on the console, it seemed that the value was not being assigned an ...

Unable to retrieve private field using a public getter method through a proxy

When retrieving data from a VueX Module using a Getter, the Object is enclosed within a Proxy that triggers the following error: TypeError: attempted to get private field on non-instance when attempting to access a private property with a public getter. ...

The process of altering the color of a table row in JavaScript can be done after dismissing a pop-up that was triggered by a button within the same row

I am tasked with changing the color of a specific table row based on user interaction. The table consists of multiple rows, each containing a button or image. When the user clicks on one of these buttons or images, a popup appears. Upon successful data sub ...

Generate a hard copy of the data table row without needing to view it beforehand

Here are some records from a table: +--------+---------+-------+----------+--------+ | Name | Address | Phone + Email | Action | +--------+---------+-------+----------+--------+ | Andy | NYC | 555 | <a href="/cdn-cgi/l/email-protection" cl ...

Displaying 100,000 sprites with a faint 0.1 opacity, utilizing see-through backgrounds and crisp antialiasing

In my current setup, I have the following key pieces of code: Renderer renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, canvas: canvas }); Textures dot: THREE.ImageUtils.loadTexture('./assets/images/dot.png') Material ...

Error encountered in Angular CLI: Attempting to access property 'value' of an undefined variable

I am encountering an issue while trying to retrieve the values of radio buttons and store them in a MySql database. The error message I receive is TypeError: Cannot read property 'value' of undefined. This project involves the use of Angular and ...

Sending the complete form action URL without any interruption

Is there a way to send this entire string all at once? It seems to work when I use a URL shortener like bit.ly, but it breaks when I leave it as is. Any suggestions? <script> function go(){ window.frames[0].document.body.innerHTML='<f ...

What is the best way to efficiently input identical data into multiple controllers ($scope) using just one call in AngularJS?

I have a situation where I am using a factory to make a call in two controllers on the same page. However, I want to avoid making an AJAX call twice. I tried using $q.defer(), but it doesn't seem to be working! Here is the code snippet: (function ...

Exploring the retrieval of JavaScript array elements from a ListModel within QML

Currently, I have some JavaScript data that consists of a list of objects containing other objects and arrays, which I want to append to a ListModel. This is what the structure looks like (assuming that the data is generated elsewhere and its structure sh ...

Is it possible to utilize a CSV file to dictate which images should be utilized on my website as a guide?

I'm currently working on my website's gallery and have a collection of over 60 images. I'm exploring ways to streamline the process of displaying these images by having the website read their names from a CSV file instead of manually coding ...

Header vanishes while using a JavaScript function to search through an HTML table

I'm facing an issue with a search function in a php script. The search function, written in javascript, is designed to sift through the table below and extract matching content as the user inputs text into the search field. It looks specifically withi ...

Can someone explain why I am consistently receiving the value of undefined when accessing the file Object?

Hi there, I'm new to this so I could really use some assistance... I'm currently working on an API where only registered users can upload a card with an image of their asset for rent. In my cards.js file, I have a post request that should respo ...

Transfer the Vue query parameter from the current route to the router-link

Why is it so challenging to detect and pass query parameters in Vue components? I'm trying to access the router from my component, but nothing seems to be working. How can I achieve this? <router-link :to="{ path: '/', query: { myQue ...

Looking to update the display of an array received in JSON format and then show it using ng-repeat?

Upon receiving a response from the backend, I am saving it in a variable called "allinfo" in my controller. The data received includes the name, date of birth, and hobby of a person. The hobby is an array that can contain any number of elements. In my vie ...