JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://mrdoob.github.io/three.js/build/three.min.js"></script>
<div class="canvas" id="canvas3d"></div>
CSS
.canvas {
background: #c5c5c5;
border: 1px #676767 solid;
width: 600px;
height: 338px;
position: absolute;
}
JavaScript
var camera, scene, renderer, controls, root, projector;
var WIDTH = 600, HEIGHT = 338;
var VIEW_ANGLE = 50, ASPECT = WIDTH / HEIGHT, NEAR = 0.1, FAR = 10000;
var rect, lshape;
var objects = [];
init();
addObjects();
addRectangle();
animate();
function init() {
camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
camera.position.set(0, 1000, 2500);
scene = new THREE.Scene();
root = new THREE.Object3D();
scene.add(root);
//
projector = new THREE.Projector();
renderer = new THREE.CanvasRenderer();
renderer.setSize(WIDTH, HEIGHT);
document.getElementById('canvas3d').appendChild(renderer.domElement);
//
//controls = new THREE.TrackballControls(camera, renderer.domElement);
//controls.rotateSpeed = 0.1;
//controls.addEventListener('change', render);
document.getElementById('canvas3d').addEventListener("mousedown", getPosition, false);
//document.getElementById('canvas3d').addEventListener('mousedown', onDocumentMouseDown, false);
//window.addEventListener('resize', onWindowResize, false);
}
function addRectangle() {
var geometry = new THREE.CubeGeometry(1, 1, 1);
var object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
color: 0x676767,
opacity: 1.0
}));
var sizeX = 1000, sizeY = 800;
object.scale.x = sizeX;
object.scale.y = 10;
object.scale.z = sizeY;
root.add(object);
objects.push(object);
camera.lookAt(object.position);
//Add walls
object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
color: 0xffffff,
opacity: 0.5
}));
sizeX = 1000;
sizeY = 400;
var sizeZ = 10;
object.position.x = 0;
object.position.y = sizeY/2;
object.position.z = sizeY;
object.scale.x = sizeX;
object.scale.y = sizeY;
object.scale.z = sizeZ;
root.add(object);
objects.push(object);
object = new...