"Creating a 3D effect with inset shadow using three.js

Question

"Creating a 3D effect with inset shadow using three.js

I am looking to add inset shadow to my object using three.js, creating a unique effect similar to this image:

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

Imagine something like a ring with engraved text.

Answer 1

Answer №1

To simplify the process, consider utilizing a normal-map for engraving instead of creating dynamic text. You can easily export a normal-map from Blender as outlined here. If dynamic text is required, generating a normal-map dynamically on a canvas might be more efficient than constructing geometry for the engraving.

Alternatively, you could create a 3D geometry with the engraving embedded. Explore the ThreeCSG library, which allows manipulation of geometries using boolean operations. By incorporating this method, you can form a 3D-text mesh, adapt it to fit the ring's curvature, and then subtract it from the ring mesh to achieve the desired engraved effect.

In my experimentation, I simulated a similar process by combining ThreeCSG to remove text geometry from a cylinder shape. The potential of this approach is showcased here: (view source here).

const textBSP = new ThreeBSP(textGeometry);
const cylinderBSP = new ThreeBSP(cylinderGeometry);      
const resultGeometry = cylinderBSP.subtract(textBSP).toGeometry();

scene.add(new THREE.Mesh(resultGeometry, new THREE.MeshStandardMaterial());

While this method proved effective, there were some challenges encountered, particularly with the slow tessellation caused by threeCSG. Further refinement is needed to address issues with computed normals.

A third option involves utilizing both displacement and normal-maps for quicker processing. This technique requires adding numerous vertices to facilitate displacement effects. Refer to a helpful code snippet by mrdoob for assistance in creating a normal-map based on displacement:

Answer 2

To simplify the process, consider utilizing a normal-map for engraving instead of creating dynamic text. You can easily export a normal-map from Blender as outlined here. If dynamic text is required, generating a normal-map dynamically on a canvas might be more efficient than constructing geometry for the engraving.

Alternatively, you could create a 3D geometry with the engraving embedded. Explore the ThreeCSG library, which allows manipulation of geometries using boolean operations. By incorporating this method, you can form a 3D-text mesh, adapt it to fit the ring's curvature, and then subtract it from the ring mesh to achieve the desired engraved effect.

In my experimentation, I simulated a similar process by combining ThreeCSG to remove text geometry from a cylinder shape. The potential of this approach is showcased here: (view source here).

const textBSP = new ThreeBSP(textGeometry);
const cylinderBSP = new ThreeBSP(cylinderGeometry);      
const resultGeometry = cylinderBSP.subtract(textBSP).toGeometry();

scene.add(new THREE.Mesh(resultGeometry, new THREE.MeshStandardMaterial());

While this method proved effective, there were some challenges encountered, particularly with the slow tessellation caused by threeCSG. Further refinement is needed to address issues with computed normals.

A third option involves utilizing both displacement and normal-maps for quicker processing. This technique requires adding numerous vertices to facilitate displacement effects. Refer to a helpful code snippet by mrdoob for assistance in creating a normal-map based on displacement:

"Creating a 3D effect with inset shadow using three.js

Answer №1

Similar questions

Using JavaScript, create a function that accepts an HTML element as a parameter

Combining the power of Node.js and Node-MySQL with Express 4 and the versatile Mustache

What is the reason for needing to multiply all the numbers by ten in order to solve this floating point addition problem?

How can I pass a value from a jQuery variable to a PHP variable?

What methods can be used in ThreeJS to avoid the camera orientation from flipping after a specified threshold is crossed?

change visibility:hidden to visible in a css class using JavaScript

Guide to looping through an array within an object in React JS

How to create shapes with smooth edges in ThreeJS

Is it possible to add a click handler function to a dynamically generated link in Vue?

Display popup depending on the post's identification number

What is the best way to assign src and alt attributes to an image tag using JavaScript?

When using Mongoose with Ejs, I am unable to view the comment I made when I navigate back to the post using GET. The comment only becomes visible after I have submitted it

Obtain the texture from a user upload and apply it to a geometry in three.js

Loading views and controllers on-the-fly in AngularJS

How to attach keypress event to an input with type 'number' using Jquery and attribute value

The Vue component is only functioning partially and is not visible in the Vue inspector

How can the parameters -i -u "clientId:" be interpreted when translating a curl command into Ajax?

Avoiding setting state before useEffect is important to ensure that the component's initial

Navigation bar disappears when the page is scrolled to the top

What is the process for creating unit tests for a method that utilizes the @Transaction() decorator?