1

私のコースの1つでは、html5キャンバスで3Dアプリケーションをプログラムする必要があります。このために私はThree.jsを使用することにしました。今のところ、私がやろうとしているのは、単純な平面をレンダリングすることだけです。また、マウスを押したままドラッグすることで、カメラをx軸に沿って移動できるようにしたいと思います。ここにあるコードに基づいてコードを作成しました。これは基本的に、回転している平面です（または、カメラが平面の周りを回転していますが、どちらかはわかりません）。アニメーションのすべてのコードを破棄し、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>
4

1 に答える 1

2

ここには、コードが正しく実行されない原因となるさまざまな問題があります。これらを確認して修正しました。これで、カメラをx軸に沿って移動できます。

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

あなたの問題は：

  1. jQueryを使用しており、jQueryライブラリは含まれていません。ドル記号関数はJavaScriptの一部ではなく、（この場合は）DOMの操作を容易にするjQueryと呼ばれるサードパーティライブラリの一部です。jQueryライブラリが含まれていないと、マウスハンドラーを実行できませんでした。

  2. jQueryが含まれていても、セットアップ関数が実行される順序が正しくありませんでした。元々、DOMが初期化されると実行されるようにThree.jsセットアッププロセスがありました。それは良い。ただし、ブラウザがJSを取得した直後にマウスイベントハンドラを登録しようとしていました。これは良くない。その時点で存在しないDOM要素にマウスイベントハンドラーをアタッチするようにJSに要求しています。これを修正するには、DOMが初期化されており（たとえば、の中でセットアップを実行しているwindow.onload）、必要な要素がすでに挿入されている（この場合は #canvas）ことを確認する必要があります。または、イベントハンドラーをDOMオブジェクトに直接アタッチします（例renderer.domElement）。

  3. キャンバス要素のを#canvas設定せずに参照していました。id

適切な開発環境のセットアップに関しては、Chromeとその開発者ツール（ctrl+ shift+を介して起動されるj）の使用を開始することを強くお勧めします。

于 2012-05-06T17:29:11.417 に答える