In my current project involving 3D objects, I decided to experiment with Three.js. My goal is to create a wireframe with rounded corners on a single axis. While I have made progress using two different methods, I'm still facing the challenge of connecting the outer wall faces with a single outline.
The first method involves defining a shape with new THREE.Shape(), extruding it into geometry with new THREE.ExtrudeGeometry(), extracting the edges of interest with new THREE.EdgesGeometry(), and then creating a mesh with new THREE.LineSegments().
I've also tried rendering a version of the box within it to hide the lines in the back.
Method one utilized the depth attribute on ExtrudeGeometry, but it produced excessive lines and didn't draw them only on the exterior faces. Adjusting the second parameter in EdgesGeometry to define the minimum angle rendered all or none of the lines.
The second approach involved creating two separate shapes, extruding them with a depth value of 0, and then repositioning the meshes slightly to give them depth.
While this method was closer to the desired outcome, I still couldn't achieve the edge connections as intended.
Is there a feasible solution for this issue?
https://i.sstatic.net/msBsw.png
For demonstration purposes, here's code snippet showcasing method one:
// JavaScript code snippet goes here...<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>And here's a snippet demonstrating method two:
// Another JavaScript code snippet goes here...<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>Edit
Exploring another suggested method by prisoner849 utilizing conditional line segments from this source: . This method yielded similar results to the first one. The challenge persists in either rendering all or none of the lines on the rounded side based on the minimum angle provided. Progress has been made, but the solution seems elusive.
// Additional JavaScript code snippet...<script src="https://rawgithub.com/mrdoob/three.js/r118/build/three.js"></script>
<script src="https://rawgithub.com/mrdoob/three.js/r118/examples/js/utils/BufferGeometryUtils.js"></script>