Skip to content

Commit 1748314

Browse files
michaljazmichaljaz
committed
totalLocal
1 parent 12a2ee2 commit 1748314

File tree

353 files changed

+62612
-90
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

353 files changed

+62612
-90
lines changed

‎README.md‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,22 @@
11
# web-minecraft
22
Render minecrafta w przeglądarce
3-
<br><br>
4-
<img src="screenshotx.png"
5-
alt="Screenshot"
6-
style="float: left; margin-right: 10px;" />
7-
<br><br>
8-
<img src="screenshotxx.png"
9-
alt="Screenshot"
10-
style="float: left; margin-right: 10px;" />
11-
<br><br>
12-
<h1>DEMO</h1>
13-
Zobacz: <a href="https://michaljaz.github.io/web-minecraft/">DEMO</a>
3+
<h1>Instalacja</h1>
4+
5+
```bash
6+
#Instalacja repozytorium
7+
git clone https://github.com/michaljaz/web-minecraft
8+
9+
#Instalacja i uruchomienie serwera node.js
10+
#(Proces 1)
11+
npm install -g http-server
12+
http-server web-minecraft/
13+
14+
#Uruchomienie serwera gry socket.io
15+
#(Proces 2, ten proces musisz wywołać w osobnej zakładce: np. klikając Ctrl+Shift+T)
16+
node web-minecraft/server/server.js
17+
18+
```
19+
20+
<h1>Jak uruchomić grę?</h1>
21+
Aby włączyć grę wystarczy, że wejdziesz w link: <a href="http://localhost:8080/">http://localhost:8080/</a>.<br>
22+
<i>(Najpierw oczywiście musisz wykonać kroki podane powyżej)</i>

‎assets/images/dirt.jpg‎

7.54 KB
Loading

‎assets/images/loadingx.gif‎

10.7 KB
Loading

‎css/main.css‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,28 @@ canvas {
2525
width:800px;
2626
height:400px;
2727
background:#303030;
28-
z-index:99999;
28+
z-index:10;
2929
color:white;
30+
}
31+
.initLoading{
32+
z-index:11;
33+
position:fixed;
34+
top:0px;
35+
left:0px;
36+
width:100%;
37+
height:100%;
38+
background-size: 100px;
39+
background-repeat: repeat;
40+
background-image:
41+
url(../assets/images/dirt.jpg);
42+
box-shadow: inset 0px 0px 400px 110px rgba(0, 0, 0, .7);
43+
}
44+
45+
.loadingBar{
46+
margin: 0;
47+
position: absolute;
48+
top: 50%;
49+
left: 50%;
50+
-ms-transform: translate(-50%, -50%);
51+
transform: translate(-50%, -50%);
3052
}

‎index.html‎

Lines changed: 75 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
1212
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
1313
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.0/css/mdb.min.css">
14-
<link rel="stylesheet" href="css/main.css">
14+
<link rel="stylesheet" href="css/main.css?11">
1515
</div>
1616

1717
<div js>
@@ -25,6 +25,9 @@
2525
</head>
2626
<body>
2727
<canvas id="c"></canvas>
28+
<div class="initLoading">
29+
<img src="assets/images/loadingx.gif" class="loadingBar">
30+
</div>
2831
<div class="gui">
2932
<div class="inventoryBar"></div>
3033
<div class="gameMenu">
@@ -75,17 +78,20 @@ <h3>Gra zatrzymana</h3>
7578
</svg>
7679
</div>
7780
</div>
81+
7882
<script type="module">
7983

8084
import * as THREE from './module/build/three.module.js';
8185
import {BufferGeometryUtils} from './module/jsm/utils/BufferGeometryUtils.js';
8286
import {SkeletonUtils} from './module/jsm/utils/SkeletonUtils.js';
8387
import {FBXLoader} from './module/jsm/loaders/FBXLoader.js';
8488
import Stats from './module/jsm/libs/stats.module.js';
89+
import {Tools} from './module/tools.js';
8590

8691

8792
var canvas,renderer,scene,camera,stats,raycaster,
88-
gameState="menu",world,cube,FPC,socket,playerObject,textureAtlasMapping,materials,parameters;
93+
gameState="menu",world,cube,FPC,socket,
94+
playerObject,textureAtlasMapping,materials,parameters;
8995

9096

9197
class Terrain {
@@ -434,6 +440,7 @@ <h3>Gra zatrzymana</h3>
434440
// console.log(id)
435441
if(voxels[id]!=world.getVoxel(...id.split(":"))){
436442
world.setVoxel(...id.split(":"),voxels[id]);
443+
437444
}
438445
})
439446
}
@@ -692,8 +699,6 @@ <h3>Gra zatrzymana</h3>
692699
});
693700
scene = new THREE.Scene();
694701
scene.background = new THREE.Color("lightblue");
695-
const density = 0.01;
696-
// scene.fog = new THREE.FogExp2(new THREE.Color(0xb0b0b0), density);
697702
camera = new THREE.PerspectiveCamera(75, 2, 0.1, 1000);
698703
camera.rotation.order = "YXZ"
699704
camera.position.set(26, 26, 26)
@@ -708,7 +713,7 @@ <h3>Gra zatrzymana</h3>
708713
scene.add(directionalLight);
709714
raycaster = new THREE.Raycaster();
710715

711-
var loader = new FBXLoader();
716+
712717
var textureLoader = new THREE.TextureLoader();
713718
}
714719

@@ -758,14 +763,32 @@ <h3>Gra zatrzymana</h3>
758763

759764
//Load models
760765
{
761-
loader.load( 'assets/models/clouds/clouds.fbx', function ( object ) {
766+
var manager = new THREE.LoadingManager();
767+
// manager.onStart = function ( url, itemsLoaded, itemsTotal ) {
768+
// console.log( 'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
769+
// };
770+
771+
manager.onLoad = function ( ) {
772+
console.log( 'Loading complete!');
773+
};
774+
// manager.onProgress = function ( url, itemsLoaded, itemsTotal ) {
775+
// console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
776+
// };
777+
778+
// manager.onError = function ( url ) {
779+
// console.log( 'There was an error loading ' + url );
780+
// };
781+
782+
783+
var fbxl = new FBXLoader(manager);
784+
fbxl.load( 'assets/models/clouds/clouds.fbx', function ( object ) {
762785
object.scale.x=0.1
763786
object.scale.y=0.1
764787
object.scale.z=0.1
765788
object.position.y=100
766789
scene.add( object );
767790
} );
768-
loader.load( 'assets/models/ghast/ghast.fbx', function ( object ) {
791+
fbxl.load( 'assets/models/ghast/ghast.fbx', function ( object ) {
769792
var texturex = new THREE.TextureLoader().load('assets/textures/ghast.png');
770793
texturex.magFilter = THREE.NearestFilter;
771794
object.children[0].children[0].scale.set(0.01,0.01,0.01)
@@ -779,7 +802,7 @@ <h3>Gra zatrzymana</h3>
779802
scene.add(ghast2)
780803
ghast2.position.set(3,0,0)
781804
});
782-
loader.load( 'assets/models/player/player.fbx', function ( object ) {
805+
fbxl.load( 'assets/models/player/player.fbx', function ( object ) {
783806
var texturex = new THREE.TextureLoader().load('assets/textures/steve.png');
784807
// console.log("Creating new player:"+p)
785808
texturex.magFilter = THREE.NearestFilter;
@@ -798,7 +821,7 @@ <h3>Gra zatrzymana</h3>
798821
$.get("assets/textureMapping.json",function (textureMapping){
799822
textureAtlasMapping=textureMapping
800823
})
801-
var texture = new THREE.TextureLoader().load('assets/textures/textureAtlas.png');
824+
var texture = new THREE.TextureLoader(manager).load('assets/textures/textureAtlas.png');
802825
texture.magFilter = THREE.NearestFilter;
803826

804827
var worldMaterial=new THREE.MeshLambertMaterial({
@@ -812,9 +835,44 @@ <h3>Gra zatrzymana</h3>
812835
textureCols: 27,
813836
cellSize: 16,
814837
})
815-
$.get(`assets/blocks.json?${uuidv4()}`,function (blocks){
838+
$.get(`assets/blocks.json?${Tools.uuidv4()}`,function (blocks){
816839
world.blocks=blocks
817-
loadBlocksModels()
840+
var modelsNumber=0;
841+
var modelsLoaded=0;
842+
var modelsToLoad=[];
843+
var blocks=world.blocks
844+
Object.keys(blocks).forEach(function (p){
845+
if(!blocks[p].isBlock && p!=0){
846+
var modelPath=`assets/models/${blocks[p].model}`;
847+
modelsNumber++;
848+
modelsToLoad.push(blocks[p])
849+
}
850+
})
851+
// console.table(modelsToLoad)
852+
for(var i=0;i<modelsToLoad.length;i++){
853+
(function () {
854+
var block=modelsToLoad[i];
855+
fbxl.load( `assets/models/${block.model}`, function ( object ) {
856+
var geometry=object.children[0].geometry;
857+
if(block.name=="anvil"){
858+
geometry.rotateX(-Math.PI/2)
859+
geometry.translate(0,0.17,0)
860+
geometry.translate(0,-0.25,0)
861+
}
862+
if(block.name=="fire"){
863+
geometry.rotateX(-Math.PI/2)
864+
geometry.scale(0.5,0.5,0.5)
865+
// geometry.translate(0,0.25,0)
866+
// geometry.translate(0,-0.25,0)
867+
}
868+
world.saveModel(geometry,block.name)
869+
modelsLoaded++;
870+
if(modelsLoaded==modelsNumber){
871+
console.log("DONE! Models loaded!")
872+
}
873+
});
874+
})();
875+
}
818876
})
819877
}
820878

@@ -830,9 +888,9 @@ <h3>Gra zatrzymana</h3>
830888
textureMapping:textureMappingX
831889
})
832890
var savedTextures=[]
833-
for(var i=0;i<500;i++){
891+
for(var i=0;i<10;i++){
834892
var t=atlasCreator.gen(i).toDataURL();
835-
var tekstura=new THREE.TextureLoader().load(t,function (textu){
893+
var tekstura=new THREE.TextureLoader(manager).load(t,function (textu){
836894

837895

838896
// worldMaterial.map=tekstura
@@ -849,22 +907,11 @@ <h3>Gra zatrzymana</h3>
849907
try{
850908
q.remove()
851909
}catch(e){}
852-
// q=atlasCreator.gen(tickq)
853910
tickq++;
854-
var tekst=savedTextures[tickq%500];
911+
var tekst=savedTextures[tickq%9];
855912
worldMaterial.map=tekst
856913

857914
worldMaterial.map.needsUpdate=true;
858-
// var tekstura=new THREE.TextureLoader().load(q.toDataURL(),function (text){
859-
// // tekstura.magFilter = THREE.NearestFilter;
860-
// // worldMaterial.map=tekstura
861-
862-
// // worldMaterial.map.needsUpdate=true;
863-
// });
864-
865-
// world.textureAtlas=new THREE.TextureLoader().load(q.toDataURL());
866-
// world.textureAtlas.magFilter = THREE.NearestFilter;
867-
// $("body").append(q)
868915
},100)
869916

870917
})
@@ -875,11 +922,9 @@ <h3>Gra zatrzymana</h3>
875922

876923
//Socket io
877924
{
878-
socket=io.connect("https://d93db05c1da1.ngrok.io/");
925+
socket=io.connect("http://localhost:35565");
879926
socket.on("connect",()=>{
880927
console.log("Połączono z serverem!")
881-
socket.emit("siemka","siemka")
882-
883928
})
884929
socket.on("blockUpdate",function (block){
885930
world.setVoxel(...block)
@@ -908,9 +953,9 @@ <h3>Gra zatrzymana</h3>
908953
})
909954
socket.on("firstLoad",function (v){
910955
console.log("Otrzymano pakiet świata!")
911-
956+
// console.log(v)
912957
world.replaceWorld(v)
913-
958+
$(".initLoading").css("display","none")
914959
})
915960
}
916961

@@ -1024,56 +1069,8 @@ <h3>Gra zatrzymana</h3>
10241069
}
10251070

10261071

1027-
function loadBlocksModels(f){
1028-
var modelsNumber=0;
1029-
var modelsLoaded=0;
1030-
var modelsToLoad=[];
1031-
var loader = new FBXLoader();
1032-
var blocks=world.blocks
1033-
Object.keys(blocks).forEach(function (p){
1034-
if(!blocks[p].isBlock && p!=0){
1035-
var modelPath=`assets/models/${blocks[p].model}`;
1036-
modelsNumber++;
1037-
modelsToLoad.push(blocks[p])
1038-
}
1039-
})
1040-
// console.table(modelsToLoad)
1041-
for(var i=0;i<modelsToLoad.length;i++){
1042-
(function () {
1043-
var block=modelsToLoad[i];
1044-
loader.load( `assets/models/${block.model}`, function ( object ) {
1045-
var geometry=object.children[0].geometry;
1046-
if(block.name=="anvil"){
1047-
geometry.rotateX(-Math.PI/2)
1048-
geometry.translate(0,0.17,0)
1049-
geometry.translate(0,-0.25,0)
1050-
}
1051-
if(block.name=="fire"){
1052-
geometry.rotateX(-Math.PI/2)
1053-
geometry.scale(0.5,0.5,0.5)
1054-
// geometry.translate(0,0.25,0)
1055-
// geometry.translate(0,-0.25,0)
1056-
}
1057-
world.saveModel(geometry,block.name)
1058-
modelsLoaded++;
1059-
if(modelsLoaded==modelsNumber){
1060-
// console.log("DONE! Models loaded!")
1061-
if(f!=null){
1062-
f();
1063-
}
1064-
}
1065-
});
1066-
})();
1067-
}
1068-
}
10691072

10701073

1071-
function uuidv4() {
1072-
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
1073-
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
1074-
return v.toString(16);
1075-
});
1076-
}
10771074

10781075

10791076
function animate() {

‎module/tools.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
var Tools={
2+
uuidv4:function (){
3+
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
4+
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
5+
return v.toString(16);
6+
});
7+
}
8+
}
9+
10+
export {Tools}

‎screenshotx.png‎

-1.24 MB
Binary file not shown.

‎screenshotxx.png‎

-802 KB
Binary file not shown.

0 commit comments

Comments
 (0)