JSFiddle - React, Tailwind, and code Playground
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,
}));
THREE.ImageUtils.crossOrigin = ''; // allow cross-origin
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;
cube.material.needsUpdate = true; // update material
renderer.render(scene, camera);
});
cube.position.set(0, 0, -250);
scene.add(cube);
renderer.render(scene, camera);