Javascript 每个客户端的Meteor synchronus内容
我正在尝试用meteor在three.js中制作一条多人蛇，一个玩家只控制一条蛇效果很好，尽管目前我们只有3个指定用户可以控制3条蛇中的一条 现在的问题是，你看不到其他玩家在你的屏幕上移动，他们也看不到你的，就像每个人都有自己的游戏一样 我的HTML如下所示：client.HTMLJavascript 每个客户端的Meteor synchronus内容,javascript,html,meteor,three.js,sync,Javascript,Html,Meteor,Three.js,Sync,我正在尝试用meteor在three.js中制作一条多人蛇，一个玩家只控制一条蛇效果很好，尽管目前我们只有3个指定用户可以控制3条蛇中的一条 现在的问题是，你看不到其他玩家在你的屏幕上移动，他们也看不到你的，就像每个人都有自己的游戏一样 我的HTML如下所示：client.HTML <div> {{> loginButtons align="right"}} {{> spiel}} <div id="msg"> {{> messa
<div>
{{> loginButtons align="right"}}
{{> spiel}}
<div id="msg">
{{> messages}}
</div>
<div id="inp">
{{> input}}
</div>
</div>
var camera, scene, renderer;
init =function (){
//Allgemeines
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0xbbbbbb, 2000, 10000 );
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.y =50;
camera.rotation.x=-1.571;
renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true});
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.setClearColor( scene.fog.color, 1 );
renderer.setSize( window.innerWidth, window.innerHeight );
var container = document.getElementById("container");
container.appendChild( renderer.domElement );
var ggeometry = new THREE.PlaneBufferGeometry( 500, 500 );
var gmaterial = new THREE.MeshPhongMaterial( { emissive: 0xbbbbbb } );
var ground = new THREE.Mesh( ggeometry, gmaterial );
ground.position.set( 0, -250, 0 );
ground.rotation.x = -Math.PI/2;
scene.add( ground );
ground.receiveShadow = true;
// LIGHTS
var ambient = new THREE.AmbientLight( 0x222222 );
scene.add( ambient );
var light = new THREE.DirectionalLight( 0xebf3ff, 1.6 );
light.position.set( 0, 140, 500 ).multiplyScalar( 1.1 );
scene.add( light );
light.castShadow = true;
light.shadowMapWidth = 1024;
light.shadowMapHeight = 2048;
var d = 390;
light.shadowCameraLeft = -d;
light.shadowCameraRight = d;
light.shadowCameraTop = d * 1.5;
light.shadowCameraBottom = -d;
light.shadowCameraFar = 3500;
light.shadowCameraVisible = true;
var light = new THREE.DirectionalLight( 0x497f13, 1 );
light.position.set( 0, -1, 0 );
scene.add( light );
}
addSchlange = function () {
var loader = new THREE.JSONLoader();
var callbackModel = function( geometry, materials ) {
Kopf1 = new THREE.Mesh (geometry, new THREE.MeshFaceMaterial(materials));
Kopf1.scale.set( 1.5,1.5, 1.5 );
Kopf1.position.set(-1.5,0,0);
var xDirection = Kopf1.position.x;
var yDirection = Kopf1.position.y;
pivot1 = new THREE.Object3D();
pivot1.add(Kopf1);
scene.add(pivot1);
};
loader.load( 'SchlangeKOPFnoTEX.js', callbackModel );
Schlange1 = new Array();
}
addSchlange2 = function () {
var loader = new THREE.JSONLoader();
var callbackModel = function( geometry, materials ) {
Kopf2 = new THREE.Mesh (geometry, new THREE.MeshFaceMaterial(materials));
Kopf2.scale.set( 1.5,1.5, 1.5 );
Kopf2.position.set(-3,0,-9.75);
var xDirection = Kopf2.position.x;
var yDirection = Kopf2.position.y;
pivot2 = new THREE.Object3D();
pivot2.add(Kopf2);
scene.add(pivot2);
};
loader.load( 'SchlangeKOPF2.js', callbackModel );
Schlange2 = new Array();
Change2 = new Array();
}
addSchlange3 = function(){
var loader = new THREE.JSONLoader();
var callbackModel = function( geometry, materials ) {
Kopf3 = new THREE.Mesh (geometry, new THREE.MeshFaceMaterial(materials));
Kopf3.scale.set( 1.5,1.5, 1.5 );
Kopf3.position.set(-3.25,0,9.5);
var xDirection = Kopf2.position.x;
var yDirection = Kopf2.position.y;
pivot3 = new THREE.Object3D();
pivot3.add(Kopf3);
scene.add(pivot3);
};
loader.load( 'SchlangeKOPF3.js', callbackModel );
}
var changeDirection = "D";
var lastPOS = "D";
var changeDirection2 = "D";
var lastPOS2 = "D";
var changeDirection3 = "D";
var lastPOS3 = "D";
animate = function(){
renderer.render( scene, camera );
$(window).bind('keyup', function (event) {
var keycode;
keycode = event.keyCode;
// SCHLANGE 1
if(Meteor.user().username == 'Babsi'){
if(keycode == 65){
lastPOS = changeDirection;
if(lastPOS !="D"){
changeDirection = "A";
}
}
if(keycode == 83){
lastPOS = changeDirection;
if(lastPOS != "W"){
changeDirection = "S";
}
}
if(keycode == 68){
lastPOS = changeDirection;
if(lastPOS != "A"){
changeDirection = "D";
}
}
if(keycode == 87){
lastPOS = changeDirection;
if(lastPOS != "S"){
changeDirection = "W";
}
}
}
//SCHLANGE 2
if(Meteor.user().username == 'Jacky'){
if(keycode == 65){
lastPOS2 = changeDirection2;
if(lastPOS2 !="D"){
changeDirection2 = "A";
}
}
if(keycode == 83){
lastPOS2 = changeDirection2;
if(lastPOS2 != "W"){
changeDirection2 = "S";
}
}
if(keycode == 68){
lastPOS2 = changeDirection2;
if(lastPOS2 != "A"){
changeDirection2 = "D";
}
}
if(keycode == 87){
lastPOS2 = changeDirection2;
if(lastPOS2 != "S"){
changeDirection2 = "W";
}
}
}
//SCHLANGE 3
if(Meteor.user().username == 'Manu'){
if(keycode == 65){
lastPOS3 = changeDirection3;
if(lastPOS3 !="D"){
changeDirection3 = "A";
}
}
if(keycode == 83){
lastPOS3 = changeDirection3;
if(lastPOS3 != "W"){
changeDirection3 = "S";
}
}
if(keycode == 68){
lastPOS3 = changeDirection3;
if(lastPOS3 != "A"){
changeDirection3 = "D";
}
}
if(keycode == 87){
lastPOS3 = changeDirection3;
if(lastPOS3 != "S"){
changeDirection3 = "W";
}
}
}
});
if(typeof pivot1 !='undefined') {
if(changeDirection == "A"){
pivot1.position.x -= 0.2;
pivot1.rotation.y = 1.571*2;
if(pivot1.position.x<=-37){
pivot1.position.x=40;
pivot1.position.x -= 0.2;
}
}
if(changeDirection == "D"){
pivot1.position.x += 0.2;
pivot1.rotation.y = 0;
if(pivot1.position.x>=37){
pivot1.position.x=-40;
pivot1.position.x -= 0.2;
}
}
if(changeDirection == "S"){
pivot1.position.z += 0.2;
pivot1.rotation.y = -1.571;
if(pivot1.position.z>=38){
pivot1.position.z=-38;
pivot1.position.z -= 0.2;
}
}
if(changeDirection == "W"){
pivot1.position.z -= 0.2;
pivot1.rotation.y = 1.571;
if(pivot1.position.z<=-38){
pivot1.position.z=38;
pivot1.position.z -= 0.2;
}
}
}
if(typeof pivot2 !='undefined') {
if(changeDirection2 == "W"){
pivot2.position.z -= 0.2;
pivot2.rotation.y = 1.571;
if(pivot2.position.z<=-38){
pivot2.position.z=38;
pivot2.position.z -= 0.2;
}
}
if(changeDirection2 == "S"){
pivot2.position.z += 0.2;
pivot2.rotation.y = -1.571;
if(pivot2.position.z>=38){
pivot2.position.z=-38;
pivot2.position.z -= 0.2;
}
}
if(changeDirection2 == "D"){
pivot2.position.x += 0.2;
pivot2.rotation.y = 0;
if(pivot2.position.x>=37){
pivot2.position.x=-40;
pivot2.position.x -= 0.2;
}
}
if(changeDirection2 == "A"){
pivot2.position.x -= 0.2;
pivot2.rotation.y = 1.571*2;
if(pivot2.position.x<=-37){
pivot2.position.x=40;
pivot2.position.x -= 0.2;
}
}
}
if(typeof pivot3 !='undefined') {
if(changeDirection3 == "W"){
pivot3.position.z -= 0.2;
pivot3.rotation.y = 1.571;
if(pivot3.position.z<=-38){
pivot3.position.z=38;
pivot3.position.z -= 0.2;
}
}
if(changeDirection3 == "S"){
pivot3.position.z += 0.2;
pivot3.rotation.y = -1.571;
if(pivot3.position.z>=38){
pivot3.position.z=-38;
pivot3.position.z -= 0.2;
}
}
if(changeDirection3 == "D"){
pivot3.position.x += 0.2;
pivot3.rotation.y = 0;
if(pivot3.position.x>=37){
pivot3.position.x=-40;
pivot3.position.x -= 0.2;
}
}
if(changeDirection3 == "A"){
pivot3.position.x -= 0.2;
pivot3.rotation.y = 1.571*2;
if(pivot3.position.x<=-37){
pivot3.position.x=40;
pivot3.position.x -= 0.2;
}
}
}
requestAnimationFrame( animate );
}
Snakes = new Meteor.Collection('snakes');
另见包装。它允许你做基本相同的事情，但不需要写入数据库；“更新”实际上只是在所有连接的客户端上触发的事件。因此，对于您的用例来说，它的性能可能要高得多，我认为这将是一个首要考虑因素。尽管网站上说该项目已被放弃，但我在当前的Meteor 1.0.3.2项目中使用了Meteor Streams，效果很好。尝试将所有函数包装在Tracker.autorun中，使其看起来像这个Template.spiel.rendered=function{Tracker.autorun function{init；addSchalange；}。当我将d3.js与meteor一起使用时，我会使用此选项。此选项没有任何变化：/这是meteor问题还是three.js问题？我没有看到任何同步数据的代码，可能是蛇在客户端的位置。可能是流星问题，我们刚刚了解到。我不知道我必须添加一些东西来同步它，我在谷歌上搜索了很多，但什么也找不到。。
var camera, scene, renderer;
init =function (){
//Allgemeines
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0xbbbbbb, 2000, 10000 );
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.y =50;
camera.rotation.x=-1.571;
renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true});
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.setClearColor( scene.fog.color, 1 );
renderer.setSize( window.innerWidth, window.innerHeight );
var container = document.getElementById("container");
container.appendChild( renderer.domElement );
var ggeometry = new THREE.PlaneBufferGeometry( 500, 500 );
var gmaterial = new THREE.MeshPhongMaterial( { emissive: 0xbbbbbb } );
var ground = new THREE.Mesh( ggeometry, gmaterial );
ground.position.set( 0, -250, 0 );
ground.rotation.x = -Math.PI/2;
scene.add( ground );
ground.receiveShadow = true;
// LIGHTS
var ambient = new THREE.AmbientLight( 0x222222 );
scene.add( ambient );
var light = new THREE.DirectionalLight( 0xebf3ff, 1.6 );
light.position.set( 0, 140, 500 ).multiplyScalar( 1.1 );
scene.add( light );
light.castShadow = true;
light.shadowMapWidth = 1024;
light.shadowMapHeight = 2048;
var d = 390;
light.shadowCameraLeft = -d;
light.shadowCameraRight = d;
light.shadowCameraTop = d * 1.5;
light.shadowCameraBottom = -d;
light.shadowCameraFar = 3500;
light.shadowCameraVisible = true;
var light = new THREE.DirectionalLight( 0x497f13, 1 );
light.position.set( 0, -1, 0 );
scene.add( light );
}
addSchlange = function () {
var loader = new THREE.JSONLoader();
var callbackModel = function( geometry, materials ) {
Kopf1 = new THREE.Mesh (geometry, new THREE.MeshFaceMaterial(materials));
Kopf1.scale.set( 1.5,1.5, 1.5 );
Kopf1.position.set(-1.5,0,0);
var xDirection = Kopf1.position.x;
var yDirection = Kopf1.position.y;
pivot1 = new THREE.Object3D();
pivot1.add(Kopf1);
scene.add(pivot1);
};
loader.load( 'SchlangeKOPFnoTEX.js', callbackModel );
Schlange1 = new Array();
}
addSchlange2 = function () {
var loader = new THREE.JSONLoader();
var callbackModel = function( geometry, materials ) {
Kopf2 = new THREE.Mesh (geometry, new THREE.MeshFaceMaterial(materials));
Kopf2.scale.set( 1.5,1.5, 1.5 );
Kopf2.position.set(-3,0,-9.75);
var xDirection = Kopf2.position.x;
var yDirection = Kopf2.position.y;
pivot2 = new THREE.Object3D();
pivot2.add(Kopf2);
scene.add(pivot2);
};
loader.load( 'SchlangeKOPF2.js', callbackModel );
Schlange2 = new Array();
Change2 = new Array();
}
addSchlange3 = function(){
var loader = new THREE.JSONLoader();
var callbackModel = function( geometry, materials ) {
Kopf3 = new THREE.Mesh (geometry, new THREE.MeshFaceMaterial(materials));
Kopf3.scale.set( 1.5,1.5, 1.5 );
Kopf3.position.set(-3.25,0,9.5);
var xDirection = Kopf2.position.x;
var yDirection = Kopf2.position.y;
pivot3 = new THREE.Object3D();
pivot3.add(Kopf3);
scene.add(pivot3);
};
loader.load( 'SchlangeKOPF3.js', callbackModel );
}
var changeDirection = "D";
var lastPOS = "D";
var changeDirection2 = "D";
var lastPOS2 = "D";
var changeDirection3 = "D";
var lastPOS3 = "D";
animate = function(){
renderer.render( scene, camera );
$(window).bind('keyup', function (event) {
var keycode;
keycode = event.keyCode;
// SCHLANGE 1
if(Meteor.user().username == 'Babsi'){
if(keycode == 65){
lastPOS = changeDirection;
if(lastPOS !="D"){
changeDirection = "A";
}
}
if(keycode == 83){
lastPOS = changeDirection;
if(lastPOS != "W"){
changeDirection = "S";
}
}
if(keycode == 68){
lastPOS = changeDirection;
if(lastPOS != "A"){
changeDirection = "D";
}
}
if(keycode == 87){
lastPOS = changeDirection;
if(lastPOS != "S"){
changeDirection = "W";
}
}
}
//SCHLANGE 2
if(Meteor.user().username == 'Jacky'){
if(keycode == 65){
lastPOS2 = changeDirection2;
if(lastPOS2 !="D"){
changeDirection2 = "A";
}
}
if(keycode == 83){
lastPOS2 = changeDirection2;
if(lastPOS2 != "W"){
changeDirection2 = "S";
}
}
if(keycode == 68){
lastPOS2 = changeDirection2;
if(lastPOS2 != "A"){
changeDirection2 = "D";
}
}
if(keycode == 87){
lastPOS2 = changeDirection2;
if(lastPOS2 != "S"){
changeDirection2 = "W";
}
}
}
//SCHLANGE 3
if(Meteor.user().username == 'Manu'){
if(keycode == 65){
lastPOS3 = changeDirection3;
if(lastPOS3 !="D"){
changeDirection3 = "A";
}
}
if(keycode == 83){
lastPOS3 = changeDirection3;
if(lastPOS3 != "W"){
changeDirection3 = "S";
}
}
if(keycode == 68){
lastPOS3 = changeDirection3;
if(lastPOS3 != "A"){
changeDirection3 = "D";
}
}
if(keycode == 87){
lastPOS3 = changeDirection3;
if(lastPOS3 != "S"){
changeDirection3 = "W";
}
}
}
});
if(typeof pivot1 !='undefined') {
if(changeDirection == "A"){
pivot1.position.x -= 0.2;
pivot1.rotation.y = 1.571*2;
if(pivot1.position.x<=-37){
pivot1.position.x=40;
pivot1.position.x -= 0.2;
}
}
if(changeDirection == "D"){
pivot1.position.x += 0.2;
pivot1.rotation.y = 0;
if(pivot1.position.x>=37){
pivot1.position.x=-40;
pivot1.position.x -= 0.2;
}
}
if(changeDirection == "S"){
pivot1.position.z += 0.2;
pivot1.rotation.y = -1.571;
if(pivot1.position.z>=38){
pivot1.position.z=-38;
pivot1.position.z -= 0.2;
}
}
if(changeDirection == "W"){
pivot1.position.z -= 0.2;
pivot1.rotation.y = 1.571;
if(pivot1.position.z<=-38){
pivot1.position.z=38;
pivot1.position.z -= 0.2;
}
}
}
if(typeof pivot2 !='undefined') {
if(changeDirection2 == "W"){
pivot2.position.z -= 0.2;
pivot2.rotation.y = 1.571;
if(pivot2.position.z<=-38){
pivot2.position.z=38;
pivot2.position.z -= 0.2;
}
}
if(changeDirection2 == "S"){
pivot2.position.z += 0.2;
pivot2.rotation.y = -1.571;
if(pivot2.position.z>=38){
pivot2.position.z=-38;
pivot2.position.z -= 0.2;
}
}
if(changeDirection2 == "D"){
pivot2.position.x += 0.2;
pivot2.rotation.y = 0;
if(pivot2.position.x>=37){
pivot2.position.x=-40;
pivot2.position.x -= 0.2;
}
}
if(changeDirection2 == "A"){
pivot2.position.x -= 0.2;
pivot2.rotation.y = 1.571*2;
if(pivot2.position.x<=-37){
pivot2.position.x=40;
pivot2.position.x -= 0.2;
}
}
}
if(typeof pivot3 !='undefined') {
if(changeDirection3 == "W"){
pivot3.position.z -= 0.2;
pivot3.rotation.y = 1.571;
if(pivot3.position.z<=-38){
pivot3.position.z=38;
pivot3.position.z -= 0.2;
}
}
if(changeDirection3 == "S"){
pivot3.position.z += 0.2;
pivot3.rotation.y = -1.571;
if(pivot3.position.z>=38){
pivot3.position.z=-38;
pivot3.position.z -= 0.2;
}
}
if(changeDirection3 == "D"){
pivot3.position.x += 0.2;
pivot3.rotation.y = 0;
if(pivot3.position.x>=37){
pivot3.position.x=-40;
pivot3.position.x -= 0.2;
}
}
if(changeDirection3 == "A"){
pivot3.position.x -= 0.2;
pivot3.rotation.y = 1.571*2;
if(pivot3.position.x<=-37){
pivot3.position.x=40;
pivot3.position.x -= 0.2;
}
}
}
requestAnimationFrame( animate );
}
Snakes = new Meteor.Collection('snakes');