CODEWITHSUNDEEP
javascriptthree.js
breezertwo
breezertwo

Reputation: 585

Rotate Cube around center on button click

Imagine a cube-like object: enter image description here

This is placed on face 6 on a vertical plane. I want this cube to change its position with a button click. So I click the button --> Now face 5 is on the plane. Button again --> 3 is on the plane. The order resulting out of this should be: 6 5 3 2 1 4 --> 6 5 . . .

I tried it with s.th. like this: (sideCounter is the number of clicks)

    if (this._sideCounter === 0) {
      this._arModelObject.matrix = matrix.compose(translation, rotation.clone().multiply(new THREE.Quaternion().setFromEuler(new THREE.Euler().setFromVector3(new THREE.Vector3(-(Math.PI / 2), 0, 0)))), scale);
    }
    if (this._sideCounter === 1 || this._sideCounter === 2) {
      this._arModelObject.matrix = matrix.compose(translation, rotation.clone().multiply(new THREE.Quaternion().setFromEuler(new THREE.Euler().setFromVector3(new THREE.Vector3(0, -(Math.PI / 2), 0)))), scale);
    }
    if (this._sideCounter === 3) {
      this._arModelObject.matrix = matrix.compose(translation, rotation.clone().multiply(new THREE.Quaternion().setFromEuler(new THREE.Euler().setFromVector3(new THREE.Vector3(Math.PI / 2, 0, 0)))), scale);
    }
    if (this._sideCounter === 4 || this._sideCounter === 5) {
      this._arModelObject.matrix = matrix.compose(translation, rotation.clone().multiply(new THREE.Quaternion().setFromEuler(new THREE.Euler().setFromVector3(new THREE.Vector3(0, 0, -(Math.PI / 2))))), scale);
    }

EDIT:

A solution for the rotation problem so far was provided (thx @Eponyme Web). Problem here is, that I don't rotate around the center right now. (The cubes origin (0,0,0) is somewhere else (because it depends on the uploaded model of the user))

Is there an easy way to center the rotation (just for the roation!!)?

Upvotes: 4

Views: 370

Answers (1)

Eponyme Web
Eponyme Web

Reputation: 976

I think the transformation for count 0 and 3 is identical

if (this._sideCounter === 0 || this._sideCounter === 3) {
  this._arModelObject.matrix = matrix.compose(translation, rotation.clone().multiply(new THREE.Quaternion().setFromEuler(new THREE.Euler().setFromVector3(new THREE.Vector3(-(Math.PI / 2), 0, 0)))), scale);
}
if (this._sideCounter === 1 || this._sideCounter === 2) {
  this._arModelObject.matrix = matrix.compose(translation, rotation.clone().multiply(new THREE.Quaternion().setFromEuler(new THREE.Euler().setFromVector3(new THREE.Vector3(0, -(Math.PI / 2), 0)))), scale);
}
if (this._sideCounter === 4 || this._sideCounter === 5) {
  this._arModelObject.matrix = matrix.compose(translation, rotation.clone().multiply(new THREE.Quaternion().setFromEuler(new THREE.Euler().setFromVector3(new THREE.Vector3(0, 0, -(Math.PI / 2))))), scale);
}

Upvotes: 1

Related Questions