JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="threeContainer"></div>
CSS
#threeContainer{
z-index: 1; top: 0px; margin: auto; position: absolute;
height: 580px; width: 950px;
border: 1px solid rgb(216, 216, 216);
}
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
JavaScript
// Three.js setup
var WIDTH = 440;
var HEIGHT = 380;
var VIEW_ANGLE = 40,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
var scene, renderer, camera, container, particleMaterial, projector;
container = $('#threeContainer');
renderer = new THREE.CanvasRenderer();
camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
scene = new THREE.Scene();
renderer.setSize(WIDTH, HEIGHT);
camera.position.z = 500;
scene.add(camera);
// basic coordinates used for shape
var wireframe = [
[0, 0],
[200, 0],
[200, 200],
[100, 200],
[100, 100],
[0, 100]
];
// create the Plane object
var floorColor = 0x8ccff1;
var blockSize = 15;
var floorHeight = 2;
var floorMaterial = new THREE.MeshBasicMaterial({
color: floorColor,
opacity: 1,
shading: THREE.SmoothShading
});
var squareShape = new THREE.Shape();
squareShape.moveTo(wireframe[0][0], wireframe[0][1]);
$.each(new Array(wireframe.length - 1), function(i) {
squareShape.lineTo(wireframe[i + 1][0], wireframe[i + 1][1]);
});
var square3d = squareShape.extrude({
amount: floorHeight,
bevelEnabled: false,
steps: 1
});
//square3d.computeFaceNormals();
var floor = new THREE.Mesh(square3d, floorMaterial);
floor.material = floorMaterial;
floor.position.set(0, 0, -10);
scene.add(floor);
// Create Outline object
var wallMaterial = new THREE.MeshBasicMaterial( { color: 0x227fc2, opacity: 1, shading: THREE.SmoothShading } );
var wallShape = new THREE.Shape();
wallShape.moveTo( wireframe[0][0], wireframe[0][1] );
$.each(wireframe, function(i,v){
var w;
if (i !== wireframe.length-1){
w = wireframe[i+1];
} else { w = wireframe[0]; }
var wallShape = new THREE.Shape();
var offset = Math.ceil(blockSize/2);
if (v[0] === w[0]){
if (v[1] > w[1]) { offset = -offset }
wallShape.moveTo( v[0]-offset, v[1]+offset );
wallShape.lineTo( w[0]-offset, w[1]-offset );
wallShape.lineTo( w[0]+offset,...