<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>
<button id="btnPressMe" style="position: absolute; top: 50px; left: 50px; width: 75px; height: 25px; background-color: aqua;">
  PressMe
</button>
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
canvas {
  width: 100%;
  height: 100%;
  display; block;
}
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, 1, 1, 1000);
camera.position.set(0, 5, 10);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
var canvas = renderer.domElement;
document.body.appendChild(canvas);

scene.add(new THREE.GridHelper(10, 10, "aqua", "gray"));

var box = new THREE.Mesh(
  new THREE.BoxGeometry(),
  new THREE.MeshNormalMaterial()
);
scene.add(box);

var plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 5);
var raycaster = new THREE.Raycaster();
var btnNDC = new THREE.Vector2();
var ptIntrsct = new THREE.Vector3();

btnPressMe.addEventListener("click", runTheSequense, false);

function runTheSequense() {
  btnPressMe.style.backgroundColor = "red";
  console.log(btnPressMe);
  btnPressMe.disabled = true;
  convertToNDC(
    btnPressMe.offsetLeft + btnPressMe.offsetWidth * 0.5,
    btnPressMe.offsetTop + btnPressMe.offsetHeight * 0.5
  );
  console.log(btnNDC);
  raycaster.setFromCamera(btnNDC, camera);
  raycaster.ray.intersectPlane(plane, ptIntrsct);

  var goTowards = new TWEEN.Tween(box.position)
    .to(ptIntrsct, 1000)
    .onComplete(function() {
      btnPressMe.style.backgroundColor = "aqua";
    });
  
  var goBackwards = new TWEEN.Tween(box.position)
    .to(scene.position, 1000)
    .onComplete( function(){
      btnPressMe.disabled = false;
    });
  
  goTowards.chain(goBackwards);
  goTowards.start();
}

function convertToNDC(x, y) {
  console.log(x, y);
  btnNDC.x = x / window.innerWidth * 2 - 1;
  btnNDC.y = -(y / window.innerHeight) * 2 + 1;
}

render();

function resize(renderer) {
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  const needResize = canvas.width !== width || canvas.height !== height;
  if (needResize) {
    renderer.setSize(width, height, false);
  }
  return needResize;
}

function render() {
  if (resize(renderer)) {
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();
  }
  renderer.render(scene, camera);
  //box.quaternion.copy(camera.quaternion);
  TWEEN.update();
  requestAnimationFrame(render);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.