Hello, everyone! The following is an example
As shown in the picture above.The decal of the coffee logo is intact on some surfaces. However, on some surfaces (such as the top surface), deformation or stretching may occur.
The following is my code：
const handlePointerDown = (event) => {
const { x, y } = event;
mouse.x = (x / gl.domElement.clientWidth) * 2 - 1;
mouse.y = -(y / gl.domElement.clientHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObject(nodes.Main, true);
//create a decal
if (intersects.length > 0) {
const intersection = intersects[0];
console.log('3D World Coordinates:', intersection.point);
// texture.colorSpace = THREE.SRGBColorSpace
const decalPosition = intersection.point;
const decalOrientation = new Vector3(0, 0, 0);
const decalSize = new Vector3(0.2, 0.2, 0.2);
const geometry = new DecalGeometry(nodes.Main, decalPosition, decalOrientation, decalSize)
// const material = new THREE.MeshBasicMaterial({ map: texture });
const material = new THREE.MeshPhongMaterial({
map: texture,
transparent: true,
shininess: 30,
depthTest: true,
depthWrite: false,
polygonOffset: true,
polygonOffsetFactor: - 4,
wireframe: false,
});
applyProps(materials, { needsUpdate: true })
const mesh = new THREE.Mesh(geometry, material);
mesh.updateMatrix();
scene.add(mesh)
// setIntersections([...intersections, intersection.point]);
}
};
Thank you very much
