React-three-fiber for loop

Question

I am new to React.js as well as React-three-fiber. I want to add 100 stars. createStars() function runs for loop 100 times and create 100 x,y,z coordinates. creates small spheres. How do I run 100 times through the loop?

import './App.css';
import React, { useRef } from "react";
import ReactDOM from 'react-dom';
import { Canvas, useFrame } from "react-three-fiber";

function App() {

  function scrollPage() {
    console.log('Heelo');
  }

  function createStars() {
    console.log('Hello');
      for(var i = 0; i < 100; i++) {
        var x = Math.floor(Math.random() * 10);
        var y = Math.floor(Math.random() * 10);
        var z = Math.floor(Math.random() * 10);
        console.log(x + ' ' + y + ' ' + z);
      }
  }

  return (
    <>
      <Canvas colorManagement id="canvas">
      <ambientLight intensity={1} />
      <Star position={[0,0,0]} color='white' />
      <Star position={[1,0,0]} color='white' />
      <Star position={[0,3,0]} color='white' />
      <Star position={[0,-3,0]} color='white' />
      <Star position={[5,2,-3]} color='white' />
      <Star position={[10,0,0]} color='white' />
      <Star position={[-3,0,1]} color='white' />
      <Star position={[-5,2,0]} color='white' />
      <Star position={[-10,0,1]} color='white' />
      <Star position={[-6,-5,-4]} color='white' />
      <Star position={[-7,-3,0]} color='white' />
      <Star position={[7,-2,0]} color='white' />
      <Star position={[-7,3,0]} color='white' />
      <Star position={[0,0,9]} color='white' />
      </Canvas>
    </>
  );
}

const Star = ({position, color}) => {
  const mesh = useRef(null);
  useFrame(() => (mesh.current.rotation.x += 0.01));
  return(
    <>
      <mesh position={position}  ref={mesh}>
        <sphereBufferGeometry attach='geometry' args={[0.02,500, 500]} />
        <meshStandardMaterial attach='material' color={color}/>
      </mesh>
    </>
  );
}

export default App;

P.S. - Disregard any small typo errors, the code works fine.

Answer 1

I believe you're looking to map the Star component to the randomly generated coordinates.

See this:

import './App.css';
import React, { useRef } from "react";
import ReactDOM from 'react-dom';
import { Canvas, useFrame } from "react-three-fiber";

function App() {

  function scrollPage() {
    console.log('Heelo');
  }

  function createStars() {
    let stars = []
    for (var i = 0; i < 100; i++) {
      var x = Math.floor(Math.random() * 10);
      var y = Math.floor(Math.random() * 10);
      var z = Math.floor(Math.random() * 10);
      stars[i] = [x, y, z]
    }
    return stars
  }

  const stars = createStars().map((cords, i) =>
    (<Star key={i} position={cords} color='white' />)
  )

  return (
    <>
      <Canvas colorManagement id="canvas">
      <ambientLight intensity={1} />
      {stars}
      </Canvas>
    </>
  );
}

const Star = ({position, color}) => {
  const mesh = useRef(null);
  useFrame(() => (mesh.current.rotation.x += 0.01));
  return(
    <>
      <mesh position={position}  ref={mesh}>
        <sphereBufferGeometry attach='geometry' args={[0.02,500, 500]} />
        <meshStandardMaterial attach='material' color={color}/>
      </mesh>
    </>
  );
}

export default App;