Guide on placing stickers on an item in Three JS

Question

Guide on placing stickers on an item in Three JS

Recently, I began experimenting with the three.js library and have a question about decals:

I managed to create a sphere with a texture applied to it. Is there a way to overlay another texture on specific areas of the sphere without repeating the original one? For example, if my sphere is "hit," I would like to add a bullethole texture only at that point. My thought was to use a transparent .png file for this purpose.

Is my approach correct? Do I need to create a larger sphere for each "impact" and apply the bullethole texture as a transparent png, ensuring it's only shown once on the new sphere of a specific size?

If anyone could guide me in the right direction, I would greatly appreciate it. I am new to 3D design/coding/three.js.

I came across a video on YouTube showing a similar effect achieved by clicking an object, but I'm unsure of how it was done:

http://www.youtube.com/watch?v=ckLghsutfmA

Thank you for any assistance!

javascript model three.js geometry webgl

Answer 1

Answer №1

It appears that the creator of the video you shared has made the code available on github:

https://github.com/benpurdy/threejs-decals

Additionally, here is an alternative implementation:

https://github.com/spite/THREE.DecalGeometry

Both of these repositories are inspired by the method discussed here.

Answer 2

It appears that the creator of the video you shared has made the code available on github:

https://github.com/benpurdy/threejs-decals

Additionally, here is an alternative implementation:

https://github.com/spite/THREE.DecalGeometry

Both of these repositories are inspired by the method discussed here.

Answer 3

Answer №2

If you're looking to incorporate some cool 3D effects in your projects, check out the DecalGeometry.js from three.js library in 2023!

For a demonstration, visit:

You can find the source code here: https://github.com/mrdoob/three.js/blob/master/examples/webgl_decals.html

To learn more about how to use it, refer to the documentation:

Here is a snippet of the code for implementation:

const geometry = new DecalGeometry(mesh, position, orientation, size);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Answer 4

If you're looking to incorporate some cool 3D effects in your projects, check out the DecalGeometry.js from three.js library in 2023!

For a demonstration, visit:

You can find the source code here: https://github.com/mrdoob/three.js/blob/master/examples/webgl_decals.html

To learn more about how to use it, refer to the documentation:

Here is a snippet of the code for implementation:

const geometry = new DecalGeometry(mesh, position, orientation, size);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Guide on placing stickers on an item in Three JS

Answer №1

Answer №2

Similar questions

When using `setState()`, ensure that you are updating a component that is already mounted or in the process of mounting. If you receive this error, it

Proper method of defining an action in Vuex

Attempting to move elements into an array for storage in the local storage

The issue with MVC4 and Ajax requests for converting image ByteArrays appears to be problematic

Explanation requested for previous response about returning ajax data to the parent function

Angular: Observing changes in the store and sending a message from a Service component to another component once the Service has finished specific tasks

What is the best way to connect a line from the edge of the circle's outermost arc?

Dynamically setting the height of elements using jQuery with incremental values

How can you effectively blend Vue/Angular with other JavaScript resources to enhance your development process?

Is there a problem connecting to the MongoDB server?

Preventing Background Scrolling While Modal is Open in React - Using 'position: fixed' causes the page to unexpectedly scroll back to the top

The timing of the JavaScript dialog with the AJAX call is off-kilter

Display a div using Jquery when hovering over it with several classes

Tips for accessing arrayList data within a loop in JavaScript and displaying it in an HTML <c: forEach> tag

In JavaScript, ensure to directly use the value of a variable when defining an asynchronous function, rather than by reference

Customize the color of the label and underline in a Reactjs material-ui TextField when the field input

Getting a variable from an ajax call and using it in a Pug template

When using angular $resource.save for savings, the view is forced to redraw and reflow because of the collection watcher

Puppeteer: Interacting with login dialog box fields

Errors with pointer events occurring within nested iframes on Chromium 78