Hi everyone. I would like to know what could be the cause of this problem here. I am trying to link the sprites I have created to the cylinders I have randomly placed around the map. I would like the sprite points to be in the exact same position as the cylinders. But it seems like I am missing something. Here is my code below.
if (getPoints.length > 0) {
getPoints.forEach((point, index) => {
let newMaterial = point.material.clone();
newMaterial.uuid = THREE.MathUtils.generateUUID();
const circleTexture = new THREE.TextureLoader().load(circle);
const material = new THREE.SpriteMaterial({
map: circleTexture,
depthTest: false,
depthWrite: false,
sizeAttenuation: false
});
const circleSprite = new THREE.Sprite(material);
circleSprite.scale.set(0.03, 0.03, 0.03);
const worldPosition = new THREE.Vector3();
point.getWorldPosition(worldPosition);
circleSprite.position.copy(worldPosition);
circleSprite.userData.id = index;
circleSprite.renderOrder = 1;
scene.add(circleSprite);
points.push(circleSprite);
const randomColor = new THREE.Color(0x0000FF);
const emissiveColor = randomColor.clone().multiplyScalar(0.2);
point.material.emissive.set(emissiveColor);
point.material.envMapIntensity = 1;
point.material.metalness = 0.5;
point.material.roughness = 0.2;
point.material.transparent = true;
point.material.opacity = 1;
point.material = newMaterial;
});
}