Developing a collection of customized shapes comprised of circular-edged rectangles using the Three.JS

Question

Developing a collection of customized shapes comprised of circular-edged rectangles using the Three.JS

I have been on a quest for some time now. My aim is to replicate this visual element from - the beautifully arranged deck of cards. I know it was created using Three.JS, and my goal is to recreate it exactly as seen in that link.

The challenge I'm currently facing is my lack of experience with JavaScript and 3D-rendered objects. Despite this obstacle, I have chosen to tackle this project as part of my studies and am determined to succeed. Can someone offer their assistance, please?

My current code is a nonsensical mess and belongs in the trash. For this reason, I have not included it here. Apologies for the desperate plea, but I am running out of options.

javascript three.js

Answer 1

Answer №1

If you're looking to create a rounded rectangle appearance for your cards, I recommend checking out this example using THREE.Shape.

To make a flat card, you can refer to this live demo.

// Customize dimensions for the card shape
const x = 0;
const y = -0.1;
const width = 1;
const height = 1.2;
const radius = 0.2;

// Define the shape of the card
const shape = new THREE.Shape()
  .moveTo(x, y + radius)
  .lineTo(x, y + height - radius)
  .quadraticCurveTo(x, y + height, x + radius, y + height)
  .lineTo(x + width - radius, y + height)
  .quadraticCurveTo(x + width, y + height, x + width, y + height - radius)
  .lineTo(x + width, y + radius)
  .quadraticCurveTo(x + width, y, x + width - radius, y)
  .lineTo(x + radius, y)
  .quadraticCurveTo(x, y, x, y + radius);

// Create the card mesh
const geometry = new THREE.ShapeGeometry(shape);
const material = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

For arranging the cards in a grid layout, you can calculate their positions based on size and desired spacing. Obtain the object dimensions with Box3#getSize. This is used in the above demonstration to center the object within the scene.

const size = new THREE.Vector3();
new THREE.Box3().setFromObject(mesh).getSize(size);

Answer 2

If you're looking to create a rounded rectangle appearance for your cards, I recommend checking out this example using THREE.Shape.

To make a flat card, you can refer to this live demo.

// Customize dimensions for the card shape
const x = 0;
const y = -0.1;
const width = 1;
const height = 1.2;
const radius = 0.2;

// Define the shape of the card
const shape = new THREE.Shape()
  .moveTo(x, y + radius)
  .lineTo(x, y + height - radius)
  .quadraticCurveTo(x, y + height, x + radius, y + height)
  .lineTo(x + width - radius, y + height)
  .quadraticCurveTo(x + width, y + height, x + width, y + height - radius)
  .lineTo(x + width, y + radius)
  .quadraticCurveTo(x + width, y, x + width - radius, y)
  .lineTo(x + radius, y)
  .quadraticCurveTo(x, y, x, y + radius);

// Create the card mesh
const geometry = new THREE.ShapeGeometry(shape);
const material = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

For arranging the cards in a grid layout, you can calculate their positions based on size and desired spacing. Obtain the object dimensions with Box3#getSize. This is used in the above demonstration to center the object within the scene.

const size = new THREE.Vector3();
new THREE.Box3().setFromObject(mesh).getSize(size);

Developing a collection of customized shapes comprised of circular-edged rectangles using the Three.JS

Answer №1

Similar questions

Using Angular 4's ngModel can result in the transformation of data type from 'number' to 'string'

Is there a way to implement request-specific global variables for individual websocket connections in a Node.js application, similar to using res.locals for

Dealing with the challenges posed by middleware such as cookie access and memory leaks

I am looking to retrieve the values of checked checkboxes in a MUI multi-select component

Attempting to eliminate the mouseleave event by utilizing the jQuery off function

Selecting the content within a table to easily edit it

Sending a JavaScript click event using curl and PHP

Using Javascript to multiply strings

How to dynamically assign classes to a group of radio buttons based on their current state using ReactJS

A tip for transferring the value of a binding variable to a method within the template when the button is clicked

Updating comment content using Ajax

Invoke the jQuery document.ready function within a separate jQuery or JavaScript function

javascript for transforming date format

Tips for disabling the default behavior by using preventDefault in JavaScript

What is the most efficient way to transfer a string to a python program using ajax and retrieve a string in return?

I currently have a set of 6 popovers that all open simultaneously, but I am looking to make them open sequentially, one after

Problem encountered when utilizing the jQuery method .load()

Issue with cross-origin in Salesforce reply (Access-Control-Allow-Origin)

Using the jQuery function in conjunction with Infinite Ajax Scroll provides a seamless scrolling

What causes the scrollbar to move while I am dragging the div downward on the page?