JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>
<button id="btnMove" style="position: absolute;">
 Move
</button>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x404040, 2, 5);
var camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 2;
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x404040);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var radius = 0.6;
var segmentsWidth = 16;
var segmentsHeight = 12;
var sphere = new THREE.Mesh(new THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight), new THREE.MeshBasicMaterial({
  color: 0x050505,
  wireframe: true
}));
scene.add(sphere);

var item = new THREE.Mesh(new THREE.BoxGeometry(0.0625, 0.0625, 0.4), new THREE.MeshBasicMaterial({
  color: "aqua",
  wireframe: true
}));
item.geometry.translate(0, 0, 0.2);
scene.add(item);

var sphericalStart = new THREE.Spherical();
var sphericalEnd = new THREE.Spherical(radius, Math.PI * 0.5, 0);
var center = new THREE.Vector3();
var vectorStart = new THREE.Vector3();
var vectorEnd = new THREE.Vector3();

var angle = {
  value: 0
};
var angleEnd = {
  value: 0
};
var normal = new THREE.Vector3();
var lookAt = new THREE.Vector3();

function setInitials() {
  sphericalStart.set(radius, THREE.Math.degToRad(170), THREE.Math.degToRad(355));
  sphericalEnd.set(radius, THREE.Math.degToRad(10), THREE.Math.degToRad(5));
  vectorStart.setFromSpherical(sphericalStart);
  vectorEnd.setFromSpherical(sphericalEnd);
  normal.copy(vectorStart).cross(vectorEnd).normalize();
  angle.value = 0;
  angleEnd.value = vectorStart.angleTo(vectorEnd);
}
setInitials();


btnMove.addEventListener("click", function() {
  var tween = new TWEEN.Tween(angle).to(angleEnd, 2000).delay(500).onUpdate(
    function() {
      item.position.copy(vectorStart).applyAxisAngle(normal, angle.value);
      item.lookAt(lookAt.copy(item.position).normalize().multiplyScalar(radius + 1));
    }
 ...