JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="https://a3d.joladev2.com/webgl-env-map/scripts/three.min.js"></script>
<script src="https://a3d.joladev2.com/webgl-env-map/scripts/Detector.js"></script>
<script src="https://a3d.joladev2.com/webgl-env-map/scripts/OrbitControls.js"></script>
<style>
body {
overflow: hidden;
margin: 0;
padding: 0;
background: hsl(0, 0%, 10%);
}
p {
margin: 0;
padding: 0;
}
.left,
.right {
position: absolute;
color: #fff;
font-family: Geneva, sans-serif;
}
.left {
bottom: 1em;
left: 1em;
text-align: left;
}
.right {
top: 0;
right: 0;
text-align: right;
}
a {
color: #f58231;
}
</style>
</head>
<body>
<script type="text/javascript">
</script>
<div class="left">
<p>WEBGL TEST</p>
</div>
</body>
</html>
JavaScript
if (!Detector.webgl) {
Detector.addGetWebGLMessage();
}
var container;
var camera, controls, scene, renderer;
var lighting, ambient, keyLight, fillLight, backLight;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
/* Camera */
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 5000);
camera.position.z = 50;
camera.position.x = 30;
camera.position.y = 15;
/* Scene */
scene = new THREE.Scene();
lighting = true;
// ambient = new THREE.AmbientLight(0xffffff, 1.0);
// scene.add(ambient);
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 22, 32, 35 );
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 4000;
spotLight.shadow.mapSize.height = 4000;
spotLight.shadow.camera.near = 10;
spotLight.shadow.camera.far = 1000;
spotLight.shadow.camera.fov = 30;
spotLight.intensity = 1;
scene.add( spotLight );
keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30, 100%, 75%)'), 1.0);
keyLight.position.set(-100, 0, 100);
fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240, 100%, 75%)'), 0.75);
fillLight.position.set(100, 0, 100);
backLight = new THREE.DirectionalLight(0xffffff, 1.0);
backLight.position.set(100, 0, -100).normalize();
// instantiate a loader
var loader = new THREE.JSONLoader();
// load a resource
loader.load(
// resource...