JSFiddle - React, Tailwind, and code Playground

by realhunts

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://threejs.org/examples/js/libs/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(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(1, 3, 3).setLength(3);
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 = 1;
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.5), new THREE.MeshBasicMaterial({
  color: "aqua",
  wireframe: true
}));
item.geometry.translate(0, 0, 0.25);
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.copy(sphericalEnd);
  sphericalEnd.set(radius, THREE.Math.randFloat(0, Math.PI), THREE.Math.randFloat(0, Math.PI * 2));
  vectorStart.setFromSpherical(sphericalStart);
  vectorEnd.setFromSpherical(sphericalEnd);
  normal.copy(vectorStart).cross(vectorEnd).normalize();
  angle.value = 0;
  angleEnd.value = vectorStart.angleTo(vectorEnd);
}
setInitials();

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