Slice the edges of the depth on a shape created with ThreeJS ExtrudeGeometry

Question

Slice the edges of the depth on a shape created with ThreeJS ExtrudeGeometry

I have a 3D shape (THREE.Shape) that I created in Threejs using some vertices. I then used ExtrudeGeometry to give it a 3D appearance. Now, I need to add a 45-degree cut to the edges of this shape. However, the challenge lies in cutting the edges of the extruded part of the geometry. Despite my efforts, I have not been able to find a solution for this anywhere. I will do my best to clarify the actual requirement.

https://i.sstatic.net/kedKh.png

My goal is to specifically cut the edges of the extrude part rather than the face. Please refer to the image below for better understanding.

https://i.sstatic.net/ECYx8.png

It's important to note that this is not the face of the shape. The simple shape without the extruded part looks like this:

https://i.sstatic.net/ha6EA.png

If there is anyone who can assist me in finding a solution to this problem, I would truly appreciate their help in resolving this issue.

javascript three.js geometry

Answer 1

Answer №1

Here is a suggestion on how you could approach it:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 0, 20);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

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

var w = 1;
var h = 3;
var d = 10;

var pts = [
  new THREE.Vector2(-w, h),
  new THREE.Vector2(-w, -h),
  new THREE.Vector2(w, -w),
  new THREE.Vector2(w, w)
]

var shape = new THREE.Shape(pts);
var shapeGeom = new THREE.ExtrudeBufferGeometry(shape, {
  depth: d * 2,
  bevelEnabled: false
});
shapeGeom.center();
shapeGeom.rotateY(-Math.PI * 0.5);

// Making a 45-degree cut
var pos = shapeGeom.getAttribute("position");
var temp = new THREE.Vector3();
for (let i = 0; i < pos.count; i++) {
  temp.fromBufferAttribute(pos, i);
  let signX = Math.sign(temp.x);
  let shift = h - temp.y;
  pos.setX(i, temp.x - (shift * signX));
}
pos.needsUpdate = true;

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

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera)
});

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Answer 2

Here is a suggestion on how you could approach it:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 0, 20);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

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

var w = 1;
var h = 3;
var d = 10;

var pts = [
  new THREE.Vector2(-w, h),
  new THREE.Vector2(-w, -h),
  new THREE.Vector2(w, -w),
  new THREE.Vector2(w, w)
]

var shape = new THREE.Shape(pts);
var shapeGeom = new THREE.ExtrudeBufferGeometry(shape, {
  depth: d * 2,
  bevelEnabled: false
});
shapeGeom.center();
shapeGeom.rotateY(-Math.PI * 0.5);

// Making a 45-degree cut
var pos = shapeGeom.getAttribute("position");
var temp = new THREE.Vector3();
for (let i = 0; i < pos.count; i++) {
  temp.fromBufferAttribute(pos, i);
  let signX = Math.sign(temp.x);
  let shift = h - temp.y;
  pos.setX(i, temp.x - (shift * signX));
}
pos.needsUpdate = true;

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

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera)
});

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Slice the edges of the depth on a shape created with ThreeJS ExtrudeGeometry

Answer №1

Similar questions

Is there a way to automatically convert a webpage to a PDF when it is requested?

Update Calendar Information Without Reloading the Entire Page

What is the best way to incorporate messages across various channels with a Discord bot?

Guide to incorporating eslint with Next.js in a project that already has an eslint configuration

Choose the right Vue.js component for optimal performance

Encountering an error when attempting to access the 'path' property of undefined from a user-defined input file in Bootstrap 4

Is it necessary to include async/await in a method if there is already an await keyword where it is invoked?

Flatbuffers does not exist in this context

Ajax causing unreliable posts

Exploring the capabilities of JavaScript on the iOS platform

Implementing Routes in Express Using Typescript Classes

Steps for implementing AJAX to display a success function and update database results in real-time

Retrieve information from an Express server using SweetAlert

Test fails in Jest - component creation test result is undefined

After executing "npm run dev" in Svelte and Vite, a common error message of "HTMLElement is not defined" might appear

Insert fixed text before or after the input value without altering the value itself

What is the best way to organize and group messages in JavaScript in order to push them to a subarray?

Dynamic class name changes in Angular.js based on JSON object

The Meteor method is unable to access the property "quantity" as it is undefined

Troubleshooting: Dealing with Stack Overflow Error when using setInterval in Vue Programming