JSFiddle - React, Tailwind, and code Playground

by Cody Bennett

CSS

body {
	  margin: 0;
}

JavaScript

import * as THREE from 'https://unpkg.com/three/build/three.module.js'
import { OBJLoader } from 'https://unpkg.com/three/examples/jsm/loaders/OBJLoader.js'

let camera, scene, renderer;
let loader, mesh;

init();
animate();

function init() {
		loader = new OBJLoader();

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new THREE.Scene();

		mesh = loader.parse( `
    v 0.000000 0.200000 0.200000
    v 0.000000 0.000000 0.200000
    v 0.200000 0.000000 0.200000
    v 0.200000 0.200000 0.200000
    v 0.000000 0.200000 0.000000
    v 0.000000 0.000000 0.000000
    v 0.200000 0.000000 0.000000
    v 0.200000 0.200000 0.000000
    f 1 2 3 4
    f 8 7 6 5
    f 4 3 7 8
    f 5 1 4 8
    f 5 6 2 1
    f 2 6 7 3
    ` );
    scene.overrideMaterial = new THREE.MeshNormalMaterial();
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

}

function animate() {

    requestAnimationFrame( animate );

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render( scene, camera );

}