JSFiddle - React, Tailwind, and code Playground
by JJ Gerrish
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Paul Lewis" />
<meta name="viewport" content="width=device-width">
<title></title>
<style>
html, body {
padding: 0;
margin: 0;
}
#world {
position: absolute;
width: 100%;
height: 90%;
overflow: hidden;
background: transparent;
}
canvas {
position: absolute;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="world">
<!-- <button id="btn">Click Me to animate!</button>-->
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
<script src="OrbitControls.js" type="text/javascript"></script>
<script src="TrackballControls.js" type="text/javascript"></script>
<script type="text/javascript">
//COLORS
var Colors = {
red:0xf25346,
white:0xffffff,
brown:0x59332e,
pink:0xF5986E,
brownDark:0x23190f,
blue:0x42bff4,
black:0x1e1e1e,
};
var pantsColour = Colors.white;
// THREEJS RELATED VARIABLES
var scene,
camera, fieldOfView, aspectRatio, nearPlane, farPlane,
renderer, container, controls;
//SCREEN & MOUSE VARIABLES
var HEIGHT, WIDTH,
mousePos = { x: 0, y: 0 };
//INIT THREE JS, SCREEN AND MOUSE EVENTS
function createScene() {
HEIGHT = window.innerHeight;
WIDTH = window.innerWidth;
scene = new THREE.Scene();
aspectRatio = WIDTH / HEIGHT;
fieldOfView = 50;
nearPlane = 1;
farPlane = 1000;
camera = new THREE.PerspectiveCamera(
fieldOfView,
aspectRatio,
nearPlane,
farPlane
);
// scene.fog = new...