验证和运行 JavaScript 时出现问题(html5 canvas）

Problems verifying and running javascript (html5 canvas)

本文关键字：问题 html5 canvas 运行 JavaScript 验证      更新时间：2023-09-26

对于我的一门课程，我需要在html5画布中编写3D应用程序。为此，我选择使用Three.js。现在，我要做的就是渲染一个简单的平面。我还希望能够通过按住鼠标并拖动来沿 x 轴移动相机。我的代码基于此处找到的代码。它基本上是一架旋转的飞机(或者相机在飞机周围盘旋，不确定是哪个(。我扔掉了动画的所有代码，并为鼠标按下、鼠标移动等事件添加了代码。当我加载页面时，它可以很好地呈现平面(无生命(，但是当我尝试使用鼠标移动它时，它仍然完全没有响应。在我的代码中，您可能已经注意到我更改了一些我可能不应该做的事情(使一些变量全局化并更改了一些函数名称(以使事情正常工作，但结果保持不变。

这是我第一次使用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>

您在这里遇到了各种问题，这些问题阻止了您的代码正常运行。我已经检查并修复了它们，您现在可以沿 x 轴移动相机：

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

您的问题是：

  1. 您使用的是 jQuery，但不包括 jQuery 库。美元符号函数不是 JavaScript 的一部分，它(在这种情况下(是一个名为jQuery的第三方库，它使DOM工作成为可能容易。在不包括 jQuery 库的情况下，您的鼠标处理程序跑不了。

  2. 即使包含 jQuery，设置功能的顺序执行不正确。最初你有你的三.js设置进程，以便在 DOM 初始化后执行。很好。但是，您正在尝试注册鼠标事件浏览器获取 JS 后立即的处理程序。这不好。您要求 JS 将鼠标事件处理程序附加到当时不存在的 DOM 元素。要解决此问题，您需要确保 DOM 已初始化(例如，在 window.onload 中运行您的设置(并且您的已插入必需元素(在本例中， #canvas (。或者，将事件处理程序直接附加到 DOM 对象(例如 renderer.domElement (。

  3. 您引用#canvas而从未设置过您的id画布元素。

关于设置适当的开发环境，我强烈建议您开始使用Chrome及其开发人员工具(通过ctrl + shift + j启动(。

相关文章：