私のコースのうち、私はhtml5キャンバスで3Dアプリケーションをプログラミングする必要があります。私はThree.jsを使いました。今のところ、私がしようとしているのは、単純な飛行機をレンダリングすることだけです。私はまた、マウスを押しながらドラッグすることによって、x軸に沿ってカメラを動かすことができるようにしたい。私のコードはhereというコードに基づいています。それは基本的には回転している飛行機です（またはカメラが飛行機の周りを回っていますが、どちらが確実かはわかりません）。アニメーションのコードをすべて捨て、mousedown、mousemoveなどのイベントのコードを追加しました。私はページを読み込むときに飛行機をレンダリングします（無生物です）。しかし、マウスを使って移動させようとすると、それを完全に無反応のままにしています。私のコードでは、物事を動かすために、私が多分持ってはいけないものを変更した（いくつかの変数をグローバルにし、いくつかの関数名を変更した）ことを気づいたかもしれませんが、結果は変わりません。javascriptの確認と実行の問題（html5 canvas）
これは私が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>
http://jsfiddle.net/mplungjan/TVWYn/ – mplungjan
jsFiddleはThree.jsとjQueryの両方を含むように修正されました：http://jsfiddle.net/TVWYn/2/ - まだどんな平面も見ていない。 – Xenethyl
あなたはhtmlに入れたURLをライブラリの1つ（私の質問のようなもの）に変更しました。それはブラウザのように飛行機を表示します：http://jsfiddle.net/TVWYn/3/ – Zypp