我正在尝试从表单中获取用户输入并从中创建一个多维数据集。现在它根本不更新图像。这也是我在这里的第一篇文章，所以它可能看起来像废话。 我希望在运行时执行此操作，并根据一次更改一个部分进行更改。
<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>
答案 0 :(得分：0)
简单修复，刚刚创建了一个新的函数，用于分隔画布初始化和形状形成。然后使用形状模型进行更新。