Geometry of Rounded Corners Box - three.js

Question

Geometry of Rounded Corners Box - three.js

Although this question is primarily related to Math, I believe there may be alternative solutions available within threejs for my particular issue.

My goal is to iterate through each vertex in a Box Geometry and determine whether it needs to be moved up or down by a specific value. In this case, we are only concerned with the y-values of each vertex.

var width = 200,
    height = 100,
    depth = 50;
var roundCornerWidth = var roundCornerHeight = 10;
var helpWidth = width - 2*roundCornerWidth,
    helpHeight = height - 2*roundCornerHeight;

var boxGeometry = new THREE.BoxGeometry(width, height, depth, 100, 50, 10);
boxGeometry.vertices.forEach(v => {
  if(Math.abs(v.x)>helpWidth/2){
    if(Math.abs(v.y)>helpHeight/2){
      let helper = Math.abs(v.x)-helperWidth/2;
      v.y = Math.sign(v.y)*(helperHeight + Math.cos(helper/roundWidth * Math.PI/2)*roundHeight);
    }
  }
});

The current code produces corners similar to those shown in the example image, which are not aesthetically pleasing! :(
We need an alternative method other than using the cos() function.

javascript math three.js geometry

Answer 1

Answer №1

I have implemented a method that does not involve trigonometric functions, but instead utilizes vector manipulation:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(50, 50, 150);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var radius = 10;
var width = 200,
  height = 100;
var geometry = new THREE.BoxGeometry(width, height, 50, 100, 50, 10);

var v1 = new THREE.Vector3();
var w1 = (width - (radius * 2)) * 0.5,
  h1 = (height - (radius * 2)) * 0.5;
var vTemp = new THREE.Vector3(),
  vSign = new THREE.Vector3(),
  vRad = new THREE.Vector3();
geometry.vertices.forEach(v => {
  v1.set(w1, h1, v.z);
  vTemp.multiplyVectors(v1, vSign.set(Math.sign(v.x), Math.sign(v.y), 1));
  vRad.subVectors(v, vTemp);
  if (Math.abs(v.x) > v1.x && Math.abs(v.y) > v1.y && vRad.length() > radius) {
    vRad.setLength(radius).add(vTemp);
    v.copy(vRad);
  }
});

var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
  color: "aqua",
  wireframe: true
}));
scene.add(mesh);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

A limitation is that adjusting the smoothness of the edges requires increasing the number of segments in width, height, or depth.

Answer 2

I have implemented a method that does not involve trigonometric functions, but instead utilizes vector manipulation:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(50, 50, 150);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var radius = 10;
var width = 200,
  height = 100;
var geometry = new THREE.BoxGeometry(width, height, 50, 100, 50, 10);

var v1 = new THREE.Vector3();
var w1 = (width - (radius * 2)) * 0.5,
  h1 = (height - (radius * 2)) * 0.5;
var vTemp = new THREE.Vector3(),
  vSign = new THREE.Vector3(),
  vRad = new THREE.Vector3();
geometry.vertices.forEach(v => {
  v1.set(w1, h1, v.z);
  vTemp.multiplyVectors(v1, vSign.set(Math.sign(v.x), Math.sign(v.y), 1));
  vRad.subVectors(v, vTemp);
  if (Math.abs(v.x) > v1.x && Math.abs(v.y) > v1.y && vRad.length() > radius) {
    vRad.setLength(radius).add(vTemp);
    v.copy(vRad);
  }
});

var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
  color: "aqua",
  wireframe: true
}));
scene.add(mesh);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

A limitation is that adjusting the smoothness of the edges requires increasing the number of segments in width, height, or depth.

Answer 3

Answer №2

UPDATE: I decided to include the surrounding Code Blocks from prisoner849 in order to ensure visibility of the final result.

My approach involved sticking with the box Geometry, as I needed to deform the Geometry on the z-axis as well. Here is the solution I came up with:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(50, 50, 150);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);
var width = 200,
    height = 100,
    depth = 50;
var roundCornerWidth = roundCornerHeight = 10;
var helpWidth = width - 2*roundCornerWidth,
    helpHeight = height - 2*roundCornerHeight;

var boxGeometry = new THREE.BoxGeometry(width, height, depth, 100, 50, 10);
boxGeometry.vertices.forEach(v => {
  if(Math.abs(v.x)>helpWidth/2){
    if(Math.abs(v.y)>helpHeight/2){
      let helperX = Math.abs(v.x)-helpWidth/2;
      let helperY2 = (Math.abs(v.y)-helpHeight/2)/roundCornerHeight;
      let helperY = (1-helperX/roundCornerWidth) * roundCornerHeight * helperY2;
      v.y = Math.sign(v.y)*((helpHeight/2 + helperY)+(Math.sin(helperX/roundCornerWidth * Math.PI)*(roundCornerHeight/4))*helperY2);
      v.x = Math.sign(v.x)*(Math.abs(v.x)+(Math.sin(helperX/roundCornerWidth * Math.PI)*(roundCornerWidth/4))*helperY2);
    }
  }
});

var mesh = new THREE.Mesh(boxGeometry, new THREE.MeshBasicMaterial({
  color: 0xffce00,
  wireframe: true
}));
scene.add(mesh);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

This approach worked flawlessly for me and appeared to be the most straightforward solution to my problem.

Answer 4

UPDATE: I decided to include the surrounding Code Blocks from prisoner849 in order to ensure visibility of the final result.

My approach involved sticking with the box Geometry, as I needed to deform the Geometry on the z-axis as well. Here is the solution I came up with:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(50, 50, 150);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);
var width = 200,
    height = 100,
    depth = 50;
var roundCornerWidth = roundCornerHeight = 10;
var helpWidth = width - 2*roundCornerWidth,
    helpHeight = height - 2*roundCornerHeight;

var boxGeometry = new THREE.BoxGeometry(width, height, depth, 100, 50, 10);
boxGeometry.vertices.forEach(v => {
  if(Math.abs(v.x)>helpWidth/2){
    if(Math.abs(v.y)>helpHeight/2){
      let helperX = Math.abs(v.x)-helpWidth/2;
      let helperY2 = (Math.abs(v.y)-helpHeight/2)/roundCornerHeight;
      let helperY = (1-helperX/roundCornerWidth) * roundCornerHeight * helperY2;
      v.y = Math.sign(v.y)*((helpHeight/2 + helperY)+(Math.sin(helperX/roundCornerWidth * Math.PI)*(roundCornerHeight/4))*helperY2);
      v.x = Math.sign(v.x)*(Math.abs(v.x)+(Math.sin(helperX/roundCornerWidth * Math.PI)*(roundCornerWidth/4))*helperY2);
    }
  }
});

var mesh = new THREE.Mesh(boxGeometry, new THREE.MeshBasicMaterial({
  color: 0xffce00,
  wireframe: true
}));
scene.add(mesh);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

This approach worked flawlessly for me and appeared to be the most straightforward solution to my problem.

Geometry of Rounded Corners Box - three.js

Answer №1

Answer №2

Similar questions

Retrieve data from a server using an Ajax GET request to access information stored within an HTML

Hide the div when hovering occurs

What is the best method to trigger a bootstrap modal window from a separate component in Angular 8?

Ajax request terminates once PHP has looped for a specific duration of time (2 minutes)

Is there a way to position the weather icon beside the weather condition?

Function necessary for successful data binding

Having trouble getting gulp set up and running with npm?

Getting the highest occurrence of a repeated value within an array using JavaScript (with the help of jQuery)

I encountered a SyntaxError that reads "Unexpected token instanceof" while using the Chrome Javascript console

Cufon failing to load following an ajax call

Saving the content of a div as a PDF

Tips for transferring variables between different variables

Update Calendar Information Without Reloading the Entire Page

Exploring the concept of the imaginary unit "i" in C++: Comparing #define and const methods

Experience dynamic data transformations with Vue's server-side rendering feature

Exploring the intricacies of defining Vue component props in TypeScript using Vue.extend()

Using ngRepeat to Minimize TH-Tags in AngularJS

I am unsure of the timestamp format for the value 1522899000000. Can it be used in both Ionic and AngularJS? And how would one go

Is it possible to refresh the browser with a specific URL using Node or Gulp?

My page is experiencing delays due to setInterval