JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
  <script>
    var scene = new THREE.Scene();
    scene.fog = new THREE.Fog(0xffffff, 0, 1);
    
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.y = 1;
   
    var renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var geometry = new THREE.BoxGeometry(1, 1, 100);
    var material = new THREE.MeshBasicMaterial({
      color: 0x00ff00
    });
    var cube = new THREE.Mesh(geometry, material);
    cube.position.z = -25;

    scene.add(cube);


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

    camera.position.z = 5;

  </script>
</body>

CSS

body {
	  margin: 0;
	}
	
	canvas {
	  width: 100%;
	  height: 100%
	}