JSFiddle - React, Tailwind, and code Playground

by gerdonabbink

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>

CSS

html,
body {
    margin: 0;
    padding: 0;
}

JavaScript

const MAX_DISTANCE = 100;
const MAX_SPHERE_RADIUS = 50;

let camera, scene, controls, renderer;

console.clear();
let bookTitles = [{
        title: "Mac OS X Leopard Edition",
        id: "1",
		type: 'sphere'
    },
    {
        title: "The Qmail Handbook",
        id: "2",
		type: 'sphere'
    },
    {
        title: "Hardening Network Infrastructure: Bulletproof Your Systems Before You Are Hacked!",
        id: "3",
		type: 'sphere'
    },
    {
        title: "Cocoa Programming for Mac OS X Second Edition",
        id: "4",
		type: 'cube'
    },
    {
        title: "LDAP System Administration",
        id: "5",
		type: 'cube'
    }

];

function init() {
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xeeeeee);

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 10000);
    camera.position.z = 500;

    camera.updateProjectionMatrix();

    scene.add(camera);

    renderer = new THREE.WebGLRenderer({
        antialias: true
    });

    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

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

function setupBooks() {
    bookTitles.forEach(book => {
        let geometry;
		let radius = Math.floor(Math.random() * MAX_SPHERE_RADIUS);
        switch (book.type) {
            case 'sphere':
                geometry = new THREE.SphereGeometry(radius, 50, 50);
                break;
            case 'cube':
                geometry = new THREE.BoxGeometry(radius, radius, radius, 10, 10);
                break;
        }

        // Add missing material
        let mesh = new THREE.Mesh(geometry);


        mesh.position.copy(getRandomVector());
		
		scene.add(mesh);
    });
}

function getRandomVector() {
    return new THREE.Vector3(getRandom(), getRandom(), getRandom());
}

function getRandom() {
    return...