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://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>
<div id="Stats-output"></div>
<!-- Div which will hold the Output -->
<div id="WebGL-output"></div>
CSS
body {
/* set margin to 0 and overflow to hidden, to use the complete page */
margin: 0;
overflow: hidden;
}
JavaScript
var scene;
var renderer;
var camera;
var axes;
var plane;
var stats;
var controls = new function() {
this.CameraPositionX = 2;
this.CameraPositionY = 10;
this.CameraPositionZ = 30;
this.SpotlightPositionX = -100
this.SpotlightPositionY = 100
this.SpotlightPositionZ = 200
}
function initStats() {
stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
function initRenderer() {
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xEEEEEE);
renderer.setSize(window.innerWidth, window.innerHeight);
};
function initPlane(data) {
plane = new THREE.Mesh(data.planeGeometry, data.planeMaterial);
plane.rotation.x = data.xRotation
plane.position.x = data.x;
plane.position.y = data.y;
plane.position.z = data.z;
return plane;
}
function initCamera(data) {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = data.x;
camera.position.y = data.y;
camera.position.z = data.z;
camera.lookAt(scene.position);
camera.lookAt(new THREE.Vector3(-4, 3, 5));
}
function init() {
//console
var stats = initStats();
var gui = new dat.GUI();
var cameraFolder = gui.addFolder("Camera");
cameraFolder.add(controls, 'CameraPositionX', -100, 100);
cameraFolder.add(controls, 'CameraPositionY', -100, 100);
cameraFolder.add(controls, 'CameraPositionZ', -100, 100);
var spotLightFolder = gui.addFolder("Spotlight");
spotLightFolder.add(controls, 'SpotlightPositionX', -1000, 1000);
spotLightFolder.add(controls, 'SpotlightPositionY', -1000, 1000);
spotLightFolder.add(controls, 'SpotlightPositionZ', -1000, 1000);
scene = new THREE.Scene();
initRenderer();
initPlane({
planeGeometry: new THREE.PlaneGeometry(60, 20, 1, 1),
...