How to initialise shapes with specific rotations?

[magician11]

I'm just learning three.js, and want to use React since I know that quite well.

I'm trying to do something "simple", like this

Which looks like two tetrahedronBufferGeometry components set at specific rotations. I'm struggling to find in any docs how to set the rotation as a parameter on render..

I setup some minimal code on it here

https://codesandbox.io/s/misty-glitter-rh633?file=/src/Merkaba.js

How would I calculate the initial rotation for this setup?

Also any feedback on best practices with react-three-fiber doing this is welcome.

[gsimone]

First, you shouldn't define components inside another component's function body, that's a react mistake.

To set initial rotation, you can use props like so:

      <Tetrahedron rotation={[Math.PI, 0, 0]} />
      <Tetrahedron rotation={[-Math.PI / 2, 0, 0]} />

Then, in the Tetrahedron component definition:

const Tetrahedron = ({ rotation }) => (
  <mesh rotation={rotation}>
    ...
  </mesh>
);

You can also use shortand for a single axis (eg. rotation-x)

https://codesandbox.io/s/affectionate-saha-163p9?file=/src/Merkaba.js:42-263

[Fasani]

You can also use some helpers from the THREE lib to convert angles to radians and back again.

import * as THREE from 'three';

THREE.Math.degToRad( degrees );
THREE.Math.radToDeg( radians );

[chrislicodes]

This discussion is quite old, but what if I have a given Matrix - rotation? If i call something like mesh.current.setRotationFromMatrix(matrix) in useEffect(), it will flicker on mount? 🤔

[cding91]

I'm curious about this too. Have your figured it out yet?