JSFiddle - React, Tailwind, and code Playground

by nicolasrannou

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

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, 5, 8);
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 grid = new THREE.GridHelper(10, 10);
scene.add(grid);

var mesh = new THREE.Mesh(new THREE.BoxBufferGeometry(), new THREE.MeshNormalMaterial());
scene.add(mesh);

var clock = new THREE.Clock();
var vec3 = new THREE.Vector3();


renderer.setAnimationLoop(() => {
	
  vec3.subVectors(camera.position, mesh.position);
  
	let t = clock.getElapsedTime() * 0.1;
	mesh.position.x = Math.cos(t * 3.14) * 5;
  mesh.position.z = - Math.sin(t * 2.7) * 5;
  
  /* controls.object.position.copy(mesh.position).add(vec3) */;
  controls.target.copy(mesh.position);
  controls.update();
  
  renderer.render(scene, camera);
});