web-dev-qa-db-ja.com

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

次のコードは、これまでに3つのjsを使用して、またはtranslate回転キューブオブジェクトをWASDキーで上下左右に回転させ、元の位置にリセットしようと記述したものです（画面の中央）とスペースバー。私は3つのjに非常に慣れていないので、ムーブメントを機能させる方法がわかりません。どんな助けでも大歓迎です。これは私がこれまでに持っているものです：

// 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は次のとおりです。

<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>
javascriptthree.jsevent-handlingdom-eventskeyboard-events
10
Teej

これはどう ？ -

// 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を調整します。

6
Rasheduzzaman Sourov

キーダウンイベントでレンダーメソッドを再度呼び出します。

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

問題は、値を更新していたことですが、ThreeJSは、変更があったときに自動的にビューを再レンダリングしません。再レンダリングするように指示する必要があります。

編集：レンダリングメソッドでは、回転プロパティを変更するだけなので、立方体だけが回転します。 ThreeJSにキューブの新しい位置を通知する必要もあります。

「xSpeed」と「ySpeed」の解決策は機能しないと思います。実際には、position.xとposition.yの値を加算または減算する必要があります。

0
dzylich