Ever attempted to display a unique custom shape like a rhombic dodecahedron using Three.js?

Is there a way to render this shape?

Unfortunately, my attempt at creating a custom mesh failed and resulted in an error.

I found some old THREE.js code that partially solves the problem, but it relies on the deprecated THREE.Face4() method. After consulting StackOverflow, I attempted to use 2 THREE.Face3() as a workaround, which also didn't work. Here is the code snippet:

// Function to draw a square using '2 Face3' to emulate 'Face4', credits to @Kevin Miller and @Jonathan.

function drawSquare(x1, y1, x2, y2) { 
  var square = new THREE.Geometry(); 

  // Define four points for the square
  square.vertices.push( new THREE.Vector3( x1,y2,0) );
  square.vertices.push( new THREE.Vector3( x1,y1,0) );
  square.vertices.push( new THREE.Vector3( x2,y1,0) );
  square.vertices.push( new THREE.Vector3( x2,y2,0) );

  // Add two triangles to complete the square
  square.faces.push( new THREE.Face3( 0,1,2) );
  square.faces.push( new THREE.Face3( 0,3,2) );

  return square;
};

// Vertex coordinates of a rhombic dodecahedron obtained from sacred-geometry.es
var vertices = [ /* vertex coordinates here */ ];

// Faces of the rhombic dodecahedron created by drawing squares between specific vertices
var faces = [ /* face calculations here */ ];            

// Create the mesh for the rhombic dodecahedron
var rhombic_dodecahedron_geo = new THREE.Geometry();
for(c=0; c<vertices.length; c++) { rhombic_dodecahedron_geo.vertices.push( vertices[c] ) };
for(d=0; d<faces.length; d++) { rhombic_dodecahedron_geo.faces.push( faces[d] ) };

var rhombic_dodecahedron_mat = new THREE.MeshBasicMaterial( {color: 0x4B32AF, wireframe: false} );
var rhombic_dodecahedron = new THREE.Mesh(rhombic_dodecahedron_geo, rhombic_dodecahedron_mat);

scene.add(rhombic_dodecahedron);

If you notice any errors or have suggestions, I would greatly appreciate your help in resolving this frustrating issue. Thank you.

Answer №1

Below is the guideline to produce a unique polyhedron mesh:

// design
var structure = new THREE.Geometry();

// points
structure.points = [
    new THREE.Vector3(2.04772293123743050, -4.09327412386437040, -5.74908146957292670),
    new THREE.Vector3(7.02732984841516030, 1.40331541320251810, -1.62706516545639390),
    // more points...
];

// surfaces in an anti-clockwise sequence - crucial!
structure.surfaces.push(
    new THREE.Face3(8, 0, 9), new THREE.Face3(9, 1, 8),
    // more faces...
);

// normals (calculated as they are not explicitly mentioned)
structure.computeFaceNormals();
structure.computeVertexNormals();

// material - flat shading needed for polyhedron
var layer = new THREE.MeshLambertMaterial({ color: 0x479100, shading: THREE.FlatShading });

// mesh
mesh = new THREE.Mesh(structure, layer);
scene.add(mesh);

Remember to include light in your scene as it's necessary for Lambert material.

three.js version r.71

Answer №2

Building upon the insights provided by WestLangley, here is a simplified method to represent a rhombic dodecahedron using threejs.

To create a rhombic dodecahedron, you can place a square pyramid on each face of a square with a side length l and a height of l/2 (source: here).

https://i.sstatic.net/GKsCD.gif

The following code outlines the construction of a rhombic dodecahedron based on a square that:

  • Has its origin at (0, 0, 0)
  • Is rotated at (0, 0, 0)
  • Has a top face defined by points (A, B, C, D)
  • Has a bottom face defined by points (E, F, G, H)
  • Has a side length of 2

You may notice that my dodecahedron features half the number of faces compared to WestLangley's version. This is because each face of the resulting dodecahedron actually consists of two adjacent faces of the square pyramids mentioned earlier. [EDIT: I initially used Face4 for generating the rhombi, but since Face4 is deprecated, each of the rhombi below will need to be replaced with two triangles. The process should be straightforward.]

(jsfiddle)

var geometry = new THREE.Geometry();

// vertices
geometry.vertices = [
    new THREE.Vector3( -1,  1, -1 ), // A       (0)
    new THREE.Vector3(  1,  1, -1 ), // B       (1)
    new THREE.Vector3(  1,  1,  1 ), // C       (2)
    new THREE.Vector3( -1,  1,  1 ), // D       (3)
    new THREE.Vector3( -1, -1, -1 ), // E       (4)
    new THREE.Vector3(  1, -1, -1 ), // F       (5)
    new THREE.Vector3(  1, -1,  1 ), // G       (6)
    new THREE.Vector3( -1, -1,  1 ), // H       (7)
    new THREE.Vector3( -2,  0,  0 ), // left    (8)
    new THREE.Vector3(  2,  0,  0 ), // right   (9)
    new THREE.Vector3(  0,  2,  0 ), // top     (10)
    new THREE.Vector3(  0, -2,  0 ), // bottom  (11)
    new THREE.Vector3(  0,  0,  2 ), // front   (12)
    new THREE.Vector3(  0,  0, -2 )  // back    (13)
];


// faces - in counterclockwise winding order
geometry.faces.push(
  new THREE.Face4( 12, 2, 10, 3 ),  // (front, C, top, D)
  new THREE.Face4( 12, 6,  9, 2 ),  // (front, G, right, C)
  new THREE.Face4( 12, 7, 11, 6 ),  // (front, H, bottom, G)
  new THREE.Face4( 12, 3,  8, 7 ),  // (front, D, left, H)
  new THREE.Face4( 13, 5, 11, 4 ),  // (back, F, bottom, E)
  new THREE.Face4( 13, 4,  8, 0 ),  // (back, E, left, A)
  new THREE.Face4( 13, 0, 10, 1 ),  // (back, A, top, B)
  new THREE.Face4( 13, 1,  9, 5 ),  // (back, B, right, F)
  new THREE.Face4(  8, 3, 10, 0 ),  // (left, D, top, A)
  new THREE.Face4(  8, 4, 11, 7 ),  // (left, E, bottom, H)
  new THREE.Face4(  9, 1, 10, 2 ),  // (right, B, top, C)
  new THREE.Face4(  9, 6, 11, 5 )   // (right, G, bottom, F)

);

// normals ( since they are not specified directly )
geometry.computeFaceNormals();
geometry.computeVertexNormals();

// material - polyhedron requires flat shading
var material = new THREE.MeshLambertMaterial( { color: 0x479100, shading: THREE.FlatShading } );

// mesh
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

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

Utilizing React Router Dom to Showcase Home Route from a Sub-Route

www.mywebsite.com www.mywebsite.com/ www.mywebsite.com/1 I need my website to show the same content for each of the links above. Currently, it is not displaying anything for www.mywebsite.com and www.mywebsite.com/ function App() { return ( <Rout ...

When fetching data from a parse object, JavaScript displayed [object, Object] as the result

When trying to access information from my parse data, I am able to display user table data on my document without any issues. However, when I attempt to query another object and insert it into an id element using jQuery with functions like text();, html(); ...

What is the best way to remove items from a JSON object array using PHP?

I've got some PHP code and JSON data to showcase: PHP Code: <?php if (!empty($_POST) && isset($_POST['savechanges']) && $_POST['savechanges'] == 1 && isset($_SESSION['pageadmin'])) { $ou ...

Using the Vue composition API to invoke a method within a child component

Summary: How can I achieve the same functionality in Vue 3 composition API as using this.$refs in Vue 2? I am currently working on integrating PrimeVue's CustomUpload feature into a Vue 3 project. However, I have encountered an issue where the upload ...

Is it possible for a beginner like me in Node.js to incorporate external npm packages into Express.js and React.js?

Recently, I embarked on a journey to learn Node.js for backend development. In the past month or so, I have familiarized myself with various concepts such as npm, Express.js, Mongoose, and MongoDB for database management. During my npm exploration, I dis ...

`Regular expression for allowing only hyphens and numbers`

I am currently using the RegEx pattern ^[0-9]+$" to only allow digits, but I also want to include hyphens - and spaces as valid characters. Can anyone provide assistance in modifying the RegEx pattern accordingly? Previously, I attempted to achieve this ...

There seems to be a limitation in JS/JQuery where it is unable to append HTML that spans

I am encountering an issue with retrieving data in a div element. It seems that the function provided does not work correctly for files larger than a single line of code or even possibly a string. What can be done to resolve this? <ul class="dropdo ...

Could not complete operation: EPERM error indicating permission denied for 'stat' operation

Recently delving into Firebase Functions for my Flutter project has been a game-changer. Discovering the code generator, firebase_functions_interop, that seamlessly transforms Dart code into Javascript has made developing cloud functions in Dart a breeze. ...

Creating a HTML5 Geolocation object using Python: A step-by-step guide

For my software analytics testing, I am looking to send GET requests with a geolocation object that includes variable timestamps and locations. The website utilizes the HTML5 navigator.getcurrent.location() function. While I can use the random module to r ...

Is there a way to customize the pagination dots in react-native-swiper-flatlist?

Is it possible to customize the pagination dots style for react-native-swiper-flatlist? <View style={styles.container}> <SwiperFlatList autoplay={false} autoplayLoop={false} index={0} showPagination ...

Transform the CSS href attributes to different HTML pages when clicked

One interesting feature I am trying to implement on my website is the ability for users to select a color theme for their browsing experience. I have successfully created different themed external CSS files and even developed a function to seamlessly switc ...

Receiving an unknown value from the input field

I can't seem to retrieve the value of my input, as quantityElement.Value consistently returns undefined. Here is the section of my HTML and JS that I am struggling with. In my JavaScript function, the quantityElement always gives me an undefined whe ...

Tips for automatically populating an iframe with data using JavaScript

Hey there, I'm trying to automatically fill data in an iframe on a different domain. I've got some code but it doesn't seem to be working. Can anyone provide assistance? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.or ...

Issue encountered: The error message "Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client" is persisting despite using

Currently, I am in the process of verifying if certain data exists in the session. If not, the controller is supposed to redirect you to another route to obtain that necessary data. However, I have encountered an error stating "Error [ERR_HTTP_HEADERS_SENT ...

What is the most creative way you can think of to create a CSS/JS animated

Is using an animated SVG the best way to create these wavy blobs for mobile compatibility? What approach would you take? Here is a similar example I found var wave = document.createElement("div"); wave.className += " wave"; docFrag.appendChil ...

The callback attribute is not functioning correctly as anticipated

Here are two examples showcasing the use of the ref callback attribute. The first example includes a reference to the callback function, while the second one uses an arrow function as the value. The first example functions correctly. However, the second e ...

Adjusting the visibility of a div as you scroll

I'm trying to achieve a fade-in and fade-out effect on div elements when scrolling over them by adjusting their opacity. However, I'm facing difficulties in getting it to work properly. The issue lies in the fact that my div elements are positio ...

React infinite scroller - component fails to work when initial items are insufficiently loaded

In my Next.js app, I am dealing with a large firestore database containing many book objects. To filter these books based on keywords in their title, category, author, etc., I have implemented a searchbar. Due to the sheer volume of books, I am utilizing l ...

switch the visibility of the p tag based on its content

It seems like solving this shouldn't be too challenging, but I'm still learning when it comes to Javascript or JQuery. HTML: <p><span id="AddLine1Summary"></span>,</p> <p><span id="AddLine2Summary"></span& ...

differences in the reaction to special characters between IE10 and IE8

After searching extensively on Stack Overflow, I have yet to find a solution that addresses the unique challenge presented by my question. I have discovered that both dot and delete keys yield the same keycode (46) when checked for special characters. How ...