How to change ambientLight intensity attribute

[iagokrt]

Hi guys, how can i change ambientLight based on clock? I might have a clue that is using useFrame hook but can't make this :(

 <ambientLight intensity={randomOrNotSoRandomIntensity} /> // Wanna change intensity as seconds pass.

My full code for this so far:

import React, { useRef } from "react";
import { useFrame } from 'react-three-fiber';
 
// import { random } from 'lodash';

export default () => {
  const randomOrNotSoRandomIntensity = 0.33;


  const FakeSphere = () => {
    return (
      <mesh>
        <sphereBufferGeometry args={[0.7, 30, 30]} attach="geometry" />
        <meshStandardMaterial color={0x394989} attach="material" metalness={1} />
      </mesh>
    );
  };

  return (
    <group>
      <FakeSphere />
      <ambientLight intensity={randomOrNotSoRandomIntensity} />
      <pointLight intensity={0.7} position={[0, 5, 0]} />
    </group>
  );
};

[gsimone]

a couple of things:

1. don't make anonymouse function components, it's a bad practice because you lose a name in devtools

2. don't declare new components inside another component ( FakeSphere ), create it otuside

3. you can use a ref to get the light and then imperatively change it in useFrame

import React, { useRef } from "react";
import { useFrame } from 'react-three-fiber';
 
// import { random } from 'lodash';

function FakeSphere (){
    return (
      <mesh>
        <sphereBufferGeometry args={[0.7, 30, 30]} attach="geometry" />
        <meshStandardMaterial color={0x394989} attach="material" metalness={1} />
      </mesh>
    );
  };

export default function MyScene {
  const randomOrNotSoRandomIntensity = 0.33;

  const light = useRef()

  useFrame(() => {
      light.current.intensity = Math.random() 
  })

  return (
    <group>
      <FakeSphere />
      <ambientLight ref={light} intensity={randomOrNotSoRandomIntensity} />
      <pointLight intensity={0.7} position={[0, 5, 0]} />
    </group>
  );
};

[iagokrt]

Thank you. I will re-write based on your tips :D