1

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

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

1 回答 1

2

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

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

你的问题是：

  1. 您正在使用 jQuery，但不包括 jQuery 库。美元符号函数不是 JavaScript 的一部分，它（在这种情况下）是一个名为 jQuery 的第三方库的一部分，它可以更轻松地使用 DOM。如果不包含 jQuery 库，您的鼠标处理程序将无法运行。

  2. 即使包含 jQuery，您的设置函数执行的顺序也不正确。最初你有你的 Three.js 设置过程，一旦 DOM 被初始化，它就会执行。那挺好的。但是，您试图在浏览器获取 JS 后立即注册鼠标事件处理程序。情况不妙。您要求 JS 将鼠标事件处理程序附加到当时不存在的 DOM 元素。要解决此问题，您需要确保 DOM 已初始化（例如，在 a 中运行您的设置window.onload）并且您所需的元素已插入（在本例中为 #canvas）。或者，将您的事件处理程序直接附加到 DOM 对象（例如renderer.domElement）。

  3. 您在#canvas没有设置id画布元素的情况下进行引用。

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

于 2012-05-06T17:29:11.417 回答