THIS VERSION TAKES PUTS DATA IN MYSQL database, if You really want to use it without database, You probably can.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>3D ONLINE GAME 2</title>
<link rel="stylesheet" href="/css/examples.css?ver=1.0.0" />
<script src="/js/examples.js?ver=1.1.1"></script>
<script src="/lib/phaser.min.js?ver=3.52.0"></script>
<script src="/lib/enable3d/enable3d.phaserExtension.0.25.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="info-text">Use WASD, SPACE and your Mouse.<br />Works on mobile and desktop.</div>
<script>
const {
enable3d,
Scene3D,
Canvas,
ThirdDimension,
THREE,
JoyStick,
PointerLock,
PointerDrag,
ExtendedObject3D,
ThirdPersonControls
} = ENABLE3D
/**
* Is touch device?
*/
const isTouchDevice = 'ontouchstart' in window
/**
* MainScene
*/
class MainScene extends Scene3D {
constructor() {
super({ key: 'MainScene' })
}
preload() {
//this.load.html('bridge', '/assets/svg/bridge.svg')
}
init() {
this.accessThirdDimension()
this.canJump = true
this.isJumping = false
this.move = false
this.moveTop = 0
this.moveRight = 0
}
create() {
this.third.warpSpeed('camera', 'sky', 'grid', 'ground', 'light')
// this.third.ground.body.setFriction(1)
// this.third.physics.debug.enable()
/**
* Create bridge
*/
//const svg = this.cache.html.get('bridge')
//const bridgeShape = this.third.transform.fromSVGtoShape(svg)
//const scale = 35
//const bridge = this.third.add.extrude({
//shape: bridgeShape[0],
//depth: 120
//})
//bridge.scale.set(1 / scale, 1 / -scale, 1 / scale)
//bridge.shape = 'concave'
//bridge.position.setY(bridge.geometry.boundingBox.max.y / scale)
//this.third.physics.add.existing(bridge)
//bridge.body.setAngularFactor(0, 0, 0)
//bridge.body.setLinearFactor(0, 0, 0)
//bridge.body.setFriction(0.8)
/**
* Create Player
*/
/**
* box_man.glb by Jan Bláha
* https://github.com/swift502/Sketchbook
* CC-0 license 2018
*/
//gets an array from files in folder
var files = <?php $out = array();
foreach (glob('/var/www/www/assets/cardoors/*.glb') as $filename) {
$p = pathinfo($filename);
$out[] = $p['filename'];
}
$DAMN = json_encode($out);
ECHO $DAMN;
?>;
//gets lenght of file array
var mashinasdetaljuskaits = files.length;
//gets filenames
var detalas = files;
// console.log("det", detalas);
console.log("iekshas", mashinasdetaljuskaits);
//array we will store values for sorting
const arejaismasivs = [];
var ciparumasivs = [];
var titlemasivs = [];
var sakartotaismasivs = [];
console.log("sakartotaismasivs",sakartotaismasivs);
//loop that will get count of faces based on object
for(let i = 0; i < mashinasdetaljuskaits; i++){
let detalja = detalas[i];
var stringi = "/assets/cardoors/" + detalja + ".glb";
//loads every car detail from folder to make an array with number attached
this.third.load.gltf(stringi).then(object => {
const tbolt = object.scene.children[0]
this.tbolt = new ExtendedObject3D()
this.tbolt.name = 'bolt'
this.tbolt.add(tbolt)
this.tbolt.traverse(child => {
if (child.isMesh) {
const faceCount = child.geometry.attributes.position.count / 3;
//console.log("wtf");
//console.log("facecount push", faceCount, i);
console.log("dert", detalja);
//arejaismasivs.push(detalja);
let kopair = detalja + " *" + faceCount;
console.log("kopair", kopair);
/// pushes object name and face count to array outside
arejaismasivs.push(kopair);
//vajag sarindot
child.shape = 'convex'
child.castShadow = child.receiveShadow = true
// https://discourse.threejs.org/t/cant-export-material-from-blender-gltf/12258
child.material.roughness = 1
child.material.metalness = 0
}
})
})
}
//lenght of array outside
var mashinasdetaljuskaits2 = arejaismasivs.length;
// program to check if an object is an array
function checkObject(arr) {
// check if arr is array
const result = Array.isArray(arr);
if(result) {
console.log(`detalu masivs [${arr}] is an array.`);
}
else {
console.log(`detalu masivs ${arr} is not an array.`);
}
}
//SORTING INTERVAL
setInterval(function(){
//console.log("awawmasivatips",typeof(arejaismasivs));
//console.log("awawgarums",arejaismasivs.length);
//console.log("awawkey",arejaismasivs[0]);
//console.log("awawmasivs",arejaismasivs);
//checkObject(arejaismasivs);
//console.log("9999y");
//for each element sort based on face count
for(let i = 0; i < arejaismasivs.length; i++){
//console.log("sk", arejaismasivs[i].substring(arejaismasivs[i].indexOf("*") + 1));
var skaitlis = arejaismasivs[i].substring(arejaismasivs[i].indexOf("*") + 1) // skaitlis
var title = arejaismasivs[i].substring(0, arejaismasivs[i].indexOf("*"));
//console.log("title", title);
//pushes only numbers to ciparumasivs
ciparumasivs.push(arejaismasivs[i].substring(arejaismasivs[i].indexOf("*") + 1));
titlemasivs.push(arejaismasivs[i].substring(0, arejaismasivs[i].indexOf("*")));
//if(arejaismasivs[i].includes(arejaismasivs[i].substring(arejaismasivs[i].indexOf("*") + 1)){
//}
//console.log(ciparumasivs);
}
//sorts number array
ciparumasivs.sort(); // it could be sorted with titles?
var ALEN = arejaismasivs.length; //PIEŅEMSIM 53
var SLEN = sakartotaismasivs.length; // PIESKAITA PA VIENAM 53+PIEVIENOTAIS 1 IEKŠ FOR CIKLA LAI NEAPSTĀTOS
var skaititajs = 0;
///for arejaismasivs if it contains number from ciparu masivs and sakartotais masivs does not have this number contained
// if it does not, pushes title of the detail to arranged array....
for(let i = 0; i < mashinasdetaljuskaits + skaititajs; i++){
///it is not doing all elements due fact loop goes trought and some elements don't match if
// so for cycle should work first till arejais masivs length and
/// then look till sakartotais masivs length matches arejais masivs length
//arejaismasivs[i].includes(ciparumasivs[i]) means that it looks if number matches sorted ciparumasivs in iteration
//!sakartotaismasivs.includes(ciparumasivs[i]) means that it looks if number does not already match some number in sorted array (sakartotaismasivs)
//!sakartotaismasivs.includes(arejaismasivs[i]) means that it looks if entry in sorted array does not match array outside
var kopa = titlemasivs[i] + "*" + ciparumasivs[i];
//console.log("kopa", kopa);
//console.log("kopaA", arejaismasivs);
//console.log("kopaA2", arejaismasivs[i].split('*')[0]);
if(SLEN <= mashinasdetaljuskaits){
if(!arejaismasivs[i].includes(kopa) && !sakartotaismasivs.includes(arejaismasivs[i].split('*')[0])){
console.log("pushes everything", ciparumasivs[i]);
console.log("pushes everything2", arejaismasivs[i]);
sakartotaismasivs.push(arejaismasivs[i].split('*')[0]);
var data = arejaismasivs[i].split('*')[0]
console.log("sutamie dati", data);
if(data){
$.ajax({
type: "post",
url: "objdata.php",
data: {
data: data
},
cache: false,
success: function(html) {
console.log("aizsutija");
}
});
}
//console.log("SAKARTOTAIS MASIVS", sakartotaismasivs);
} else {
skaititajs+1;
}
}
}
}, 1000);
var sakartotaismasivs2 = [];
$.ajax({
type: "GET",
async: false,
url: 'loaddata.php',
data: {},
success: function (data) {
sakartotaismasivs2 = data.split(",").map(String);
}
});
var garums = sakartotaismasivs2.length;
console.log("sakartotaismasivs2", garums);
console.log("sakartotaismasivs2 NO DB", sakartotaismasivs2);
// let detaljaS = sakartotaismasivs2[i];
//console.log("arejais", sakartotaismasivs2);
//console.log("detaljaS", detaljaS);
for(let i = 0; i < garums; i++){
console.log("notiek");
let detalja2 = sakartotaismasivs2[i];
let detalja = detalja2.trim();
const pos = { x: 520, y: 920, z: 40 }
var stringi = "/assets/cardoors/" + detalja + ".glb";
this.third.load.gltf(stringi).then(object => {
const bolt = object.scene.children[0]
this.bolt = new ExtendedObject3D()
this.bolt.name = 'bolt'
this.bolt.rotateY(Math.PI + 0.1) // a hack
this.bolt.add(bolt)
// add shadow
this.bolt.traverse(child => {
if (child.isMesh) {
child.shape = 'convex'
child.castShadow = child.receiveShadow = true
// https://discourse.threejs.org/t/cant-export-material-from-blender-gltf/12258
child.material.roughness = 1
child.material.metalness = 0
}
})
/**
* Animations
*/
this.third.animationMixers.add(this.bolt.anims.mixer)
object.animations.forEach(animation => {
if (animation.name) {
/**
* This is a hack, because I could not adjust the scale with this.bolt.scale.set()
* This is not a bug from enable3d, this is how the assets a made :/
*/
animation.tracks.forEach(track => {
if (/(scale|position)/.test(track.name)) {
const newValues = track.values.map(v => v * 1)
track.values = newValues
}
})
this.bolt.anims.add(animation.name, animation)
}
})
this.bolt.anims.play('idle')
this.bolt.position.set(0, 2, 8)
/**
* Add the player to the scene with a body
*/
this.third.add.existing(this.bolt)
this.third.physics.add.existing(this.bolt, {
shape: 'capsule',
radius: 0.2,
height: 0.6,
offset: { y: -0.55 }
})
this.bolt.body.setFriction(0.8)
this.bolt.body.setAngularFactor(0, 0, 0)
///**
//* Add 3rd Person Controls
//*/
//this.controls = new ThirdPersonControls(this.third.camera, this.bolt, {
//offset: new THREE.Vector3(0, 1, 0),
//targetRadius: 3
//})
})
}
this.third.load.gltf('/assets/glb/box_man.glb').then(object2 => {
const man = object2.scene.children[0]
this.man = new ExtendedObject3D()
this.man.name = 'man'
this.man.rotateY(Math.PI + 0.1) // a hack
this.man.add(man)
// add shadow
this.man.traverse(child => {
if (child.isMesh) {
child.shape = 'convex'
child.castShadow = child.receiveShadow = true
// https://discourse.threejs.org/t/cant-export-material-from-blender-gltf/12258
child.material.roughness = 1
child.material.metalness = 0
}
})
/**
* Animations
*/
this.third.animationMixers.add(this.man.anims.mixer)
object2.animations.forEach(animation => {
if (animation.name) {
/**
* This is a hack, because I could not adjust the scale with this.man.scale.set()
* This is not a bug from enable3d, this is how the assets a made :/
*/
animation.tracks.forEach(track => {
if (/(scale|position)/.test(track.name)) {
const newValues = track.values.map(v => v * 1)
track.values = newValues
}
})
this.man.anims.add(animation.name, animation)
}
})
this.man.anims.play('idle')
this.man.position.set(0, 2, 8)
/**
* Add the player to the scene with a body
*/
this.third.add.existing(this.man)
this.third.physics.add.existing(this.man, {
shape: 'capsule',
radius: 0.2,
height: 0.6,
offset: { y: -0.55 }
})
this.man.body.setFriction(0.8)
this.man.body.setAngularFactor(0, 0, 0)
/**
* Add 3rd Person Controls
*/
this.controls = new ThirdPersonControls(this.third.camera, this.man, {
offset: new THREE.Vector3(0, 1, 0),
targetRadius: 3
})
});
/**
* Add Keys
*/
this.keys = {
a: this.input.keyboard.addKey('a'),
w: this.input.keyboard.addKey('w'),
d: this.input.keyboard.addKey('d'),
s: this.input.keyboard.addKey('s'),
space: this.input.keyboard.addKey(32)
}
/**
* PointerLock and PointerDrag
*/
if (!isTouchDevice) {
const pointerLock = new PointerLock(this.game.canvas)
const pointerDrag = new PointerDrag(this.game.canvas)
pointerDrag.onMove(delta => {
if (!pointerLock.isLocked()) return
const { x, y } = delta
this.moveTop = -y
this.moveRight = x
})
}
/**
* Add joystick
*/
if (isTouchDevice) {
const joystick = new JoyStick()
const axis = joystick.add.axis({
styles: { left: 35, bottom: 35, size: 100 }
})
axis.onMove(event => {
/**
* Update Camera
*/
const { top, right } = event
this.moveTop = top * 3
this.moveRight = right * 3
})
const buttonA = joystick.add.button({
letter: 'A',
styles: { right: 35, bottom: 110, size: 80 }
})
buttonA.onClick(() => this.jump())
const buttonB = joystick.add.button({
letter: 'B',
styles: { right: 110, bottom: 35, size: 80 }
})
buttonB.onClick(() => (this.move = true))
buttonB.onRelease(() => (this.move = false))
}
}
jump() {
if (!this.man) return
this.canJump = false
this.isJumping = true
this.man.anims.play('jump_running')
this.time.addEvent({
delay: 750,
callback: () => (this.canJump = true)
})
this.time.addEvent({
delay: 750,
callback: () => {
this.man.anims.play('idle')
this.isJumping = false
}
})
this.man.body.applyForceY(4)
}
update(time, delta) {
if (this.man && this.man.body && this.controls && this.controls.update) {
/**
* Update Controls
*/
this.controls.update(this.moveRight * 3, -this.moveTop * 3)
if (!isTouchDevice) this.moveRight = this.moveTop = 0
/**
* Player Turn
*/
const speed = 4
const v3 = new THREE.Vector3()
const rotation = this.third.camera.getWorldDirection(v3)
const theta = Math.atan2(rotation.x, rotation.z)
const rotationMan = this.man.getWorldDirection(v3)
const thetaMan = Math.atan2(rotationMan.x, rotationMan.z)
this.man.body.setAngularVelocityY(0)
const l = Math.abs(theta - thetaMan)
let rotationSpeed = isTouchDevice ? 2 : 4
let d = Math.PI / 24
if (l > d) {
if (l > Math.PI - d) rotationSpeed *= -1
if (theta < thetaMan) rotationSpeed *= -1
this.man.body.setAngularVelocityY(rotationSpeed)
}
/**
* Player Move
*/
if (this.keys.w.isDown || this.move) {
if (this.man.anims.current === 'idle' && !this.isJumping) this.man.anims.play('run')
const x = Math.sin(theta) * speed,
y = this.man.body.velocity.y,
z = Math.cos(theta) * speed
this.man.body.setVelocity(x, y, z)
} else {
if (this.man.anims.current === 'run' && !this.isJumping) this.man.anims.play('idle')
}
/**
* Player Jump
*/
if (this.keys.space.isDown && this.canJump) {
this.jump()
}
}
}
}
const config = {
type: Phaser.WEBGL,
transparent: true,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
width: window.innerWidth, // * Math.max(1, window.devicePixelRatio / 2),
height: window.innerHeight // * Math.max(1, window.devicePixelRatio / 2)
},
scene: [MainScene],
...Canvas({ antialias: true })
}
window.addEventListener('load', () => {
enable3d(() => new Phaser.Game(config)).withPhysics('/lib/ammo/kripken')
})
</script>
</body>
</html>
