Question

我是Three.js的初学者。我的任务是构建一个简单的FPS游戏。我在使用枪支和子弹时遇到很多麻烦。当我按下“空格键”时，我的武器射击了，但问题是子弹只朝着屏幕的一小部分朝着正确的方向前进，然后它们开始向非我想要的方向前进。

这是一个示例： image1 image2

这是我为项目符号编写的代码：

// SHOOT BULLET




for(var index=0; index<bullets.length; index+=1){

            if( bullets[index] === undefined ) continue;
            if( bullets[index].alive == false ){
            bullets.splice(index,1);
            continue;
            }

            bullets[index].position.add(bullets[index].velocity);
            }

            if(keyboard[32] && canShoot <= 0){ // spacebar key

            // creates a bullet as a Mesh object
            var bullet = new THREE.Mesh(
                                        new THREE.SphereGeometry(0.2,8,8),
                                        new THREE.MeshBasicMaterial({color:0x42FFFF})
                                        );
            // position the bullet to come from the player's weapon
            bullet.position.set(
                                camera.position.x - 0.7*parseInt(-Math.cos(camera.rotation.z)),
                                camera.position.y - 0.3,
                                camera.position.z +1*parseInt(-Math.cos(camera.rotation.z))
                                );

            // set the velocity of the bullet
            bullet.velocity = new THREE.Vector3( (-mouse.x - Math.sin(camera.rotation.y + Math.PI/6) * 7),//*parseInt(-Math.cos(camera.rotation.z)) ,
                                                mouse.y,
                                                Math.cos(camera.rotation.y)*parseInt(-Math.cos(camera.rotation.z))
                                                                                                    ).normalize();
                console.info(bullet.velocity);
            // after 1000ms, set alive to false and remove from scene
            // setting alive to false flags our update code to remove
            // the bullet from the bullets array
            bullet.alive = true;
            setTimeout(function(){
                       bullet.alive = false;
                       scene.remove(bullet);
                       }, 1000);
            // add to scene, array, and set the delay to 10 frames
            bullets.push(bullet);
            scene.add(bullet);
            canShoot = 10;
            }
            if(canShoot > 0) canShoot -= 1;

Answer 1

关于如何设置子弹方向和移动的粗略概念：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 10000);
camera.position.set(0, 0, 1);
scene.add(camera);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var background = new THREE.Mesh(new THREE.SphereGeometry(1000, 90, 45), new THREE.MeshBasicMaterial({
  color: "gray",
  wireframe: true
}));
scene.add(background);

var weapon = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 5), new THREE.MeshBasicMaterial({
  color: 0x5555ff
}));
weapon.position.set(2, -1, -2.5);
camera.add(weapon);
var emitter = new THREE.Object3D();
emitter.position.set(2, -1, -5);
camera.add(emitter);


var plasmaBalls = [];
window.addEventListener("mousedown", onMouseDown);

function onMouseDown() {
  let plasmaBall = new THREE.Mesh(new THREE.SphereGeometry(0.5, 8, 4), new THREE.MeshBasicMaterial({
    color: "aqua"
  }));
  plasmaBall.position.copy(emitter.getWorldPosition()); // start position - the tip of the weapon
  plasmaBall.quaternion.copy(camera.quaternion); // apply camera's quaternion
  scene.add(plasmaBall);
  plasmaBalls.push(plasmaBall);
}

var speed = 50;
var clock = new THREE.Clock();
var delta = 0;

(function render() {
  requestAnimationFrame(render);
  delta = clock.getDelta();
  plasmaBalls.forEach(b => {
    b.translateZ(-speed * delta); // move along the local z-axis
  });
  renderer.render(scene, camera);
})()

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Three.js射击子弹

1 个答案: