Sprite VS 3 Dimension


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

Try to add points to the model, not to the scene.

3 Likes

This is very helpful. It works 100%, thank you very much

1 Like