1
나는 사용자가 왼쪽에있는 이미지와 일치하도록 3D 이미지를 오른쪽에 회전시킬 수있는 쿼터니언 프로그램을 만들고 있습니다. 나는 회전을 업데이트 할 키 입력을 사용하는 사용자를 허용 할 알고주요 사건의 자바 스크립트
<span class="rbText">X : </span><input type="button" id="xDn" class="btn" value="-" onclick="updateRotation(-5, 0, 0);" disabled/>
<span class="rbText"> </span><input type="button" id="xUp" class="btn" value="+" onclick="updateRotation(5, 0, 0);" disabled/></br>
<span class="rbText">Y : </span><input type="button" id="yDn" class="btn" value="-" onclick="updateRotation( 0,-5, 0);" disabled/>
<span class="rbText"> </span><input type="button" id="yUp" class="btn" value="+" onclick="updateRotation(0, 5, 0);" disabled/></br>
: 지금까지, 나는 사용자가 버튼을 사용하여 HTML 파일에 updateRotation() 업데이트 할 수있는 해결책을 가지고 있습니다.
<div id="base" class="main">
<div id="topBand" class="div-band"></div>
<div id="canvasLeft" class="div-float-left">
</div>
<div id="canvasRight" class="div-float-right" tabindex = "0">
</div>
<div id="bottomBand" class="control-band">
<span class = "controlHelp">Control Panel</span>
<div id="startControl" class="startDoneTextBox">
<button type="controlButton" onclick="clickedStart();" id="btnStart"><span class="btn" id="btnStartText">Start!</span></button></br>
<dir></dir>
<button type="controlButton" onclick="clickedEnd();" id="btnEnd" disabled><span class="btn" id="btnEndText">Done!</span></button></br>
</div>
<div>
<span class = "guideHelp">Match the 3D shape on the left by rotating the shape on the right</span></br>
<span class = "userHelp">1. Press Start to load the images</span></br>
<span class = "userHelp">2. Press the image on the right and use the arrow keys to change position</span></br>
<span class = "userHelp">3. Press Done, when you think the shapes are matched</span></br>
</div>
</div>
</div>
내 updateRotation() 버튼 방식으로 작동합니다 :
여기에 내 JS
var currentId=0;
var maxTrials = 6;
var dateStart, dateEnd;
var value;
//user clicks start to begin trial
function clickedStart(){
//get the current pattern
parsePattern(trialData[currentId],currentPattern);
forceUpdate.right='show';
forceUpdate.left='show';
document.getElementById('btnStart').disabled = true; //disable start button
getKeyInput();
timerOperation(true); //start clock
}
function parsePattern(unparsedStr, patSet){
var spl = unparsedStr.split("-");
var i=0;
patSet.pattern = spl[i++];
patSet.xL = spl[i++];
patSet.yL = spl[i++];
patSet.zL = spl[i++];
patSet.xR = spl[i++];
patSet.yR = spl[i++];
patSet.zR = spl[i++];
}
function getKeyInput(){
document.getElementById('canvasRight').onkeyclick = function(e){
e = e || event
switch(e.keyCode) {
case 37: // left
updateRotation(0,0,5);
return false
case 38: // up
updateRotation(0,5,0);
return false
case 39: // right
updateRotation(5,0,0);
return false
case 40: // down
updateRotation(0,-5,0);
return false
}
}
}
//we apply global rotation and not local rotation
function updateRotation(xRot, yRot,zRot){
//the rotation is in terms of absolute rotation, so note the quaternion rotation order
var q = getQuaternion(xRot, yRot, zRot);// get rotation provided by current interaction
q.multiply(t3DRQuat); //apply to existing orientation
q.normalize(); //keep the quaternion normalized... accrual of rounding errors causes drift
t3DRQuat.copy(q); //copy the new orientation into t3DRQuat
t3DRight_shape.quaternion.copy(q); //apply orientation to shape
//if there has been one update, then we can enable the end button
if(document.getElementById('btnEnd').disabled) document.getElementById('btnEnd').disabled = false;
}
그리고 내 HTML 파일입니다. 그러나 키를 사용하려고하면 아무 일도 일어나지 않습니다. 내 getKeyInput()는 문제의 근원지입니까?