# Point/Point material color?

**URL:** <https://discourse.threejs.org/t/point-point-material-color/62863>\
**Category:** Questions\
**Tags:** color, react-three-fiber, textures, materials\
**Created:** [March 15, 2024, 9:23pm UTC](https://discourse.threejs.org/t/point-point-material-color/62863 "2024-03-15T21:23:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![thekain9](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thekain9/32/45779_2.png) [@thekain9](https://discourse.threejs.org/u/thekain9)\
**Post date:** [March 15, 2024, 9:23pm UTC](https://discourse.threejs.org/t/point-point-material-color/62863/1 "2024-03-15T21:23:35Z")

</div>

Hi everyone!

I am trying to change the color for each one of the points through Points & PointsMaterial. But first I need to understand why is the colour not even changing statically; it is always on the default white. I tried changing the property “colors” in and “color” in and tried HEX, RGB, writing the color as I would do in CSS… Can somebody point me in the right direction? Thank you!:

```javascript
import { useState, useRef, Suspense } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { Points, PointMaterial, Preload } from "@react-three/drei";
import * as random from "maath/random/dist/maath-random.esm";

const Stars = (props) => {
  const color3 = new THREE.PointsMaterial("rgb(255, 0, 0)");
  const numPoints = 5000
  const ref = useRef();
  const [sphere] = useState(() => random.inSphere(new Float32Array(numPoints), { radius: 1.2 }));
  
  // const colours = new Float32Array(numPoints * 3);
  // const availableColours = [ 0xAE / 255, 0xB2 / 255, 0xFD / 255, // #AEB2FD
  // 0x85 / 255, 0xE7 / 255, 0xFF / 255, // #85E7FF
  // 0xFC / 255, 0xBF / 255, 0x43 / 255, // #FCBF43
  // 0x47 / 255, 0xA5 / 255, 0x6D / 255, // #47A56D
  // ];
  // for(let i = 0; i < numPoints; i++) {
  // const colourIndex = Math.floor(Math.random() * 4);
  // colours[i * 3] = availableColours[colourIndex * 3];
  // colours[i * 3 + 1] = availableColours[colourIndex * 3 + 1];
  // colours[i * 3 + 2] = availableColours[colourIndex * 3 + 2]
  // }

  // useFrame((state, delta) => {
  // ref.current.rotation.x -= delta / 10;
  // ref.current.rotation.y -= delta / 15;
  // });

  return (
    <group rotation={[0, 0, Math.PI / 4]}>
      <Points ref={ref} positions={sphere} stride={3} frustumCulled colors={color3} {...props}>
        <PointMaterial
          // transparent
         color={color3}
          size={0.002}
          sizeAttenuation={true}
          depthWrite={false}
        />
      </Points>
    </group>
  );
};

const StarsCanvas = () => {
  return (
    <div className='w-full h-auto absolute inset-0 z-[-1]'>
      <Canvas camera={{ position: [0, 0, 1] }}>
        <Suspense fallback={null}>
          <Stars />
        </Suspense>

        <Preload all />
      </Canvas>
    </div>
  );
};

export default StarsCanvas;

```

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [March 16, 2024, 7:31am UTC](https://discourse.threejs.org/t/point-point-material-color/62863/2 "2024-03-16T07:31:07Z")

</div>

> [@thekain9](#):
>
> `const color3 = new THREE.PointsMaterial("rgb(255, 0, 0)");`

I suspect color3 should be an array of 0 to numStars\*3 of floats 1,0,0 for red  
[1,0,0, 1,0,0, 1,0,0,…] perhaps? or maybe an array of THREE.Color?

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [March 16, 2024, 2:22pm UTC](https://discourse.threejs.org/t/point-point-material-color/62863/3 "2024-03-16T14:22:51Z")

</div>

points are instanced, colors are set with vertex attributes. materials have a prop called “vertexColors” for that use case.

declarative THREE.Points + changing colors  
[https://codesandbox.io/p/sandbox/point-cloud-zsyu9?file=%2Fsrc%2FApp.js%3A7%2C25](https://codesandbox.io/p/sandbox/point-cloud-zsyu9?file=%2Fsrc%2FApp.js%3A7%2C25)

declaratie drei/points + changing colors  
[https://codesandbox.io/p/sandbox/r3f-points-eq7sc?file=%2Fsrc%2FApp.js%3A39%2C34](https://codesandbox.io/p/sandbox/r3f-points-eq7sc?file=%2Fsrc%2FApp.js%3A39%2C34)

use THREE.Points for vast amounts of points. use drei if you need declarative nesting, grouping, adding other stuff to individual points.

---

<div class="post-metadata">

**Author:** ![thekain9](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thekain9/32/45779_2.png) [@thekain9](https://discourse.threejs.org/u/thekain9)\
**Post date:** [March 17, 2024, 2:52am UTC](https://discourse.threejs.org/t/point-point-material-color/62863/4 "2024-03-17T02:52:23Z")

</div>

Thank you so much. You’re a legend!