JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<button id="btnMove" style="position: absolute;">
Move
</button>
CSS
body{
overflow: hidden;
margin: 0;
}
Babel + JSX
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)
);
console.log('complete')
}
setInitials();
btnMove.addEventListener("click", function(){
/* var tween = new TWEEN.Tween(item.quaternion).to(q, 1000).delay(500).onComplete(setInitials);
tween.chain(tween);
tween.start(); */
TweenMax.to(item.quaternion, 4, { ...q, onComplete:setInitials })
}, false);
render();
function render(){
requestAnimationFrame(render);
//TWEEN.update();
renderer.render(scene, camera);
}