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>

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, 50, 150);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

scene.add(new THREE.GridHelper(200, 200));

var geom1 = new THREE.PlaneGeometry(100, 100);
var geom2 = new THREE.PlaneGeometry(100, 100);
geom2.translate(-50, 0, 0);

var plane1 = new THREE.Mesh(geom1, new THREE.MeshBasicMaterial({color: "red"}));
plane1.position.set(-50, 0, 0);
scene.add(plane1);
var plane2 = new THREE.Mesh(geom2, new THREE.MeshBasicMaterial({color: "blue"}));
plane2.position.set(100, 0, 0);
scene.add(plane2);

var clock = new THREE.Clock();
var time = 0;

render();

function render() {
  requestAnimationFrame(render);
  time += clock.getDelta();
  plane1.rotation.y = Math.sin(time);
  plane2.rotation.y = Math.sin(time);
  renderer.render(scene, camera);
}