2014-11-24 8 views
1

나는 사용자가 왼쪽에있는 이미지와 일치하도록 3D 이미지를 오른쪽에 회전시킬 수있는 쿼터니언 프로그램을 만들고 있습니다. 나는 회전을 업데이트 할 키 입력을 사용하는 사용자를 허용 할 알고주요 사건의 자바 스크립트

<span class="rbText">X : </span><input type="button" id="xDn" class="btn" value="-" onclick="updateRotation(-5, 0, 0);" disabled/> 
<span class="rbText">&nbsp;</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">&nbsp;</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()는 문제의 근원지입니까?

답변

0

onkeyclick 대신 onkeydown 또는 onkeypress 또는 onkeyup을 사용하십시오.