我正在尝试使用Three.js和Physi.js对象制作游戏破砖者。到目前为止，我有砖和桨工作。然而，当我创造一个弹力球时，它似乎是在各个地方跳跃而不是简单地在不同的角度上下跳跃。即使它没有击中桨，看起来球仍然保持弹跳。任何人都可以帮助我的代码吗？
var scene, camera, renderer;
var wall, brick, ball;
var npc;
var controls =
{ left:false, right:false,
speed:10,}
var counter=0;
var ball;
console.log("Checking!");
init();
animate();
/****************************************************************
To initialize the scene, we initialize each of its components *
****************************************************************/
function init(){
initPhysijs();
scene = initScene();
initRenderer();
initControls();
addLight();
camera = addCamera();
addBricks();
addWalls();
addNPC();
var ball = createBall();
ball.position.set(0,-10,0);
scene.add(ball)
}
function initScene(){
var scene = new Physijs.Scene();
return scene;
}
function initPhysijs(){
Physijs.scripts.worker = '../js/physijs_worker.js';
Physijs.scripts.ammo = '../js/ammo.js';
}
function initRenderer(){
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xF7F9F9));
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
}
function initControls(){
// here is where we create the eventListeners to respond to operations
//create a clock for the time-based animation ...
clock = new THREE.Clock();
clock.start();
window.addEventListener( 'keydown', keydown);
window.addEventListener( 'keyup', keyup );
}
function keydown(event){
console.dir(event);
console.log("Keydown: '"+event.key+"'");
// this is the regular scene
switch (event.key){
// change the way the avatar is moving
case "ArrowRight": controls.right = true;console.log("coneAvatar moving forward"); break;
case "ArrowLeft": controls.left = true; break;
}
}
function keyup(event){
//console.log("Keydown:"+event.key);
//console.dir(event);
switch (event.key){
case "ArrowRight": controls.right = false; break;
case "ArrowLeft": controls.left = false; break;
}
}
function updateNPC(npc,controls){
var forward = npc.getWorldDirection();
if (controls.left){
npc.position.set(counter-.2,-15,0)
npc._dirtyPosition=true;
// npc.position.x+=1;
counter=counter-.2;
} else if (controls.right){
npc.position.set(counter+.2,-15,0)
npc._dirtyPosition=true;
// npc.position.x=npc.position-1;
counter=counter+.2;
}
else{
npc.position.set(counter,-15,0);
}
}
function addLight() {
var spotLight = new THREE.DirectionalLight(0xffffff);
spotLight.position.set(30, 40, 50);
spotLight.intensity = 1;
scene.add(spotLight);
}
function addCamera(){
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z=24;
camera.position.y=0;
camera.position.x=0;
camera.lookAt(0,0,0);
return camera;
}
function createBall(){
//var geometry = new THREE.SphereGeometry( 4, 20, 20);
var geometry = new THREE.SphereGeometry( 1, 16, 16);
var material = new THREE.MeshLambertMaterial( { color: 0x444444} );
var pmaterial = new Physijs.createMaterial(material,0.9,3);
var mesh = new Physijs.BoxMesh( geometry, pmaterial );
mesh.setDamping(0.01,0.01);
mesh.castShadow = true;
return mesh;
}
/* Adds the bricks to the scene to form the wall the player will try to break down
Added by Allison Regna */
function addBricks() {
var yPos = 0;
var zPos = 0;
var colors = [0x1DD3B0, 0xAFFC41, 0xB2FF9E, 0x75B9BE, 0x7D82B8, 0x00A5CF, 0x987284, 0xAAEFDF, 0xAED6F1];
for(var i= 1; i <= 8 ; i++){
xPos = -30.5;
for(var j= 1; j <=16; j++){
color = colors[getRandomInt(9)];
brick = createBrick(color);
brick.position.set(xPos, yPos, zPos);
scene.add(brick);
brick.addEventListener('collision',
function( other_object, relative_velocity, relative_rotation, contact_normal ) {
if (other_object == ball){
console.log("The ball broke the brick!");
// make the brick drop below the scene ..
this.position.y = this.position.y - 100;
this.__dirtyPosition = true;
}
}
)
xPos += 4.10;
}
yPos += 2.10;
}
}
/* Returns a random integer between 0 inclusive and maxInt noninclusive
Added by Allison Regna */
function getRandomInt(maxInt) {
return Math.floor(Math.random() * Math.floor(maxInt));
}
function addNPC(){
npc = createBoxMesh(0x0000ff);
npc.position.set(0,-15,0);
npc.scale.set(5,2,1);
npc.rotateY(100)
scene.add(npc);
console.dir(npc);
}
/* Adds walls to the scene so the ball can bounce off back into the players view
Added by Allison Regna */
function addWalls(){
var topWall = createWall();
topWall.position.set(0, 18, 0);
scene.add(topWall);
var leftWall = createWall();
leftWall.position.set(-39, 0, 0);
leftWall.rotateZ(Math.PI/2);
scene.add(leftWall);
var rightWall = createWall();
rightWall.position.set(39, 0, 0);
rightWall.rotateZ(Math.PI/2);
scene.add(rightWall);
}
function createBoxMesh(color){
var geometry = new THREE.BoxGeometry( 2, .1, .1);
var material = new THREE.MeshLambertMaterial( { color: color} );
var pmaterial= new Physijs.createMaterial( material, 0.9, .95 );
mesh = new Physijs.BoxMesh( geometry, pmaterial, 0);
mesh.castShadow = true;
mesh.float=true;
return mesh;
}
/* Creates a brick mesh
Added by Allison Regna */
function createBrick(color){
var geometry = new THREE.PlaneGeometry( 4, 2, 4 );
var material = new THREE.MeshBasicMaterial( { color: color, wireframe: false } );
var pmaterial= new Physijs.createMaterial( material, 0.9, 0.05 );
brickMesh = new Physijs.BoxMesh( geometry, pmaterial, 0 );
brickMesh.castShadow = true;
return brickMesh;
}
/* Creates a wall mesh that will keep the ball inside the scene
Added by Allison Regna */
function createWall(){
var geometry = new THREE.PlaneGeometry( 100, 1, 1 );
var material = new THREE.MeshBasicMaterial( {color: 0xffffff} );
var pmaterial = new Physijs.createMaterial ( material, .9, 0.05 );
var wall = new THREE.Mesh( geometry, material, 0 );
return wall;
}
function animate() {
requestAnimationFrame( animate );
updateNPC(npc,controls);
renderer.render( scene, camera );
scene.simulate();
}<!DOCTYPE html>
<!--
PA03 Group J-Crew
-->
<html>
<head>
<meta charset=utf-8>
<title>Game 0</title>
<style>
body { margin: 0;}
canvas { width: 100%; height: 100%;}
</style>
</head>
<body>
<script src="https://github.com/mrdoob/three.js/"></script>
<script src="https://github.com/chandlerprall/Physijs"></script>
<script src="https://github.com/dataarts/dat.gui"></script>
<script src="https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/OBJLoader.js"></script>
<script src="Final_project.js"></script>
<div id="info"></div>
</body>
</html>