JSFiddle - React, Tailwind, and code Playground

by Blubberguy22

HTML

<script src="https://rawgit.com/mrdoob/stats.js/master/src/Stats.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/shaders/NormalDisplacementShader.js"></script>

CSS

body {
    padding: 0;
    margin: 0;
}

JavaScript

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

var ambient = 0x050505,
    diffuse = 0x331100,
    specular = 0xffffff,
    shininess = 10,
    scale = 23;

scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);

camera.position.z = 0;
camera.position.y = 0;
camera.lookAt({
    x: 0,
    y: 0,
    z: 0
});
scene.add(camera);
camera.position.set(0, 100, 1000);
camera.lookAt(new THREE.Vector3(0, 0, 0));

scene = new THREE.Scene();

var ambientLight = new THREE.AmbientLight(0x222222);
scene.add(ambientLight);

var light = new THREE.PointLight(0xffffff, 1);
light.position.copy(camera.position);
scene.add(light);

var plane = new THREE.Mesh(new THREE.PlaneGeometry(500, 500), new THREE.MeshLambertMaterial({
    color: 0x22FF11,
    side: THREE.DoubleSide
}));
plane.position.set(0, 0, -500);
plane.receiveShadow = true;
scene.add(plane);

var cube = new THREE.Mesh(new THREE.BoxGeometry(50, 50, 50), new THREE.MeshPhongMaterial({
    color: 0xCC0000,
}));

var normalMap = THREE.ImageUtils.loadTexture('http://4.bp.blogspot.com/-nVnWCcT-VkY/VC2FnM6ZOmI/AAAAAAAAA4k/bWRniM20L_s/s1600/T_Wood512_N.jpg', undefined, function () {
    cube.material.normalMap = normalMap;
    renderer.render(scene, camera);
});
cube.position.set(0, 0, -250);
scene.add(cube);

renderer.render(scene, camera);