1
양식에서 사용자 입력을 가져 와서 그 중 큐브를 만들려고합니다. 지금은 이미지를 전혀 업데이트하지 않습니다. 이것은 또한 여기에 내 첫 번째 게시물 그래서 아마 쓰레기처럼 보일거야. 런타임에이 작업을 수행하려고하고 있는데 한 번에 하나씩 변경되는 부분을 기반으로 변경해야합니다.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>
1) CanvasRenderer가 필수입니까? 2) 지정된 크기로 지오메트리를 작성하는 대신, 1x1x1 상자를 작성하고 주어진 양만큼 측면을 크기 조정하는 것을 고려하십시오. 나중에 좀 더 자세히 살펴 보겠습니다. – TheJim01
내가 사용했던 것만 큼 우연히 요구되는 것은 아닙니다. 높이 폭 길이 등을 기준으로웨어 하우스를 설정하는 양식이 있습니다. 그래서 화면의 아무 것도 시작하지 않고 양식의 각 부분에있는 입력을 기반으로합니다. – moatmonster1
양식 제출을 어디에서 처리하고 있습니까? 또는이 코드에 도달 할 때 양식이 이미 채워져 있습니까? – TheJim01