JSFiddle - React, Tailwind, and code Playground

by Denis Plotnikov

HTML

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

JavaScript

// Nu Bug
var x_p = 0;
var z_p = 0;

var scene, camera, renderer, spotLight;
    var geometry, material, mesh;

    init();
    animate();

    function init() {
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 500;

        var planeGeo = new THREE.PlaneGeometry(600,900);
        var planeMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, wireframe: false } );
        planeMaterial.side = THREE.DoubleSide;
        var planeMesh = new THREE.Mesh( planeGeo, planeMaterial);
        //planeMesh.rotation.z = Math.PI / 1.6;
        planeMesh.rotation.x = Math.PI / 1.5;
        //planeMesh.rotation.y = Math.PI / 1.2;
        scene.add( planeMesh );
        
        spotLight = new THREE.SpotLight( 0xffffff, 7, 0, Math.PI, 5 ); 
        spotLight.position.set( 0, 10, 0 );
        spotLight.target.position.set( 0, 0, 0 );	
        scene.add( spotLight );	
        
        var ambientLight = new THREE.AmbientLight( 0x777777 ); 
	    scene.add( ambientLight );
            
        renderer = new THREE.WebGLRenderer();
        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;
        x_p += 0.3;
        //z_p += 0.2;
        
        spotLight.position.set( x_p, 10, z_p );
        spotLight.target.position.set( x_p, 0, z_p );

        renderer.render( scene, camera );

    }