使用three.js使用用户输入创建多维数据集

我试图从表单中获取用户输入，并从中创建一个多维数据集。现在它根本不会更新图像。这也是我在这里的第一篇帖子，所以看起来可能会很糟糕。 我希望在运行时做这件事，并让它在一次只更改一部分的基础上进行更改

<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>

var仓库={
长度：4，
宽度：4，
身高：4，
列间距：0，
columnBaySpacingW:0，
外观构造：，
DockDoors数量：0，
平方英尺：0，
ParkingsPC编号：0
};//仓库结束对象
//创建对象
Warehouse.length=myForm.elements[“LOW”].value；
Warehouse.width=myForm.elements[“哇”].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.SquareCutes=myForm.elements[“SOA”].value；
Warehouse.numberOfParkingSpc=myForm.elements[“NPS”]值；
//Warehouse.length=getElementsByName（“低”）.值；
//Warehouse.width=getElementById（“WOW”）.value；
//Warehouse.height=getElementById（“HOW”）.value；
//Three.js的全局变量
var容器，stats；
var CANVAS_WIDTH=200；
var CANVAS_高度=200；
摄像机、场景、渲染器；
向量立方，平面；
var目标=0；
var targetRotationOnMouseDown=0；
var-mouseX=0；
var mouseXOnMouseDown=0；
var windowHalfX=window.innerWidth/2；
var windowHalfY=window.innerHeight/2；
初级（仓库）；
制作动画（）；
//三个.js函数
函数初始化（仓库）{
//container=document.createElement（'div'）；
container=document.getElementById（'canvas'）；
文件.正文.附件（容器）；
//var info=document.createElement（'div'）；
//var info=document.getElementById（'canvas'）；
//info.style.position='绝对'；
//info.style.top='10px'；
//info.style.width='100%'；
//info.style.textAlign='center'；
//info.innerHTML='拖动以旋转仓库'；
//container.appendChild（info）；
摄像机=新的三个透视摄像机（70，画布宽度/画布高度，11000）；
摄像机位置y=150；
摄像机位置z=500；
场景=新的三个。场景（）；
//仓库
var geometry=新的三个.BoxGeometry（Warehouse.length、Warehouse.width、Warehouse.height）；
对于（变量i=0；i