キーボード入力でThree JSキューブを移動するにはどうすればよいですか？

次のコードは、これまでに3つのjを使って移動しようとしていたものです。回転するキューブオブジェクトをWASDキーで上下左右に移動し、元の位置に戻します画面）にスペースバーを挿入します。私は3つのjsに非常に新しいです、そして、私は動きを働かせる方法を理解することができません。どんな助けでも大歓迎です。これはこれまで私が持っているものです：キーボード入力でThree JSキューブを移動するにはどうすればよいですか？

// first 5 lines are a template and should be pretty much the same always 
var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 
// end template here 

var geom = new THREE.BoxGeometry(10, 10, 10); 
var mat = new THREE.MeshBasicMaterial({color: "red"}); 
var cube = new THREE.Mesh(geom, mat); 

scene.add(cube); 
camera.position.x = 2; 
camera.position.y = 1; 
camera.position.z = 20; 

var light = new THREE.AmbientLight(0x404040); // soft white light 
scene.add(light); 

// White directional light at 70% intensity shining from the top. 
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7); 
scene.add(directionalLight); 

// movement 
document.addEventListener("keydown", onDocumentKeyDown, false); 
function onDocumentKeyDown(event) { 
    var keyCode = event.which; 
    // up 
    if (keyCode == 87) { 
     cube.position.y += 1; 
     // down 
    } else if (keyCode == 83) { 
     cube.position.y -= 1; 
     // left 
    } else if (keyCode == 65) { 
     cube.position.x -= 1; 
     // right 
    } else if (keyCode == 68) { 
     cube.position.x += 1; 
     // space 
    } else if (keyCode == 32) { 
     cube.position.x = 0.0; 
     cube.position.y = 0.0; 
    } 
    render(); 
}; 

var render = function() { 
    requestAnimationFrame(render); 
    cube.rotation.x += 0.03; 
    cube.rotation.y += 0.02; 
    cube.rotation.z += 0.01; 
    renderer.render(scene, camera); 
}; 

render();

これは単なるjavascriptファイルです。私はまた、別のHTMLファイルから起動する必要があります。

<html><head><title>WebGL with three.js</title> 
<style> 
    body { margin: 0; } 
    canvas { width: 100%; height: 100% } 
</style> 
</head><body> 
<script src="three.js"></script> 
<script src="Learn_Cube3.js"></script> 
</body></html>

出典

2017-03-22 Teej

もしあなたがその位置を変更したいのであれば、キーを押した後にあなたのコードのどこかで 'cube.position.x/y/z'にアクセスする必要があると思います。 – Chris

これはいかがですか？ -

// movement - please calibrate these values 
var xSpeed = 0.0001; 
var ySpeed = 0.0001; 

document.addEventListener("keydown", onDocumentKeyDown, false); 
function onDocumentKeyDown(event) { 
    var keyCode = event.which; 
    if (keyCode == 87) { 
     cube.position.y += ySpeed; 
    } else if (keyCode == 83) { 
     cube.position.y -= ySpeed; 
    } else if (keyCode == 65) { 
     cube.position.x -= xSpeed; 
    } else if (keyCode == 68) { 
     cube.position.x += xSpeed; 
    } else if (keyCode == 32) { 
     cube.position.set(0, 0, 0); 
    } 
};

オブジェクトを移動するには、オブジェクトの位置を変更する必要があります。また、xSpeedとySpeedを必要に応じて調整します。

出典

2017-03-22 17:41:12

ありがとう！問題は1つだけです。何らかの理由で私がどのキーを押しても、キューブは速くて速く回転します。位置はそれが想定されているとおりに変わりますが、私のコードのどの部分がキューブのいずれかでより速く回転する原因になっているのかどうかわかりません。 – Teej

@Tyler keypressイベントからrender（）を削除します。 – Chris

ありがとう！すべてが今完璧に動作しています。 – Teej

あなたのキーダウンイベントでrenderメソッドをあなたの再呼び出し：：ここにHTMLがある

function onDocumentKeyDown(event) { 
    ... 
    render(); 
};

問題は、あなたが値を更新してたことが、ThreeJSは自動的に再レンダリングされません。物事が変わると、再レンダリングするように言わなければなりません。

編集：レンダリング方法では、回転のプロパティを変更するだけなので、キューブは回転しません。 ThreeJSにもキューブの新しい位置を伝える必要があります。

"xSpeed"と "ySpeed"のソリューションはうまくいかないと思いますが、実際にはposition.xとposition.yの値を加算または減算する必要があります。

出典

2017-03-22 17:07:12 dzylich

私はkeydownの内部をレンダリングしましたが、xとyに沿ってキューブをスライドさせるキーを押すのではなく、回転速度を上げるだけです。問題は私のxSpeedとySpeed変数にあると思いますが、わかりません。 – Teej

私は編集をしました。以下の解決策には例があります。 – dzylich

キーボード入力でThree JSキューブを移動するにはどうすればよいですか？

答えて

関連する問題