JSFiddle - React, Tailwind, and code Playground

by ksumarine

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>

JavaScript

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var mouseX = 0;
var mouseY = 0;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.PlaneBufferGeometry(20, 20, 32);
var plane = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
    color: 'red',
    side: THREE.DoubleSide
}));
var plane2 = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
    color: 'green',
    side: THREE.DoubleSide
}));
var plane3 = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
    color: 'blue',
    side: THREE.DoubleSide
}));
scene.add(plane);
scene.add(plane2);
scene.add(plane3);

camera.position.z = 35;
camera.position.x = 15;
camera.rotation.y = .3;
plane.position.x = 0;
plane2.position.x = 10;
plane2.position.z = 10;
plane3.position.x = 20;

document.addEventListener('mousemove', onDocumentMouseMove, false);

animate();

function onDocumentMouseMove(event) {
    mouseX = (event.clientX - windowHalfX);
    mouseY = (event.clientY - windowHalfY);
}
function animate() {
    requestAnimationFrame(animate);
    render();
}
function render() {
    camera.position.x += (mouseX - camera.position.x) * 1;
    camera.position.y += (-mouseY - camera.position.y) * 1;
    camera.lookAt(scene.position);
    renderer.render(scene, camera);
}