JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>
JavaScript
var animate, camera, controls, floor, light, loader, material, mesh, renderer, scene, spotLightHelper, spotShadowHelper, text;
scene = new THREE.Scene();
var cube = new THREE.Mesh(new THREE.BoxBufferGeometry(100,100,100), new THREE.MeshStandardMaterial());
cube.castShadow = true;
cube.position.y = 50;
scene.add(cube);
floor = new THREE.Mesh(new THREE.PlaneBufferGeometry(10000, 10000, 100, 100), new THREE.MeshStandardMaterial());
floor.rotation.x = -Math.PI / 2;
floor.receiveShadow = true;
scene.add(floor);
camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(-2000, 2000, 2000);
camera.up = new THREE.Vector3(0, 1, 0);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
light = new THREE.SpotLight();
light.distance = 5000;
light.position.set(400, 400, 400);
light.target = scene;
light.castShadow = true;
light.angle = 0.5;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
light.shadow.camera.near = 1;
light.shadow.camera.far = 5000;
light.shadow.camera.fov = 30;
scene.add(light);
spotLightHelper = new THREE.SpotLightHelper(light);
spotShadowHelper = new THREE.CameraHelper(light.shadow.camera);
scene.add(spotLightHelper);
scene.add(spotShadowHelper);
renderer = new THREE.WebGLRenderer({
antialiasing: true,
alpha: false
});
renderer.shadowMap.enabled = true;
renderer.setClearColor(0x000000, 1);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;
window.addEventListener('resize', function() {
var windowHalfX, windowHalfY;
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
animate =...