JSFiddle - React, Tailwind, and code Playground

by Horsetopus

HTML

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

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

var camera, controls, scene, renderer, dae, clones, start;
var dae_url = "https://raw.githubusercontent.com/Horsetopus/plop/master/blason.dae";

function load() {
    var loader = new THREE.ColladaLoader();
    loader.load( dae_url, function( collada ) {
        dae = collada.scene;
        init();
    });
};

function init() {
		
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.append( renderer.domElement );
    
    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 10;
    scene.add( camera );
    
    controls = new THREE.OrbitControls( camera, document.body );
    
    clones = [];
    for ( var i = -10; i < 10; i++ ) {
      var clone = dae.clone();
      clone.position.set( i, i , 0 );
      scene.add( clone );
      clones.push( clone );
    }
    
    scene.add( new THREE.AmbientLight( 0xFFFFFF, 0.4 ) );
    
    var dirLight = new THREE.DirectionalLight( 0xFFFFFF, 1 );
    dirLight.position.set( 0, 0, 10 );
    dirLight.target = camera;
		camera.add( dirLight );
		
		/*dirLight.shadow.darkness = 0.1;
    dirLight.shadow.mapSize.width = Math.pow( 2, 8 );
    dirLight.shadow.mapSize.height = Math.pow( 2, 8 );*/
    
    start = new Date().getTime();
    
    animate();
    render();
}

function animate(){
		
    window.requestAnimationFrame( animate );
    controls.update();
    
    var elapsed = ( new Date().getTime() ) - start;
    for ( i in clones ) clones[ i ].rotation.set( 0, elapsed * 0.001, 0 );
    
    render();
}

function render() { renderer.render( scene, camera ); }

load();