Creating cube with user input using three.js - three.js

Question

I am trying to get a user input from a form and create a cube out of it. Right now it doesn't update the image at all. This is also my first post on here so it's probably going to look like crap.
I'm looking to do this at runtime and have it change based off a single part of the from being changed one at a time.
<script type="text/javascript">
var Warehouse = {
length: 4,
width: 4,
height: 4,
columnBaySpacingL: 0,
columnBaySpacingW: 0,
exteriorConstruction: "",
numberOfDockDoors: 0,
squareFootage: 0,
numberOfParkingSpc: 0
};//end of warehouse object
//create object
Warehouse.length = myForm.elements["LOW"].value;
Warehouse.width = myForm.elements["WOW"].value;
Warehouse.height = myForm.elements["HOW"].value;
Warehouse.columnBaySpacingL = myForm.elements["CBSL"].value;
Warehouse.columnBaySpacingW = myForm.elements["CBSW"].value;
Warehouse.exteriorConstruction = myForm.elements["EXT"].value;
Warehouse.numberOfDockDoors = myForm.elements["NDD"].value;
Warehouse.squareFootage = myForm.elements["SOA"].value;
Warehouse.numberOfParkingSpc = myForm.elements["NPS"].value;
//Warehouse.length = getElementsByName("LOW").value;
//Warehouse.width = getElementById("WOW").value;
//Warehouse.height = getElementById("HOW").value;
//Global vars for Three.js
var container, stats;
var CANVAS_WIDTH = 200;
var CANVAS_HEIGHT = 200;
var camera, scene, renderer;
var cube, plane;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init(Warehouse);
animate();
//Three.js functions
function init(Warehouse) {
//container = document.createElement('div');
container = document.getElementById('canvas');
document.body.appendChild(container);
// var info = document.createElement('div');
// var info = document.getElementById('canvas');
// info.style.position = 'absolute';
// info.style.top = '10px';
// info.style.width = '100%';
// info.style.textAlign = 'center';
// info.innerHTML = 'Drag to spin the warehouse';
// container.appendChild(info);
camera = new THREE.PerspectiveCamera(70, CANVAS_WIDTH / CANVAS_HEIGHT, 1, 1000);
camera.position.y = 150;
camera.position.z = 500;
scene = new THREE.Scene();
// Warehouse
var geometry = new THREE.BoxGeometry(Warehouse.length, Warehouse.width, Warehouse.height);
for (var i = 0; i < geometry.faces.length; i += 2) {
var hex = Math.random() * 0xffffff;
geometry.faces[i].color.setHex(hex);
geometry.faces[i + 1].color.setHex(hex);
}//end for loop
var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors, overdraw: 0.5 });
cube = new THREE.Mesh(geometry, material);
cube.position.y = 150;
scene.add(cube);
//Plane
var geometry = new THREE.PlaneBufferGeometry(200, 200);
geometry.rotateX(- Math.PI / 2);
var material = new THREE.MeshBasicMaterial({ color: 0x0e0e0, overdraw: 0.5 });
plane = new THREE.Mesh(geometry, material);
scene.add(plane);
renderer = new THREE.CanvasRenderer();
renderer.setClearColor(0xf0f0f0);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT);
container.appendChild(renderer.domElement);
// stats = new Stats();
// container.appendChild(stats.dom);
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
window.addEventListener('resize', onWindowResize, false);
}//end init
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}//end on WindowResize
function onDocumentMouseDown(event) {
event.preventDefault();
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
document.addEventListener('mouseout', onDocumentMouseOut, false);
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}// end onDocumentMouseDown
function onDocumentMouseMove(event) {
mouseX = event.clientX - windowHalfX;
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;
}//end onDocumentMouseMove
function onDocumentMouseUp(event) {
document.removeEventListener('mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
document.removeEventListener('mouseout', onDocumentMouseOut, false);
}//end onDocumentMouseUp
function onDocumentMouseOut(event) {
document.removeEventListener(' mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
document.removeEventListener('mouseout', onDocumentMouseOut, false);
}//end onDocumentMouseOut
function onDocumentTouchStart(event) {
if (event.touches.length === 1) {
event.preventDefault();
mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}//end if
}//end onDocumentTouchStart
function onDocumentTouchMove(event) {
if (event.touches.length === 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
}//end if
}//end onDocumentTouchStart
function animate() {
requestAnimationFrame(animate);
// stats.begin();
render();
// stats.end();
}//end animate
function render() {
plane.rotation.y = cube.rotation.y += (targetRotation - cube.rotation.y) * 0.05;
renderer.render(scene, camera);
}//end render
//Save Button
<div class="panel-body" name="All++GROUP++" style="float: left; width: 50%;">
<form name="myForm">
<div class="platform-form-group ng-scope group" name="WareHouseInfromation++GROUP++">
<button class="promptCollapsebutton" type="button" onclick="ToggleGroupVisibility(this)">-</button><b>Warehouse Information</b>
<!--Grouping for entire prompt-->
<div class="platform-form-row form-group" name="LOW++PROMPT++">
<div class="promptLabel">
LOW
</div>
<div class="promptDescription" name="LOW++DESCRIPTION++">
Length of Warehouse ( Lnft ):
</div>
<div class="promptValue">
<input class="auto-style3" max="16" min="1" name="LOW" step="1" type="number">
</div>
</div>
<div class="platform-form-row form-group" name="WOW++PROMPT++">
<div class="promptLabel">
WOW
</div>
<div class="promptDescription" name="WOW++DESCRIPTION++">
Width of Warehouse ( Lnft ):
</div>
<div class="promptValue">
<input class="auto-style3" max="16" min="1" name="WOW" step="1" type="number">
</div>
</div>
<div class="platform-form-row form-group" name="HOW++PROMPT++">
<div class="promptLabel">
HOW
</div>
<div class="promptDescription" name="HOW++DESCRIPTION++">
Height of Warehouse ( Lnft ):
</div>
<div class="promptValue">
<input class="auto-style3" max="16" min="1" name="HOW" step="1" type="number">
</div>
</div>
<div class="platform-form-row form-group" name="CBSL++PROMPT++">
<div class="promptLabel">
CBSL
</div>
<div class="promptDescription" name="CBSL++DESCRIPTION++">
Column Bay Spacing - Length ( Lnft ):
</div>
<div class="promptValue">
<input class="auto-style3" max="16" min="1" name="CBSL" step="1" type="number">
</div>
</div>
<div class="platform-form-row form-group" name="CBSW++PROMPT++">
<div class="promptLabel">
CBSW
</div>
<div class="promptDescription" name="CBSW++DESCRIPTION++">
Column Bay Spacing - Width ( Lnft ):
</div>
<div class="promptValue">
<input class="auto-style3" max="16" min="1" name="CBSW" step="1" type="number">
</div>
</div>
<div class="platform-form-row form-group" name="EXT++PROMPT++">
<div class="promptLabel">
EXT
</div>
<div class="promptDescription" name="EXT++DESCRIPTION++">
Exterior Construction:
</div>
<div class="promptValue">
<select class="auto-style3" name="EXT" oninput="theInputChanged()">
<option value="0">No exterior</option>
<option value="1">Metal siding</option>
<option value="2">Tiltup</option>
<option value="3">Concrete block</option>
<option value="4">Insulated Panels</option>
</select>
</div>
</div>
<div class="platform-form-row form-group" name="NDD++PROMPT++">
<div class="promptLabel">
NDD
</div>
<div class="promptDescription" name="NDD++DESCRIPTION++">
Number of Dock Doors ( Each ):
</div>
<div class="promptValue">
<input class="auto-style3" max="16" min="1" name="NDD" step="1" type="number">
</div>
</div>
<div class="platform-form-row form-group" name="SOA++PROMPT++">
<div class="promptLabel">
SOA
</div>
<div class="promptDescription" name="SOA++DESCRIPTION++">
Square Footage of Office Area:
</div>
<div class="promptValue">
<input class="auto-style3" max="16" min="1" name="SOA" step="1" type="number">
</div>
</div>
<div class="platform-form-row form-group" name="NPS++PROMPT++">
<div class="promptLabel">
NPS
</div>
<div class="promptDescription" name="CBSW++DESCRIPTION++">
Number of Parking Spaces ( Each ):
</div>
<div class="promptValue">
<input class="auto-style3" max="16" min="1" name="NPS" step="1" type="number">
</div>
</div>
</div>
</form>
</div>

Answer 1

Simple fix, just created a new function that separates the canvas initialization and the shape formation. This then updates with a model for the shape.