我正在使用three.js制作基于服务器的多人游戏。服务器应该像这样工作
游戏 - ＆GT; Server2.php - ＆GT; Server.txt
游戏 - ＆GT; Server.php - ＆GT; Server.txt - ＆GT;游戏
这种方式的工作原理是
1。）生成游戏
2.）每个元素都被添加到名为sendtoserver
的数组中3。）sendtoserver通过post发送到server2.php
4.。）Server2.php将sendtoserver写入Server.txt
5.）post请求然后打开对server.php
的get请求6。）Server.php读取Server.txt并返回结果
但是，chrome正在运行请求并发出aw snaps错误。 这是代码
的index.html：
<!DOCTYPE html>
<!--
Controls:
Up Arrow to Move Foward
Down Arrow to Move Backward
Left Arrow to Move Left
Right Arrow to Move Right
1 to Move Up
2 to Move Down
3 to Rotate Left
4 to Rotate Right
5 to Rotate Up
6 to Rotate Down
-->
<html>
<head>
<meta charset="utf-8">
<title>Rotating Cube</title>
</head>
<body>
<!--Import three.js and jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.js">
</script>
<script src="jquery.js">
</script>
<!--Set up camera-->
<script>
var sendtoserver=["server:online"];
getServerStatus=function(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
var response=xhttp.responseText;
response=response.substring(0, response.indexOf('<'));
alert(response);
}
};
xhttp.open("GET", "Server.php", true);
xhttp.send();
}
turnserveron=function(){
$.post( "Server2.php",{
data:sendtoserver
},function(){
getServerStatus();
});
}
Math.radians = function(degrees) {
return degrees * Math.PI / 180;
};
function getrandomdirection(){
return Math.radians(Math.round(Math.random()*360));
}
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 );
function render(){
requestAnimationFrame( render );
renderer.render( scene, camera );
}
//some non-essential camera commands were deleted here
function house(x,y,z,bodycolor1,bodycolor2,bodycolor3,roofcolor1,roofcolor2,roofcolor3,rotation){
var geometry = new THREE.BoxGeometry( 3, 3, 3 );
var material = new THREE.MeshBasicMaterial( { color:"rgb("+bodycolor1+","+bodycolor2+","+bodycolor3+")" } );
var cube = new THREE.Mesh( geometry, material );
var geometry2 = new THREE.CylinderGeometry( 0, 2.3, 4, 4, 1 );
var material2 = new THREE.MeshBasicMaterial( { color: "rgb("+roofcolor1+","+roofcolor2+","+roofcolor3+")" } );
var roof= new THREE.Mesh(geometry2,material2);
cube.position.set(0+x,0+y,0+z);
roof.position.set(0+x,3.5+y,0+z);
roof.rotateY(0.7);
var doorgeo=new THREE.BoxGeometry(1,2,1);
var doormaterial=new THREE.MeshBasicMaterial({color:0xA52A2A});
var door=new THREE.Mesh(doorgeo,doormaterial);
door.position.set(0+x,-0.5+y,1+z)
var house = new THREE.Object3D();
house.add(cube);
house.add(roof);
house.add(door);
scene.add(house);
sendtoserver.push(house);
//fix this
house.rotateY(rotation);
}
renderer.setClearColor(0x00ffff, 1);
var texture = new THREE.TextureLoader().load( "Grass.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 600, 600 );
var groundmaterial=new THREE.MeshBasicMaterial({map: texture});
var groundGeo = new THREE.PlaneGeometry(400,400);
ground=new THREE.Mesh(groundGeo,groundmaterial);
ground.position.y = -1.9;
ground.rotation.x = -Math.PI/2;
ground.doubleSided=true;
scene.add(ground);
sendtoserver.push(ground);
var sungeometry = new THREE.SphereGeometry( 1.875*50, 12*50, 12*50 );
var sunmaterial = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var sun = new THREE.Mesh( sungeometry, sunmaterial );
sun.position.y=200;
sun.position.z=-200;
scene.add( sun );
sendtoserver.push(sun);
</script>
<script>
createtown=function(width){
for(var i=-width/2+3.3;i<width/2-3.3;i+=3.3){
house(i,0,0,Math.round(Math.random()*255),Math.round(Math.random()*255),Math.round(Math.random()*255),Math.round(Math.random()*255),Math.round(Math.random()*255),Math.round(Math.random()*255),Math.radians(0));
}
for(var j=3.3;j<width-3.3;j+=3.3){
house(-j,0,-width/2,Math.round(Math.random()*255),Math.round(Math.random()*255),Math.round(Math.random()*255),Math.round(Math.random()*255),Math.round(Math.random()*255),Math.round(Math.random()*255),Math.radians(90));
}
for(var j=3.3;j<width-3.3;j+=3.3){
house(j,0,-width/2,Math.round(Math.random()*255),Math.round(Math.random()*255),Math.round(Math.random()*255),Math.round(Math.random()*255),Math.round(Math.random()*255),Math.round(Math.random()*255),Math.radians(270));
}
for(var j=-width/2+3.3;j<width/2-3.3;j+=3.3){
house(j,0,-width,Math.round(Math.random()*255),Math.round(Math.random()*255),Math.round(Math.random()*255),Math.round(Math.random()*255),Math.round(Math.random()*255),Math.round(Math.random()*255),Math.radians(180));
}
}
function changedirection(object){
object.rotation.y=getrandomdirection();
}
var villager=function(){
//edit this to draw villager
var villagerfacegeo = new THREE.BoxGeometry( 1, 1, 1 );
var facetexture = new THREE.TextureLoader().load( "villagerface.png" );
var villagerfacematerial=new THREE.MeshBasicMaterial({map: facetexture});
materials=[
villagerfacematerial,
new THREE.MeshBasicMaterial( {color: 0xffff00} ),new THREE.MeshBasicMaterial( {color: 0xffff00} ),new THREE.MeshBasicMaterial( {color: 0xffff00} ),new THREE.MeshBasicMaterial( {color: 0xffff00} ),new THREE.MeshBasicMaterial( {color: 0xffff00} )
]
villagerface=new THREE.Mesh(villagerfacegeo,new THREE.MeshFaceMaterial( materials ));
scene.add(villagerface);
villagerface.position.z=10;
villagerface.position.y=2;
sendtoserver.push(villagerface);
window.setInterval(function(){changedirection(villagerface);},5000);
}
</script>
<!--Actual Program-->
<script>
createtown(99);
//villager();
camera.position.z = 5;
camera.rotation.y=getrandomdirection();
var stevefacegeo = new THREE.BoxGeometry( 1, 1, 1 );
var stevefacetexture = new THREE.TextureLoader().load( "villagerface.png" );
var stevefacematerial=new THREE.MeshBasicMaterial({map: stevefacetexture});
materials=[
stevefacematerial,
new THREE.MeshBasicMaterial( {color: 0xffff00} ),new THREE.MeshBasicMaterial( {color: 0xffff00} ),new THREE.MeshBasicMaterial( {color: 0xffff00} ),new THREE.MeshBasicMaterial( {color: 0xffff00} ),new THREE.MeshBasicMaterial( {color: 0xffff00} )
]
steveface=new THREE.Mesh(stevefacegeo,new THREE.MeshFaceMaterial( materials ));
scene.add(steveface);
steveface.position.z=5;
steveface.rotation.y=camera.rotation.y;
sendtoserver.push(steveface);
//Below this is non important camera controls
</script>
</body>
</html>
Server.php
<?php
$myfile = fopen("Server.txt", "r") or die("Unable to open file!");
echo fread($myfile,filesize("Server.txt"));
fclose($myfile);
?>
Server2.php
<?php
$myfile = fopen("Server.txt", "w") or die("Unable to open file!");
foreach ($_POST[sendtoserver] as $value)
fwrite($myfile,$value);
fclose($myfile);
?>
本网站在rotatecube.site88.net
上线答案 0 :(得分：0)
您需要修改server2.php文件中的代码，
首先，不要回显数组，否则会产生转换错误。如果你想检查数组中的内容，可能使用print_r（array）或var_dump（array）。
其次，你不能直接将数组写入文件，按照$ _POST ['sendtoserver']中的数组结构循环，然后将字符串写入文本文件。你可以使用print_r（$ _ POST ['sendtoserver']）;要查看数组结构，您应该能够在控制台（firebug / browser console）中查看结构，因为它超过了Ajax。
使用foreach - http://php.net/manual/en/control-structures.foreach.php
答案 1 :(得分：0)
没关系，我的服务器设置出错了，我已经修好了。但是，你们修复的PHP代码中存在问题。感谢您的帮助。