Three.js работает медленно, если я загружаю файл сервера - PullRequest
Новая
       19

Three.js работает медленно, если я загружаю файл сервера

0 голосов
/ 15 марта 2019

У меня есть игра three.js, я хочу иметь возможность загружать информацию о разных игроках в игре, загружая файл с помощью php или ajax.Но если я вообще загружаю файл, игра three.js становится очень медленной и прерывистой.

Вот мой код: 

<?php
$file1 = fopen("Profiles/person1.player", "r");
$file2 = fopen("Profiles/person2.player", "r");

$text1 = fread($file1, filesize("Profiles/person1.player"));
$text2 = fread($file2, filesize("Profiles/person2.player"));
?>

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>Three.js</title>
	</head>
	<body>
		<style>
		body{
			margin: 0%;
			overflow: hidden;
		}
		head{
			margin: 0px;
		}
		</style>
		<script src="three.js"></script>
		<script src="prefabs.js"></script>
		<script>
var seq1 = "<?php echo $text1; ?>";
var seq2 = "<?php echo $text2; ?>";

seq1.split(", ");
seq2.split(", ");

for (var i = 0; i < seq1.length; i++){
    seq1[i] = parseFloat(seq1[i]);
}
for (var j = 0; j < seq2.length; j++){
    seq2[j] = parseFloat(seq2[j]);
}
var sequence1 = seq1;
var sequence2 = seq2;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z = 0;
camera.position.x = 15;
camera.position.y = 7.5;

scene.add(new THREE.AmbientLight(0xffffff, 0.5));
var directional = new THREE.DirectionalLight(0xffffff, 1);
directional.position.set(3, 10, 3);
scene.add(directional);

var player1 = Player(0xbc3232);
scene.add(player1.body);
player1.body.position.set(0, 0, 5);
var player2 = Player(0x4286f4);
scene.add(player2.body);
player2.body.position.set(0, 0, -5);

var ground = new THREE.Mesh(
	new THREE.BoxGeometry(20, 1, 20),
	new THREE.MeshStandardMaterial({color: 0xdddddd})
);
ground.position.set(0, -2, 0);

var boxingRing = {
	one: new THREE.Mesh(
		new THREE.CylinderGeometry(0.75, 0.75, 10, 16),
		new THREE.MeshStandardMaterial()
	),
	two: new THREE.Mesh(
		new THREE.CylinderGeometry(0.75, 0.75, 10, 16),
		new THREE.MeshStandardMaterial()
	),
	three: new THREE.Mesh(
		new THREE.CylinderGeometry(0.75, 0.75, 10, 16),
		new THREE.MeshStandardMaterial()
	),
	four: new THREE.Mesh(
		new THREE.CylinderGeometry(0.75, 0.75, 10, 16),
		new THREE.MeshStandardMaterial()
	),
	beams: {
		one: new THREE.Mesh(
			new THREE.TorusGeometry(13.5, 0.3, 16, 4),
			new THREE.MeshStandardMaterial({color: 0xbc3232})
		),
		two: new THREE.Mesh(
			new THREE.TorusGeometry(13.5, 0.3, 16, 4),
			new THREE.MeshStandardMaterial({color: 0x4286f4})
		),
		three: new THREE.Mesh(
			new THREE.TorusGeometry(13.5, 0.3, 16, 4),
			new THREE.MeshStandardMaterial({color: 0xdddddd})
		),
	}
};



ground.add(boxingRing.one);
boxingRing.one.position.set(-9.5, 0, -9.5);
ground.add(boxingRing.two);
boxingRing.two.position.set(9.5, 0, -9.5);
ground.add(boxingRing.three);
boxingRing.three.position.set(-9.5, 0, 9.5);
ground.add(boxingRing.four);

boxingRing.beams.one.rotation.set(Math.PI/2, 0, Math.PI/4);
boxingRing.four.position.set(9.5, 0, 9.5);
ground.add(boxingRing.beams.one);
boxingRing.beams.one.position.set(0, 2, 0);

boxingRing.beams.two.rotation.set(Math.PI/2, 0, Math.PI/4);
ground.add(boxingRing.beams.two);
boxingRing.beams.two.position.set(0, 3, 0);

boxingRing.beams.three.rotation.set(Math.PI/2, 0, Math.PI/4);
ground.add(boxingRing.beams.three);
boxingRing.beams.three.position.set(0, 4, 0);

scene.add(ground);

function GameLoop(){
    requestAnimationFrame(GameLoop);
	PlayerControl();
	CameraControl();
	Render();
	lightHolder.rotation.x += 0.01;
}
function Render(){
	renderer.render(scene, camera);
}
function CameraControl(){
	var target = new THREE.Vector3(
		(player1.body.position.x + player2.body.position.x)/2,
		(player1.body.position.y + player2.body.position.y)/2,
		(player1.body.position.z + player2.body.position.z)/2
	);
	camera.lookAt(target);
	var dist = Math.sqrt(Math.pow(player1.body.position.x - player2.body.position.x, 2) + Math.pow(player1.body.position.z - player2.body.position.z, 2));
	camera.fov = dist*5;
	camera.updateProjectionMatrix();
}
function PlayerControl(){
	player1.body.lookAt(player2.body.position);
	player2.body.lookAt(player1.body.position);
	Anim1();
	Anim2();
}

var animations = [
[//0 = charge, 1 = shoot, 2 = block//
	//Left Hand Pos
	{
		x: [2.5, 2.5, 2.5, 2.5],
		y: [1, 1, 1, 1],
		z: [0.5, 0.5, 0.5, 0.5]
	},
	//Right Hand Pos
	{
		x: [-2.5, -2.5, -2.5, -2.5],
		y: [1, 1, 1, 1],
		z: [0.5, 2, 0.5, 0.5]
	},
	//Left Hand Rot
	{
		x: [0, 0, 0, 0],
		y: [0, 0, 0, 0],
		z: [0, 0, 0, 0]
	},
	//Right Hand Rot
	{
		x: [0, 0, -70, -70],
		y: [0, 0, 0, 0],
		z: [0, 0, 0, 0]
	},
	//Shield Scale
	{
		x: [0, 0, 0, 0],
		y: [0, 0, 0, 0],
		z: [0, 0, 0, 0]
	},
	//Gun Scale
	{
		x: [0, 1, 1, 1],
		y: [0, 1, 1, 1],
		z: [0, 1, 1, 1]
	}
],
[
	//Left Hand Pos
	{
		x: [2.5, 0.25, 0.25, 0.25],
		y: [1, 1.5, 1.5, 1.5],
		z: [0.5, 2.5, 1.5, 2.5]
	},
	//Right Hand Pos
	{
		x: [-2.5, -0.25, -0.25, -0.25],
		y: [1, 1.5, 1.5, 1.5],
		z: [0.5, 2.5, 1.5, 2.5]
	},
	//Left Hand Rot
	{
		x: [0, 0, 0, 0],
		y: [0, 0, 0, 0],
		z: [0, 0, 0, 0]
	},
	//Right Hand Rot
	{
		x: [0, 0, 0, 0],
		y: [0, 0, 0, 0],
		z: [0, 0, 0, 0]
	},
	//Shield Scale
	{
		x: [0, 0, 0, 0],
		y: [0, 0, 0, 0],
		z: [0, 0, 0, 0]
	},
	//Gun Scale
	{
		x: [0, 0, 1, 1],
		y: [0, 0, 1, 1],
		z: [0, 0, 1, 1]
	}
],
[
	//Left Hand Pos
	{
		x: [1.5, 0.25, 0.25, 0.25],
		y: [1, 1, 1, 1],
		z: [0.5, 2, 2, 2]
	},
	//Right Hand Pos
	{
		x: [-1.5, -0.25, -0.25, -0.25],
		y: [1, 1, 1, 1],
		z: [0.5, 2, 2, 2]
	},
	//Left Hand Rot
	{
		x: [0, 0, 0, 0],
		y: [0, 0, 0, 0],
		z: [0, 0, 0, 0]
	},
	//Right Hand Rot
	{
		x: [0, 0, 0, 0],
		y: [0, 0, 0, 0],
		z: [0, 0, 0, 0]
	},
	//Shield Scale
	{
		x: [0, 2.5, 2.5, 2.5],
		y: [0, 2.5, 2.5, 2.5],
		z: [0, 2.5, 2.5, 2.5]
	},
	//Gun Scale
	{
		x: [0, 0, 0, 0],
		y: [0, 0, 0, 0],
		z: [0, 0, 0, 0]
	}
]];

var frame1 = 1;
var lastFrame1 = 0;
var time1 = 0;
var clip1 = 0;
var lastClip1 = 0;
var speed = 10;
function Anim1(){
	time1++;
	if (time1 == speed){
		time1 = 0;
		lastFrame1 = frame1;
		frame1++;
		if (frame1 == 4){
			frame1 = 0;
			lastClip1 = clip1;
			clip1++;
			if (clip1 == sequence1.length){
				clip1 = 0;
			}
		}
	}
	if (frame1 !== 0){
		lastClip1 = clip1;
	}
	var values = {
		leftPos: {
			x: ((animations[sequence1[clip1]][0].x[frame1]/speed*time1) + (animations[sequence1[lastClip1]][0].x[lastFrame1]/speed*(speed-time1)))/2,
			y: ((animations[sequence1[clip1]][0].y[frame1]/speed*time1) + (animations[sequence1[lastClip1]][0].y[lastFrame1]/speed*(speed-time1)))/2,
			z: ((animations[sequence1[clip1]][0].z[frame1]/speed*time1) + (animations[sequence1[lastClip1]][0].z[lastFrame1]/speed*(speed-time1)))/2
		},
		rightPos: {
			x: ((animations[sequence1[clip1]][1].x[frame1]/speed*time1) + (animations[sequence1[lastClip1]][1].x[lastFrame1]/speed*(speed-time1)))/2,
			y: ((animations[sequence1[clip1]][1].y[frame1]/speed*time1) + (animations[sequence1[lastClip1]][1].y[lastFrame1]/speed*(speed-time1)))/2,
			z: ((animations[sequence1[clip1]][1].z[frame1]/speed*time1) + (animations[sequence1[lastClip1]][1].z[lastFrame1]/speed*(speed-time1)))/2
		},
		leftRot: {
			x: ((animations[sequence1[clip1]][2].x[frame1]/speed*time1) + (animations[sequence1[lastClip1]][2].x[lastFrame1]/speed*(speed-time1)))/2*Math.PI/90,
			y: ((animations[sequence1[clip1]][2].y[frame1]/speed*time1) + (animations[sequence1[lastClip1]][2].y[lastFrame1]/speed*(speed-time1)))/2*Math.PI/90,
			z: ((animations[sequence1[clip1]][2].z[frame1]/speed*time1) + (animations[sequence1[lastClip1]][2].z[lastFrame1]/speed*(speed-time1)))/2*Math.PI/90
		},
		rightRot: {
			x: ((animations[sequence1[clip1]][3].x[frame1]/speed*time1) + (animations[sequence1[lastClip1]][3].x[lastFrame1]/speed*(speed-time1)))/2*Math.PI/90,
			y: ((animations[sequence1[clip1]][3].y[frame1]/speed*time1) + (animations[sequence1[lastClip1]][3].y[lastFrame1]/speed*(speed-time1)))/2*Math.PI/90,
			z: ((animations[sequence1[clip1]][3].z[frame1]/speed*time1) + (animations[sequence1[lastClip1]][3].z[lastFrame1]/speed*(speed-time1)))/2*Math.PI/90
		},
		shieldScale: {
			x: ((animations[sequence1[clip1]][4].x[frame1]/speed*time1) + (animations[sequence1[lastClip1]][4].x[lastFrame1]/speed*(speed-time1)))/2,
			y: ((animations[sequence1[clip1]][4].y[frame1]/speed*time1) + (animations[sequence1[lastClip1]][4].y[lastFrame1]/speed*(speed-time1)))/2,
			z: ((animations[sequence1[clip1]][4].z[frame1]/speed*time1) + (animations[sequence1[lastClip1]][4].z[lastFrame1]/speed*(speed-time1)))/2
		},
		gunScale: {
			x: ((animations[sequence1[clip1]][5].x[frame1]/speed*time1) + (animations[sequence1[lastClip1]][5].x[lastFrame1]/speed*(speed-time1)))/2,
			y: ((animations[sequence1[clip1]][5].y[frame1]/speed*time1) + (animations[sequence1[lastClip1]][5].y[lastFrame1]/speed*(speed-time1)))/2,
			z: ((animations[sequence1[clip1]][5].z[frame1]/speed*time1) + (animations[sequence1[lastClip1]][5].z[lastFrame1]/speed*(speed-time1)))/2
		}
	};
	
	player1.hands.l.position.set(
		values.leftPos.x,
		values.leftPos.y,
		values.leftPos.z
	);
	player1.hands.r.position.set(
		values.rightPos.x,
		values.rightPos.y,
		values.rightPos.z
	);
	player1.hands.l.rotation.set(
		values.leftRot.x,
		values.leftRot.y,
		values.leftRot.z
	);
	player1.hands.r.rotation.set(
		values.rightRot.x,
		values.rightRot.y,
		values.rightRot.z
	);
	player1.shield.scale.set(
		values.shieldScale.x,
		values.shieldScale.y,
		values.shieldScale.z
	);
	player1.pistol.scale.set(
		values.gunScale.x,
		values.gunScale.y,
		values.gunScale.z
	);
}

var frame2 = 1;
var lastFrame2 = 0;
var time2 = 0;
var clip2 = 0;
var lastClip2 = 0;
var speed = 10;
function Anim2(){
	time2++;
	if (time2 == speed){
		time2 = 0;
		lastFrame2 = frame2;
		frame2++;
		if (frame2 == 4){
			frame2 = 0;
			lastClip2 = clip2;
			clip2++;
			if (clip2 == sequence2.length){
				clip2 = 0;
			}
		}
	}
	if (frame2 !== 0){
		lastClip2 = clip2;
	}
	var values = {
		leftPos: {
			x: ((animations[sequence2[clip2]][0].x[frame2]/speed*time2) + (animations[sequence2[lastClip2]][0].x[lastFrame2]/speed*(speed-time2)))/2,
			y: ((animations[sequence2[clip2]][0].y[frame2]/speed*time2) + (animations[sequence2[lastClip2]][0].y[lastFrame2]/speed*(speed-time2)))/2,
			z: ((animations[sequence2[clip2]][0].z[frame2]/speed*time2) + (animations[sequence2[lastClip2]][0].z[lastFrame2]/speed*(speed-time2)))/2
		},
		rightPos: {
			x: ((animations[sequence2[clip2]][1].x[frame2]/speed*time2) + (animations[sequence2[lastClip2]][1].x[lastFrame2]/speed*(speed-time2)))/2,
			y: ((animations[sequence2[clip2]][1].y[frame2]/speed*time2) + (animations[sequence2[lastClip2]][1].y[lastFrame2]/speed*(speed-time2)))/2,
			z: ((animations[sequence2[clip2]][1].z[frame2]/speed*time2) + (animations[sequence2[lastClip2]][1].z[lastFrame2]/speed*(speed-time2)))/2
		},
		leftRot: {
			x: ((animations[sequence2[clip2]][2].x[frame2]/speed*time2) + (animations[sequence2[lastClip2]][2].x[lastFrame2]/speed*(speed-time2)))/2*Math.PI/90,
			y: ((animations[sequence2[clip2]][2].y[frame2]/speed*time2) + (animations[sequence2[lastClip2]][2].y[lastFrame2]/speed*(speed-time2)))/2*Math.PI/90,
			z: ((animations[sequence2[clip2]][2].z[frame2]/speed*time2) + (animations[sequence2[lastClip2]][2].z[lastFrame2]/speed*(speed-time2)))/2*Math.PI/90
		},
		rightRot: {
			x: ((animations[sequence2[clip2]][3].x[frame2]/speed*time2) + (animations[sequence2[lastClip2]][3].x[lastFrame2]/speed*(speed-time2)))/2*Math.PI/90,
			y: ((animations[sequence2[clip2]][3].y[frame2]/speed*time2) + (animations[sequence2[lastClip2]][3].y[lastFrame2]/speed*(speed-time2)))/2*Math.PI/90,
			z: ((animations[sequence2[clip2]][3].z[frame2]/speed*time2) + (animations[sequence2[lastClip2]][3].z[lastFrame2]/speed*(speed-time2)))/2*Math.PI/90
		},
		shieldScale: {
			x: ((animations[sequence2[clip2]][4].x[frame2]/speed*time2) + (animations[sequence2[lastClip2]][4].x[lastFrame2]/speed*(speed-time2)))/2,
			y: ((animations[sequence2[clip2]][4].y[frame2]/speed*time2) + (animations[sequence2[lastClip2]][4].y[lastFrame2]/speed*(speed-time2)))/2,
			z: ((animations[sequence2[clip2]][4].z[frame2]/speed*time2) + (animations[sequence2[lastClip2]][4].z[lastFrame2]/speed*(speed-time2)))/2
		},
		gunScale: {
			x: ((animations[sequence2[clip2]][5].x[frame2]/speed*time2) + (animations[sequence2[lastClip2]][5].x[lastFrame2]/speed*(speed-time2)))/2,
			y: ((animations[sequence2[clip2]][5].y[frame2]/speed*time2) + (animations[sequence2[lastClip2]][5].y[lastFrame2]/speed*(speed-time2)))/2,
			z: ((animations[sequence2[clip2]][5].z[frame2]/speed*time2) + (animations[sequence2[lastClip2]][5].z[lastFrame2]/speed*(speed-time2)))/2
		}
	};
	
	player2.hands.l.position.set(
		values.leftPos.x,
		values.leftPos.y,
		values.leftPos.z
	);
	player2.hands.r.position.set(
		values.rightPos.x,
		values.rightPos.y,
		values.rightPos.z
	);
	player2.hands.l.rotation.set(
		values.leftRot.x,
		values.leftRot.y,
		values.leftRot.z
	);
	player2.hands.r.rotation.set(
		values.rightRot.x,
		values.rightRot.y,
		values.rightRot.z
	);
	player2.shield.scale.set(
		values.shieldScale.x,
		values.shieldScale.y,
		values.shieldScale.z
	);
	player2.pistol.scale.set(
		values.gunScale.x,
		values.gunScale.y,
		values.gunScale.z
	);
}

GameLoop();
		</script>
	</body>
</html>

Я думаю, у меня есть два вопроса: 1. Почему мой three.js работает медленнее, когда я загружаю файл на стороне сервера 2. Как я могу решить или обойти эту проблему

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...