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://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();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 5);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

var radius = 1;
var sphere = new THREE.Mesh(new THREE.SphereGeometry(radius, 32, 24), new THREE.MeshBasicMaterial({color: "gray", wireframe: true}));
scene.add(sphere);

var item = new THREE.Mesh(new THREE.BoxGeometry(0.0625, 0.0625, 0.5), new THREE.MeshBasicMaterial({color: "red", wireframe: true}));
item.geometry.translate(0, 0, 0.25 + radius);
scene.add(item);

var startVector = new THREE.Vector3(0, 0, 1);
var endVector = new THREE.Vector3(
	THREE.Math.randFloat(-1, 1),
  THREE.Math.randFloat(-1, 1),
  THREE.Math.randFloat(-1, 1)
);

var q = new THREE.Quaternion();
function setInitials(){
	q.setFromUnitVectors(startVector.normalize(), endVector.normalize());
  startVector = endVector;
  endVector = new THREE.Vector3(
    THREE.Math.randFloat(-1, 1),
    THREE.Math.randFloat(-1, 1),
    THREE.Math.randFloat(-1, 1)
  );
}
setInitials();

btnMove.addEventListener("click", function(){
	var tween = new TWEEN.Tween(item.quaternion).to(q, 1000).delay(500).onComplete(setInitials);
  tween.chain(tween);
  tween.start();
}, false);


render();
function render(){
  requestAnimationFrame(render);
  TWEEN.update();
  renderer.render(scene, camera);
}