CODEWITHSUNDEEP
javascriptthree.js
BinkyNichols
BinkyNichols

Reputation: 586

THREE.js rotate object vertex by vertex

I have two halves of a card, I need to animate the card opening. So thus, I need to rotate the card's front around the leftmost point of that piece, not the centre, obtaining code to "rotate around a point" yields poor results:

//geometry for each half
var geometry1 = new THREE.PlaneGeometry( 10, 15 );
//rotation, offset by half width
...
  else if (e.keyCode == '87'){
        openAng+=0.1;
        rotCusAxis(card, new THREE.Vector3( -5, 0, 0 ),new THREE.Vector3(0,1,0),openAng,false);
        }

...
function rotCusAxis(obj, point, axis, theta, pointIsWorld){
    pointIsWorld = (pointIsWorld === undefined)? false : pointIsWorld;

    if(pointIsWorld){
        obj.parent.localToWorld(obj.position); // compensate for world coordinate
    }

    obj.position.sub(point); // remove the offset
    obj.position.applyAxisAngle(axis, theta); // rotate the POSITION
    obj.position.add(point); // re-add the offset

    if(pointIsWorld){
        obj.parent.worldToLocal(obj.position); // undo world coordinates compensation
    }

    obj.rotateOnAxis(axis, theta); // rotate the OBJECT
}

issue.png

What alternative way could I do to fix this?

Upvotes: 0

Views: 446

Answers (1)

TheJim01
TheJim01

Reputation: 8876

You're on the right track. The "subtract, rotate, add" pattern is correct. But three.js provides some nice convenience functions to make performing these tasks a lot easier.

For more information, check out this answer: Three JS Pivot point

const W = window.innerWidth
const H = window.innerHeight

const renderer = new THREE.WebGLRenderer({
  antialias: true
})
renderer.setSize(W, H)
renderer.setClearColor(0xfafafa)

document.body.appendChild(renderer.domElement)

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(28, W / H, 50, 150)
camera.position.set(0, 25, 100)
camera.lookAt(scene.position)
scene.add(camera)

const light = new THREE.DirectionalLight(0xffffff, 1)
light.position.z = -1
camera.add(light)

const cardGeo = new THREE.PlaneBufferGeometry(15, 25)
const leftMat = new THREE.MeshLambertMaterial({
  color: "orange",
  side: THREE.DoubleSide
})
const rightMat = new THREE.MeshLambertMaterial({
  color: "blue",
  side: THREE.DoubleSide
})

const left = new THREE.Mesh(cardGeo, leftMat)
left.position.x = -7.5

const right = new THREE.Mesh(cardGeo, rightMat)
right.position.x = 7.5

scene.add(left)
scene.add(right)

function render() {
  renderer.render(scene, camera)
}

const rotateCard = (function(){
  const hingeAxis = new THREE.Vector3(0, 1, 0)
  let angle = 0
  let direction = 1
  let motion = 0
  return function(){
    // For me, the pivot point is at the origin.
    // See https://stackoverflow.com/questions/42812861/three-js-pivot-point/42866733#42866733
    // for non-origin pivot points
    motion = 0.025 * direction
    left.position.applyAxisAngle(hingeAxis, motion) // rotate position
    left.rotateOnAxis(hingeAxis, motion) // rotate object
    if(angle + motion <= 0 || angle + motion >= Math.PI){
      direction *= -1
    }
    angle += motion
  }
})()

const axis = new THREE.Vector3(0, 1, 0)
function animate(){
  requestAnimationFrame(animate)
  camera.position.applyAxisAngle( axis, 0.005 )
	camera.lookAt( scene.position )
  rotateCard()
  render()
}
animate()
html,
body {
  margin: 0;
  padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/106/three.min.js"></script>

Upvotes: 1

Related Questions