JSFiddle - React, Tailwind, and code Playground

by elewen110

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/objects/Reflector.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

CSS

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

JavaScript

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

init();
animate();

function init() {

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

    scene = new THREE.Scene();

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

		initControls()
    initHelper()
    
    addMirrorGround()
    
    addCube()
}

function initControls () {
		controls = new THREE.OrbitControls(camera, renderer.domElement)
    controls.update()
}

function initHelper () {
		var axesHelper = new THREE.AxesHelper(0.5)
    scene.add(axesHelper)
    
    var grid = new THREE.GridHelper( 1, 10);
    grid.material.opacity = 0.98;
    grid.material.transparent = true;
    scene.add( grid );
}

function addMirrorGround(){
		var planeGeometry = new THREE.PlaneBufferGeometry(1, 1)
   
    var options = {
      clipBias: 0.03,
      textureWidth: window.innerWidth * window.devicePixelRatio,
      textureHeight: window.innerHeight * window.devicePixelRatio,
      // color: 0xcccccc,
      recursion: 1,
    }
    
    var mirror = new THREE.Reflector(planeGeometry, options)
    mirror.rotateX(-Math.PI / 2)
    scene.add(mirror)
}

function addCube(){
    geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
    material = new THREE.MeshNormalMaterial();

    mesh = new THREE.Mesh( geometry, material );
    mesh.position.y = 0.2
    scene.add( mesh );
}

function addSprite(){
    var spriteMaterial = new THREE.SpriteMaterial( { color: 0xff0000 } );
    var sprite = new THREE.Sprite( spriteMaterial );
    console.log(sprite)
    sprite.scale.setScalar(0.2)
    sprite.position.set(0.5, 0.5, 0)
    scene.add( sprite );
}

function animate() {

    requestAnimationFrame( animate );

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

    renderer.render( scene, camera );

}