验证和运行javascript（html5画布）时出现问题
在我的一门课程中，我需要在html5画布上编写一个3D应用程序。为此，我选择使用Three.js。现在，我要做的就是渲染一个简单的平面。我还希望能够通过按住鼠标并拖动来沿x轴移动相机。我的代码基于找到的代码。它基本上是一架正在旋转的飞机（或者相机正在围绕飞机旋转，不确定是哪架）。我扔掉了动画的所有代码，添加了mousedown、mousemove等事件的代码。当我加载页面时，它会将平面（无生命）渲染得很好，但当我尝试使用鼠标移动它时，它仍然完全没有响应。在我的代码中，您可能已经注意到，为了使事情正常运行，我更改了一些可能不应该更改的内容（使一些变量成为全局变量，并更改了一些函数名），但结果保持不变 这是我第一次使用javascript，我意识到我不能仅仅改变现有的代码而期望它工作。我查看了javascript验证，发现了JSLint。我下载了notepad++插件，并试图用这种方式验证我的代码。它不喜欢html标记，尤其讨厌我试图导入的Three.js库。当我将它作为导入时，它不会接收到它，当我下载它并导入文件时，它也不会导入它。当我将整个库的代码复制到文件中时，它给了我很多关于库本身的错误，并且在代码开始之前就停止了验证 总之：我希望在项目本身以及建立一个愉快的开发环境方面得到一些帮助（通过适当的验证，不忽略导入） 最后，我的代码如下：验证和运行javascript（html5画布）时出现问题,javascript,html,canvas,jslint,three.js,Javascript,Html,Canvas,Jslint,Three.js,在我的一门课程中，我需要在html5画布上编写一个3D应用程序。为此，我选择使用Three.js。现在，我要做的就是渲染一个简单的平面。我还希望能够通过按住鼠标并拖动来沿x轴移动相机。我的代码基于找到的代码。它基本上是一架正在旋转的飞机（或者相机正在围绕飞机旋转，不确定是哪架）。我扔掉了动画的所有代码，添加了mousedown、mousemove等事件的代码。当我加载页面时，它会将平面（无生命）渲染得很好，但当我尝试使用鼠标移动它时，它仍然完全没有响应。在我的代码中，您可能已经注意到，为了使事情
<!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>
画布演示
var摄像机；
var场景；
var平面；
var渲染器；
var-clickX；
变量clickY；
var mousedown；
window.onload=函数（）{
renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
//摄像机
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，11000）；
摄像机位置y=-450；
摄像机位置z=400；
摄像机旋转x=45；
//场面
场景=新的三个。场景（）；
//飞机
plane=new THREE.Mesh（new THREE.PlaneGeometry（300300），new THREE.MeshBasicMaterial（{color:0x0000ff}））；
plane.overdraw=真；
场景。添加（平面）；
重新加载（）；
};
window.requestAnimFrame=（函数（回调）{
return window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
})();
函数重新渲染器（）{
//渲染
渲染器。渲染（场景、摄影机）；
//请求新帧
requestAnimFrame（函数（）{
重新加载（）；
});
}
$（“#画布”）.mousedown（函数（e）{
单击x=e.pageX-this.offsetLeft；
mousedown=true；
});
$（'#canvas'）.mousemove（函数（e）{
如果（鼠标向下）{
var xDiff=e.pageX-this.offsetLeft-clickX；
camera.position.x=xDiff；
重新加载（）；
}
});
$（'#canvas'）.mouseup（函数（e）{
mousedown=false；
});
$（'#canvas'）.mouseleave（函数（e）{
mousedown=false；
});
窗口中运行安装程序。onload#画布renderer.domeElement#canvasid关于建立一个合适的开发环境，我强烈建议您开始使用Chrome及其开发工具（通过
ctrlshiftj