驗證並運行javascript的問題（html5 canvas）

對於我的課程之一，我需要在html5畫布中編寫3D應用程序。爲此，我選擇使用Three.js。就目前而言，我想要做的就是渲染一架簡單的飛機。我也希望能夠通過按住鼠標並拖動來沿着X軸移動相機。我根據代碼找到了here。它基本上是一個旋轉的飛機（或者相機圍繞飛機旋轉，不知道是哪一個）。我扔掉了動畫的所有代碼，併爲mousedown，mousemove等事件添加了代碼。當我加載頁面時，它會渲染飛機（無生命），但是當我嘗試使用鼠標移動它時，它仍然完全沒有響應。在我的代碼中，您可能已經注意到我改變了一些我可能不應該做的事情（使某些變量成爲全局變量並更改了某些函數名稱），以使事情順利進行，但結果保持不變。驗證並運行javascript的問題（html5 canvas）

這是我第一次使用javascript，我意識到我不能只是改變現有的代碼，並期望它的工作。我看着JavaScript驗證，我發現JSLint。我下載了記事本++的插件，並嘗試以這種方式驗證我的代碼。它不喜歡html標籤，它特別討厭我試圖導入的Three.js庫。當我將它導入爲url時，它不會導入它，並且在我下載並導入文件時它不會導入它。當我將整個庫的代碼複製到文件中時，它只是給了我很多關於庫本身的錯誤，並且在我的代碼開始之前停止驗證了一些錯誤。總結：我希望得到項目本身的一些幫助，但也希望建立一個愉快的開發環境（通過適當的驗證，不會忽略進口）。

最後，到目前爲止我的代碼：

<!DOCTYPE HTML> 
<html> 
<head> 
<title>Canvas demo</title> 
</head> 
<body> 
<script type="text/javascript" src="three.js"> 
</script> 
<script type="text/javascript"> 

var camera; 
var scene; 
var plane; 
var renderer; 
var clickX; 
var clickY; 
var mousedown; 

window.onload = function() { 
    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.body.appendChild(renderer.domElement); 

    //camera 
    camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000); 
    camera.position.y = -450; 
    camera.position.z = 400; 
    camera.rotation.x = 45; 

    //scene 
    scene = new THREE.Scene(); 

    //plane 
    plane = new THREE.Mesh(new THREE.PlaneGeometry(300, 300), new THREE.MeshBasicMaterial({color: 0x0000ff})); 
    plane.overdraw = true; 
    scene.add(plane); 

    rerender(); 
}; 

window.requestAnimFrame = (function (callback){ 
     return window.requestAnimationFrame || 
     window.webkitRequestAnimationFrame || 
     window.mozRequestAnimationFrame || 
     window.oRequestAnimationFrame || 
     window.msRequestAnimationFrame || 
     function(callback){ 
      window.setTimeout(callback, 1000/60); 
     }; 
})(); 

function rerender(){ 
    //render 
    renderer.render(scene, camera); 

    //request new frame 
    requestAnimFrame(function(){ 
     rerender(); 
    }); 
} 

$('#canvas').mousedown(function(e){ 
    clickX = e.pageX - this.offsetLeft;  
    mousedown = true; 
}); 

$('#canvas').mousemove(function(e){ 
    if(mousedown) { 
     var xDiff = e.pageX - this.offsetLeft - clickX; 
     camera.position.x = xDiff;  
     rerender(); 
    } 
}); 

$('#canvas').mouseup(function(e){ 
    mousedown = false; 
}); 

$('#canvas').mouseleave(function(e){ 
    mousedown = false; 
}); 

</script> 
</body> 
</html>

來源

2012-05-06 Zypp

這裏沒有太多發生：http://jsfiddle.net/mplungjan/TVWYn/ – mplungjan

jsFiddle固定包含Three.js和jQuery：http://jsfiddle.net/TVWYn/2/ - 但是，米仍然沒有看到任何飛機。 – Xenethyl

我改變了你放入html的url到庫中的URL（就像我的問題中的那個），它顯示了飛機，就像它在我的瀏覽器中一樣：http://jsfiddle.net/TVWYn/3/ – Zypp

你這裏有各種問題的，阻止你的代碼正常運行。我已經經歷了和固定他們，你現在可以沿x軸移動攝像機：

http://jsfiddle.net/TVWYn/6/

你的問題是：

您使用jQuery和不包括jQuery庫。美元符號函數不是JavaScript的一部分，它是（在這種情況下）的一部分，名爲jQuery的第三方庫使得DOM 的工作更容易。如果不包含jQuery庫，您的鼠標處理程序無法運行。
即使包含jQuery，您的設置功能執行的順序也不正確。最初，您的Three.js設置進程會在DOM初始化後執行。這很好。但是，在JS被瀏覽器獲取後，您正試圖立即註冊鼠標事件。這不好。您要求JS將鼠標事件處理程序附加到當時不存在的DOM元素。爲了解決這個問題，你需要確保DOM已經被初始化（例如在window.onload裏面運行你的設置），並且你的所需的元素已經被插入（在這種情況下， #canvas）。或者，直接將事件處理程序附加到DOM對象（例如，renderer.domElement）。
您在參考#canvas時未曾設置您的畫布元素的id。

關於建立一個合適的開發環境，我強烈建議你開始使用Chrome，並且其開發工具（這是通過ctrl + shift + j推出）。

來源

2012-05-06 17:29:11 Xenethyl

非常感謝！看起來我現在可以開始工作:)我會標記你的答案是有用的，但是我沒有足夠的聲望呢:( – Zypp

非常歡迎你。不要擔心upvote，我只是很高興我們工作通過你的問題，你可以繼續開發，用新語言可能會很棘手，而且JS並不是一個容易進入的人。:) – Xenethyl

最新版本是[here]（http://jsfiddle.net/TVWYn/9 /嵌入/結果/）。它現在對x和y都有反應，並且在釋放鼠標按鈕之前記住最後一次鼠標位置（以便每次再次單擊時平面位置不會重置）。 – Zypp

驗證並運行javascript的問題（html5 canvas）

回答

相關問題