JSFiddle - React, Tailwind, and code Playground

by hirako2000

HTML

<script src="https://rawgit.com/sasha240100/between.js/master/build/between.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js"></script>

CSS

body {
  margin: 0;
}

JavaScript

let renderer;
let scene;
let camera;
let mesh;
let max = 2;
let min = 0;

init();
animate();


function init() {
	scene = new THREE.Scene();
  scene.background = new THREE.Color( 0xffffff );
  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
  camera.position.z = 5;
  camera.position.y = 1;
  scene.add(camera);
  setupRenderer();
  addCube();
  addLight();
  between();
}

function addCube() {
	const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshPhongMaterial({wireframe: true,
  	color: 0x00ff00
  });
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  mesh.position.y +=1;
   
}

function addLight() {
	const light = new THREE.AmbientLight(0xffffff, 0.5);
  scene.add(light);
}

function setupRenderer() {
	renderer = new THREE.WebGLRenderer({antiaslia: false});
  renderer.setSize(window.innerWidth, window.innerHeight);
  //renderer.setClearColorHex( 0xffffff);
  document.body.appendChild(renderer.domElement);
}

function animate() {
  requestAnimationFrame(animate);
  render();
}



function between() {
  new Between(min, max).time(1500)
  .loop('bounce')
  .easing(Between.Easing.Cubic.InOut)
  .on('update', (value, {times}) => {
      mesh.position.y = value / 2;
      mesh.position.x = value / 3;
      //mesh.position.z = value / 2;
      mesh.rotation.y += value / 20;
      mesh.rotation.x += value / 25;
  });
}

function render() {
	renderer.render(scene, camera);
 // mesh.rotation.y += 0.01;
 // mesh.rotation.z -= 0.01;
}