Izzimach / react-three-legacy

React bindings to create and control a 3D scene using three.js
Other
1.52k stars 128 forks source link

Can't make quaternion/rotation to work for a group #83

Closed LubergAlexander closed 8 years ago

LubergAlexander commented 8 years ago

I have a group of children under a parent(Object3D). I set the group's position on Object3D, and it works correctly.

Now I need to rotate the group, I tried using quaternion and rotation properties of Object3D, and it doesn't work, no rotation is applied neither to the parent nor its children.

The only way, which worked correctly for me, to rotate an object - was to create a transformation matrix and apply it to a geometry.

I saw the cupcake example where quaternion was used to animate the rotation, but for some reason, it doesn't work for me(the only immediate difference I see is that I do not animate it, I statically define it's rotation at creation time).

  const a = new Euler(0, 1, 1.57, 'XYZ');
  const rotation = new Vector3(1, 0, 1);
  rotation.applyEuler(a);
....
        <Object3D
          position={new Vector3(200, 0, 200)}
          rotation={rotation}
        >
          <Mesh 
            material={new MeshBasicMaterial({ color: 0xFFFFF })}
            geometry={new BoxGeometry(50, 50, 50)}
            position={new Vector3(0, 0, 0)}
          />

          <Mesh 
            material={new MeshBasicMaterial({ color: 0xFFFFF })}
            geometry={new BoxGeometry(50, 50, 50)}
            position={new Vector3(60, 0, 60)}
          />
        </Object3D>
Izzimach commented 8 years ago

The rotation itself needs a be a Euler which represents a rotation.

What you're doing there is taking the rotation in a and applying it to a vector represented by rotation. Perhaps you copied that from the Euler docs, I'm not sure, but you just need a Euler not a Vector3

Try doing const rotation = new Euler(0, 1, 1.57, 'XYZ'); and passing that in instead.

LubergAlexander commented 8 years ago

Thank you !