How to create shapes with smooth edges in ThreeJS

Question

How to create shapes with smooth edges in ThreeJS

I am attempting to create a shape using threeJS that consists of both straight and curved edges. Here is what I currently have:

https://i.sstatic.net/9pK3g.jpg

My goal is to connect the two top corners with a semicircle in order to achieve a square shape with a semicircle cut out of the top, similar to this:

https://i.sstatic.net/8irT4.jpg

What would be the best approach for achieving this? I have experimented with bezier curves and arcs without success. The circle needs to be perfectly aligned with the object below it.

Here is my current code:

var Shape = new THREE.Shape();
Shape.lineTo(0, 4);
Shape.lineTo(2, 2);
Shape.lineTo(4, 4);
Shape.lineTo(4, 0);
Shape.lineTo(0, 0);

javascript three.js

Answer 1

Answer №1

One possible approach is to execute the following steps:

var Shape = new THREE.Shape();
Shape.absarc(2, 4, 2, Math.PI, Math.PI * 2);
Shape.lineTo(4, 0);
Shape.lineTo(0, 0);

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(3, 5, 8);
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);

scene.add(new THREE.GridHelper(10, 10));

var Shape = new THREE.Shape();
Shape.absarc(2, 4, 2, Math.PI, Math.PI * 2);
Shape.lineTo(4, 0);
Shape.lineTo(0, 0);

var shapeGeom = new THREE.ShapeBufferGeometry(Shape);
var shapeMaterial = new THREE.MeshBasicMaterial({
  color: 0x00ff00,
  side: THREE.DoubleSide
});
var shapeMesh = new THREE.Mesh(shapeGeom, shapeMaterial);
scene.add(shapeMesh);

render();

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

body {
  overflow: hidden;
  margin: 0;
}

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

Answer 2

One possible approach is to execute the following steps:

var Shape = new THREE.Shape();
Shape.absarc(2, 4, 2, Math.PI, Math.PI * 2);
Shape.lineTo(4, 0);
Shape.lineTo(0, 0);

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(3, 5, 8);
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);

scene.add(new THREE.GridHelper(10, 10));

var Shape = new THREE.Shape();
Shape.absarc(2, 4, 2, Math.PI, Math.PI * 2);
Shape.lineTo(4, 0);
Shape.lineTo(0, 0);

var shapeGeom = new THREE.ShapeBufferGeometry(Shape);
var shapeMaterial = new THREE.MeshBasicMaterial({
  color: 0x00ff00,
  side: THREE.DoubleSide
});
var shapeMesh = new THREE.Mesh(shapeGeom, shapeMaterial);
scene.add(shapeMesh);

render();

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

body {
  overflow: hidden;
  margin: 0;
}

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

Answer 3

Answer №2

To achieve the desired shape, you can customize an existing shape from the examples provided at :

let customShape = new THREE.Shape();

customShape.moveTo( 50, 50 );
customShape.lineTo( 50, 150 );
customShape.absarc( 70, 150, 25, Math.PI, 0, false );
customShape.lineTo( 90, 50 );
//customShape.moveTo( 50, 50 ); // optional. The shape will automatically close

Using three.js r.96

Answer 4

To achieve the desired shape, you can customize an existing shape from the examples provided at :

let customShape = new THREE.Shape();

customShape.moveTo( 50, 50 );
customShape.lineTo( 50, 150 );
customShape.absarc( 70, 150, 25, Math.PI, 0, false );
customShape.lineTo( 90, 50 );
//customShape.moveTo( 50, 50 ); // optional. The shape will automatically close

Using three.js r.96

How to create shapes with smooth edges in ThreeJS

Answer №1

Answer №2

Similar questions

Images with fadeIn-Out effect on a slide restrict the movement of the div

The issue of memory leakage caused by jQuery Ajax requests

Click on the links to view various captions for a single image, one at a time

a guide on showcasing a table according to a specific column's data (CSV Path)

Unable to assign a value to a variable in JavaScript

Unable to insert rows into an array using sqlite3 in Node.js

Automatically collapse the Bootstrap4 Dropdown Menu upon clicking the select element

The React JS @material-ui/core Select component encountered an error when attempting to access a property that does not exist: 'offsetWidth'

Tips for partitioning an element using Selenium and Appium when it lacks a distinctive ID, class, package, or resource identifier:

Is it possible to apply search filters within a child component in Angular?

Decipher and refine an array in JavaScript by filtering it

How can I restrict input to only numbers and one decimal point using JavaScript?

The Angular routing functionality appears to be malfunctioning

I am unable to store a session variable using the GET method

Develop and test a query by examining its structure, parsing it, and assessing its effectiveness

Anticipating the resolution of one promise before tackling the next in Angular.js

The body request has been divided into various logs

What is the reason for webpack adding "-es5" and "es2015" to my TypeScript files?

Developing a personalized Object3D class

Why am I unable to utilize methods in Vue.js?