I have an instanced mesh set up as follows:
const instancedGeometry = new THREE.BoxGeometry(1,1,1);
const instancedMaterial = new THREE.MeshBasicMaterial({ color: new THREE.Color(0xff0000) });
const instancedMesh = new THREE.InstancedMesh( instancedGeometry, instancedMaterial, randomPoints );
I have a raycaster set up and I want to basically apply a decal on whichever is being clicked with the mouse. The raycast set up is standard and the intersection code is as follows:
document.addEventListener('pointerdown', (e) => {
const windowX = e.clientX;
const windowY = e.clientY;
const ndcX = ((windowX / window.innerWidth) * 2) - 1;
const ndcY = -((windowY / window.innerHeight) * 2) + 1;
raycaster.setFromCamera(new THREE.Vector2(ndcX, ndcY), camera);
const intersections = raycaster.intersectObjects(scene.children);
if (intersections.length) {
// get the first object you intersect with
const intersectedInstance = intersections[0];
const { normal, object, point, instanceId } = intersectedInstance;
// get the instance transformation matrix
const instanceMatrix = new THREE.Matrix4();
instancedMesh.getMatrixAt(instanceId, instanceMatrix);
const worldInstanceMatrix = new THREE.Matrix4();
worldInstanceMatrix.multiplyMatrices(instanceMatrix, instancedMesh.matrixWorld);
///
const dummy = new THREE.Object3D();
const n = normal.clone();
n.transformDirection( worldInstanceMatrix );
n.add(point.clone());
dummy.position.copy( point.clone() );
dummy.lookAt( n );
const size = new THREE.Vector3( 1, 1, 0.1 );
const decalGeometry = new DecalGeometry( object, point, dummy.rotation, size );
const decal = new THREE.Mesh( decalGeometry, decalMaterial );
scene.add(decal);
}
});
However, the decal geometry just will not show up. what am I doing wrong? Thanks in advance! The decal mesh gets created and on consoling scene.children, i do see the decal mesh added, but it just doesn’t become visible.