JSFiddle - React, Tailwind, and code Playground

by Arun J

HTML

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

JavaScript

var camera;
var renderer;
var scene;
var map;
var bmap;

function load() {
  scene = new THREE.Scene();

  renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true

  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 20;
  scene.add(camera);

  scene.add(new THREE.AmbientLight(0xffffff, 0.5));
  //scene.add(new THREE.HemisphereLight(0xffffff,0xffaabb,0.7));
  var light = new THREE.SpotLight(0xffffff, 1)
  light.position.set(0, 20, 20);
  scene.add(light);

  var planeGeometry = new THREE.PlaneGeometry(10, 10);
  var material = new THREE.MeshPhongMaterial({
    side: THREE.DoubleSide
  });


  THREE.ImageUtils.crossOrigin = '';
  material.map = THREE.ImageUtils.loadTexture('http://i.imgur.com/ZjBRB2d.jpg');
  material.bumpMap = THREE.ImageUtils.loadTexture('http://i.imgur.com/tz483el.jpg');
  var plane = new THREE.Mesh(planeGeometry, material);
  scene.add(plane);


  var controls = new THREE.OrbitControls(camera, renderer.domElement);


}


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




load();
refresh()