React-Three-Fiber referencing material under mesh using ref

Question

import { createRoot } from 'react-dom/client'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'

function Box(props) {
  // This reference gives us direct access to the THREE.Mesh object
  const ref = useRef()
  const refMaterial = useRef()
  // Hold state for hovered and clicked events
  const [hovered, hover] = useState(false)
  const [clicked, click] = useState(false)
  // Subscribe this component to the render-loop, rotate the mesh every frame
  useFrame((state, delta) => {
    ref.current.rotation.x += .001;
    //ref.current.material.color='yellow';
    console.log(JSON.stringify(ref.current.material.color));
    //refMaterial.current.color = 'red';
  })
  // Return the view, these are regular Threejs elements expressed in JSX
  return (
    <mesh
      {...props}
      ref={ref}
      scale={clicked ? 1.5 : 1}
      onClick={(event) => click(!clicked)}
      onPointerOver={(event) => hover(true)}
      onPointerOut={(event) => hover(false)}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} refMaterial={ref}/>
    </mesh>
  )
}


createRoot(document.getElementById('root')).render(
  <Canvas>
    <OrbitControls/>
    <ambientLight />
    <pointLight position={[10, 10, 10]} />
    <Box position={[-1.2, 0, 0]} />
    <Box position={[1.2, 0, 0]} />
  </Canvas>,
)

Why visual studio doesnt show correct members on code assist. I have to go to reference docs to find this combination: ref.current.material.color
I wanted to change color on let's say every rotation, it renders black for any color like 'yellow', I tried various options but none of them worked, Try on your machine before posting answer. Thx.

React-Three-Fiber referencing material under mesh using ref

0 Answers0