JSFiddle - React, Tailwind, and code Playground
by realhunts
HTML
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
JavaScript
// a basic three.js scene
var container, renderer, scene, camera, controls;
var flashLight,spotLight;
var controls;
var floor, wall, ambientLight;
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
init();
animate();
function init() {
// RENDERER
container = document.createElement('div');
document.body.appendChild(container)
renderer = new THREE.WebGLRenderer();
renderer.physicallyCorrectLights = true;
renderer.gammaInput = true;
renderer.gammaOutput = true;
// renderer.shadowMap.enabled = true;
renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(windowWidth, windowHeight);
container.appendChild(renderer.domElement);
// SCENE
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 200, 800);
//camera.lookAt(scene.position);
scene.add(camera)
// (camera) controls
// mouse controls: left button to rotate,
// mouse wheel to zoom, right button to pan
controls = new THREE.OrbitControls(camera, renderer.domElement);
// LIGHTS
ambientLight = new THREE.AmbientLight(0xffffff, 5);
scene.add(ambientLight);
flashLight = new THREE.Mesh(new THREE.CylinderGeometry(1, 1, 7, 20), new THREE.MeshPhongMaterial({color:0x000000}));
flashLight.rotateX(Math.PI/2);
camera.add(flashLight);
flashLight.parent = camera
flashLight.position.z = -900
spotLight = new THREE.SpotLight(0xffffff, 0.5, 150);
spotLight.power = 4000;
spotLight.angle = 0.5;
spotLight.decay = 2;
spotLight.penumbra = 0.1;
spotLight.distance = 200;
spotLight.rotateX(Math.PI/2);
spotLight2 = new THREE.SpotLight(0xCCCCCC, 0.5, 150);
spotLight2.power = 2000;
spotLight2.angle = 0.55;
spotLight2.decay = 2;
spotLight2.penumbra = 0.1;
spotLight2.distance =...