# Questions about PointsMaterial

**URL:** <https://discourse.threejs.org/t/questions-about-pointsmaterial/63530>\
**Category:** Questions\
**Tags:** pointsmaterial, materials\
**Created:** [April 2, 2024, 7:23am UTC](https://discourse.threejs.org/t/questions-about-pointsmaterial/63530 "2024-04-02T07:23:35Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![wangChen9988](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wangchen9988/32/46393_2.png) [@wangChen9988](https://discourse.threejs.org/u/wangChen9988)\
**Post date:** [April 2, 2024, 7:23am UTC](https://discourse.threejs.org/t/questions-about-pointsmaterial/63530/1 "2024-04-02T07:23:35Z")

</div>

In version 0.162.0, I set the map property to the PointsMaterial material, but there was an issue with rendering. The change was not the shape of a single point, but rather the overall shape rendering style. When I switched to rendering under version 0.137.5, it was the result I wanted. Is it because the new version has a new writing style?Here are some comparison pictures I have provided  
no map  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/4/34afc4aedc913d386beb2766eebe62634a3f2134.png)

what I wanted

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/9/89aa2237d1cdfabdb786facb0c84d0bafa412a60.png)

my code

```javascript
const pointsMaterial = new THREE.PointsMaterial();
pointsMaterial.size = 0.1;
pointsMaterial.color.set(0xfff000);
// pointsMaterial.sizeAttenuation = false;

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("./textures/particles/1.png", event.onLoad);
pointsMaterial.map = texture;

const points = new THREE.Points(sphereGeometry, pointsMaterial);
scene.add(points);

```

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/8/e8e1200a21eb0c831c48e027328e59b6c09e51c2.png)  
This is not the rendering result I wanted. After switching versions, it can render normally  
My texture image looks like this  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/c/dcc2e69df644c3f3882c66a2c0ea5eae5e0c0dd9.png)

So how should I code in the new version to achieve the rendering effect I want?

---

<div class="post-metadata">

**Author:** ![SADYX](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sadyx/32/33471_2.png) [@SADYX](https://discourse.threejs.org/u/SADYX)\
**Post date:** [April 2, 2024, 9:12am UTC](https://discourse.threejs.org/t/questions-about-pointsmaterial/63530/2 "2024-04-02T09:12:41Z")

</div>

Try [Material.transparent](https://threejs.org/docs/index.html#api/en/materials/Material.transparent)

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [April 2, 2024, 11:25am UTC](https://discourse.threejs.org/t/questions-about-pointsmaterial/63530/3 "2024-04-02T11:25:45Z")

</div>

> [@wangChen9988](#):
>
> So how should I code in the new version to achieve the rendering effect I want?

Try removing the UV coordinates of your geometry:

```javascript
sphereGeometry.deleteAttribute( 'uv' );

```

---

<div class="post-metadata">

**Author:** ![wangChen9988](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wangchen9988/32/46393_2.png) [@wangChen9988](https://discourse.threejs.org/u/wangChen9988)\
**Post date:** [April 3, 2024, 6:00am UTC](https://discourse.threejs.org/t/questions-about-pointsmaterial/63530/4 "2024-04-03T06:00:45Z")

</div>

oh~thank you!！！！！May I ask why? I am a beginner~Do I have to code like this in the new version, or do I have any errors in my code?

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [April 3, 2024, 7:54am UTC](https://discourse.threejs.org/t/questions-about-pointsmaterial/63530/5 "2024-04-03T07:54:59Z")

</div>

Three.js r137 was, like, more than 2 years ago. Things evolve. If you manually create the geometry for `THREE.Points`, it will be OK. If you reuse the vertices from another geometry, it may contain UVs … and you have to remove them.

---

<div class="post-metadata">

**Author:** ![wangChen9988](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wangchen9988/32/46393_2.png) [@wangChen9988](https://discourse.threejs.org/u/wangChen9988)\
**Post date:** [April 3, 2024, 8:08am UTC](https://discourse.threejs.org/t/questions-about-pointsmaterial/63530/6 "2024-04-03T08:08:25Z")

</div>

ok, I understand. Thank you for your answer ☺

---

<div class="post-metadata">

**Author:** ![Adatuo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/adatuo/32/59349_2.png) [@Adatuo](https://discourse.threejs.org/u/Adatuo)\
**Post date:** [April 30, 2025, 9:10pm UTC](https://discourse.threejs.org/t/questions-about-pointsmaterial/63530/7 "2025-04-30T21:10:39Z")

</div>

Thanks, OP! I ran into the same issue as you.And looks like we’re checking out the same tutorial by Lao Chen.