如何用三个JS给对象添加Decals

Question

我刚刚开始使用 Three.js 库，有一个关于贴花的问题：

我创建了一个带有纹理的球体。如何在不重复的情况下在其上添加另一个纹理？简短的例子：如果我的球体被“击中”，我想在其上添加另一个看起来像弹孔的纹理 - 当然仅在该特定点上。我正在考虑一个透明的 .png 文件。

这是正确的做法吗？或者我是否必须为每个“影响”制作另一个比原始球体稍大的球体，然后给它弹孔纹理，这将是一个透明的png，并找到一种方法只在新球体上显示一次有一定的尺寸吗？

有人能指出我正确的方向吗？我是 3D 设计/编码/ Threejs 的新手

这是 YouTube 上的一个示例视频，其中有人通过单击一个对象来做到这一点，但我不知道他是如何做到的：

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

非常感谢！

Answer 1

您链接的视频的作者似乎在 github 上发布了其背后的代码：

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

这是对此的另一种看法：

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

这两者都基于此处描述的技术。

Answer 2

2023年你可以使用三个/addons/geometry/DecalGeometry.js

这是一个演示：https://thirdjs.org/examples/#webgl_decals

这是源代码：https://github.com/mrdoob/ Three.js/blob/master/examples/webgl_decals.html

这里是文档：https://thirdjs.org/docs/#examples/en/geometries/DecalGeometry

这是代码片段：

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 );