Question

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

这是我第一次使用javascript，我意识到我不能只改变现有代码并期望它能够正常工作。我查看了javascript验证，发现了JSLint。我下载了notepad ++的插件，并尝试以这种方式验证我的代码。它不喜欢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>

Answer 1

这里有各种各样的问题阻止您的代码正常运行。我已经完成并修复了它们，你现在可以沿着x轴移动相机了：

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

您的问题是：

您正在使用jQuery而不包括jQuery库。美元 sign函数不是JavaScript的一部分，它是（在本例中）的一部分一个名为jQuery的第三方库，它使DOM工作更轻松。不包括jQuery库，你的鼠标处理程序无法运行。
即使包含jQuery，您的设置功能的顺序也是如此执行不正确。最初你有你的Three.js设置进程使得它在DOM初始化后执行。非常好。但是，您试图注册鼠标事件浏览器获取JS后立即处理程序。这个不好。您要求JS将鼠标事件处理程序附加到当时不存在的DOM元素。要解决这个问题，您需要确保已初始化DOM（例如，在window.onload内运行您的设置）和您的已经插入了必需的元素（在这种情况下， #canvas）。或者，直接将事件处理程序附加到DOM对象（例如renderer.domElement）。
您在没有设置#canvas的情况下引用了id 帆布元素。

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

验证和运行javascript的问题（html5 canvas）

1 个答案: