Creating 3D Shapes with three.js

Question

Creating 3D Shapes with three.js

I am currently in the process of importing an STL object into my three.js scene.

Unfortunately, this particular object seems to be using a large amount of GPU resources for rendering and animation, causing the overall performance of the scene to suffer. Because of this, I have been exploring potential alternatives.

Considering the fact that the shape is relatively simple, I have been thinking about creating a 2D shape and extruding it to achieve the desired effect.

The 3D shape in question is a square frame (specifically, a photo frame) with no intricate curves or complex geometry involved.

Initially, one idea was to create four 3D oblong shapes, rotate each one by 90 degrees, and position them meticulously within the scene to mimic a frame - but this approach has its drawbacks.

https://i.sstatic.net/OtP83.jpg

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

So, instead of loading the STL model directly into the scene, I am looking for guidance on how to generate this shape in three.js (with a hollow center) and subsequently extrude it to add depth.

javascript svg three.js computational-geometry

Answer 1

Answer №1

Example of simple extrusion: Shape -> ExtrudeGeometry -> Mesh

const { renderer, scene, camera } = initializeThree();


//Creating a frame shape..
var frame = new THREE.Shape();
frame.moveTo(-2, -1);
frame.lineTo( 2, -1);
frame.lineTo( 2,  1);
frame.lineTo(-2,  1);

//..with an opening:
var hole = new THREE.Path();
hole.moveTo(-1, -1);
hole.lineTo( 1, -1);
hole.lineTo( 1,  1);
hole.lineTo(-1,  1);
frame.holes.push(hole);

//Extruding the shape into a geometry and generating a mesh from it:
var extrudeSettings = {
    steps: 1,
    depth: 1,
    bevelEnabled: false,
};
var geom = new THREE.ExtrudeGeometry(frame, extrudeSettings);
var mesh = new THREE.Mesh(geom, new THREE.MeshPhongMaterial({ color: 0xffaaaa }));


scene.add(mesh);
renderer.render(scene, camera);

body {
    margin: 0;
    overflow: hidden;
}
canvas {
    display: block;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
<script src="//cdn.rawgit.com/Sphinxxxx/298702f070e34a5df30326cd9943260a/raw/16afc701da1ed8ed267a896907692d8acdce9b7d/init-three.js"></script>

Answer 2

Example of simple extrusion: Shape -> ExtrudeGeometry -> Mesh

const { renderer, scene, camera } = initializeThree();


//Creating a frame shape..
var frame = new THREE.Shape();
frame.moveTo(-2, -1);
frame.lineTo( 2, -1);
frame.lineTo( 2,  1);
frame.lineTo(-2,  1);

//..with an opening:
var hole = new THREE.Path();
hole.moveTo(-1, -1);
hole.lineTo( 1, -1);
hole.lineTo( 1,  1);
hole.lineTo(-1,  1);
frame.holes.push(hole);

//Extruding the shape into a geometry and generating a mesh from it:
var extrudeSettings = {
    steps: 1,
    depth: 1,
    bevelEnabled: false,
};
var geom = new THREE.ExtrudeGeometry(frame, extrudeSettings);
var mesh = new THREE.Mesh(geom, new THREE.MeshPhongMaterial({ color: 0xffaaaa }));


scene.add(mesh);
renderer.render(scene, camera);

body {
    margin: 0;
    overflow: hidden;
}
canvas {
    display: block;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
<script src="//cdn.rawgit.com/Sphinxxxx/298702f070e34a5df30326cd9943260a/raw/16afc701da1ed8ed267a896907692d8acdce9b7d/init-three.js"></script>

Creating 3D Shapes with three.js

Answer №1

Similar questions

Employing JavaScript for fading divs in and out sequentially

Is there a way to trigger a function for both a left and middle click at the same time?

Say goodbye to my HTML5 creations

Personalizing the text of an item in a v-select interface

Utilizing local storage to retain column resize settings in PrimeNG

Purging browser cache with the help of jQuery or AngularJS

Verify whether an image is present without actually displaying it

What Is Preventing Fields from Being Filled in the Drop-Down Menu?

The TextField is currently unable to be edited because of an Uncaught TypeError stating it is not iterable

Modifying the input field value in React

Vertically animating an image using jQuery

Initial page load experiencing issues with paroller.js functionality

What is the reason for the error that Express-handlebars is showing, stating that the engine

Do not proceed with the form submission if the fields are left blank

What is the best way to manage a file upload process?

JavaScript: Creating a new entry in a key-value paired array

Tips for displaying all documents within a MongoDB collection using the sharedb-cli command line tool

Exploring the implementation of toggling functionality for nested children within <li> elements using jQuery

When attempting to insert the "$binary" key into MongoDB using Node.js, an error occurs stating that the key must not begin with a "$" symbol

How can express.js be properly installed using typescript?