├── css3d
├── 1
│ └── index.html
├── 2
│ └── index.html
├── 3
│ └── index.html
├── viewer.css
├── map.js
├── pieces.css
└── viewer.js
├── README.md
└── webgl
├── index.html
├── w.js
├── mario.js
└── mariotexture.js
/css3d/viewer.css:
--------------------------------------------------------------------------------
1 | /* 3D scene */
2 | #viewport{width:700px;height:600px;overflow:hidden;border:1px solid;position:relative;perspective:500px}
3 | #viewport *{transform-style:preserve-3d;box-sizing:border-box}
4 | #camera{width:0;height:0;position:absolute;top:50%;left:50%}
5 | #scene{position:fixed;transform:translate3D(-50%,-50%,-2000px)rotateX(65deg)rotateZ(-35deg)}
6 | #floor{position:fixed;background:#4B4}
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Mini 3D Platformer bootstrap/demo
2 | ===
3 |
4 | CSS3D:
5 |
6 | Demo 1: https://xem.github.io/mini3DPlatformer/css3d/1 (hero moves north / east / south / west only)
7 |
8 | Demo 2: https://xem.github.io/mini3DPlatformer/css3d/2 (hero rotates on itself and moves forward and backwards)
9 |
10 | Demo 3: https://xem.github.io/mini3DPlatformer/css3d/3 (3rd person camera)
11 |
12 |
13 | WEBGL:
14 |
15 | Demo: https://xem.github.io/mini3DPlatformer/webgl (3rd person camera)
--------------------------------------------------------------------------------
/css3d/map.js:
--------------------------------------------------------------------------------
1 | // Map (made with https://xem.github.io/3Dmapeditor/)
2 | map = {
3 | w: 10,
4 | h: 10,
5 | layers: [
6 |
7 | // Layer 0:
8 | [
9 | '0000000000',
10 | '0000000000',
11 | '0000000000',
12 | '0000100000',
13 | '0000100000',
14 | '0011111000',
15 | '0000100000',
16 | '0000100000',
17 | '0000000000',
18 | '0000000000',
19 | ],
20 |
21 | // Layer 1:
22 | [
23 | '0000000000',
24 | '0000000000',
25 | '0000000000',
26 | '0000000000',
27 | '0000000000',
28 | '0000100000',
29 | '0000000000',
30 | '0000000000',
31 | '0000000000',
32 | '0000000000',
33 | ],
34 | ]
35 | };
--------------------------------------------------------------------------------
/css3d/pieces.css:
--------------------------------------------------------------------------------
1 | /* Global */
2 | .piece{pointer-events:none;position:absolute;width:200px;height:200px}
3 | .face{width:200px;height:200px;position:fixed;font-size:100px;transform-origin:50% 100%;backface-visibility:hidden}
4 |
5 | /* piece rotation */
6 | .r1{transform:rotateZ(90deg)}
7 | .r2{transform:rotateZ(180deg)}
8 | .r3{transform:rotateZ(-90deg)}
9 |
10 | /* Cube */
11 | .up{transform:translateZ(200px)}
12 | .left{transform:translate3D(-100px,-100px,0)rotateZ(90deg)rotateX(-90deg)}
13 | .right{transform:translate3D(100px,-100px,0)rotateZ(-90deg)rotateX(-90deg)}
14 | .front{transform:rotateX(-90deg)}
15 | .back{transform:translate3D(0,-200px,0)rotateZ(180deg)rotateX(-90deg)}
16 | .down{transform:rotateX(180deg)}
17 |
18 | /* textures */
19 | .cube *{background:#bbb}
20 | .cube .front{background:#ddd}
21 | .cube .left, .cube .right{background:#999}
22 |
23 | #hero * {background:#fa0}
24 | #hero .front{background:#e92}
25 | #hero .left, #hero .right{background:#d70}
26 | #hero .front:before {display:block;width:200px;content:'👀';font-size:100px;text-align:center}
27 |
28 | /* plane, sprite */
29 | .plane,.sprite{font-size:200px}
30 | .plane *,.sprite *{transform-origin:50% 100%;transform:translateY(-100px)rotateX(-90deg)}
--------------------------------------------------------------------------------
/css3d/viewer.js:
--------------------------------------------------------------------------------
1 | // Globals
2 | var token = " ",
3 | rotation = 0,
4 | texture = 0,
5 | w = map.w,
6 | h = map.h,
7 | x = 0,
8 | y = 0,
9 | z = 0,
10 | rx = 45,
11 | rz = 45,
12 |
13 | // Move the scene
14 | moveScene = (rx, rz) => {
15 | scene.style.transformOrigin = `50% 50%`;
16 | scene.style.transform = `translate3D(-50%,-50%,-${Math.max(w*200,h*200)+z*200}px)rotateX(${rx}deg)rotateZ(${rz}deg)`;
17 | },
18 |
19 | // Return HTML code for a cube, at the given coordinates
20 | drawCube = (x, y, z, id='') => {
21 | html = `
`;
22 | html += `
`;
23 | html += `
`;
24 | html += `
`;
25 | html += `
`;
26 | html += `
`;
27 | return html;
28 | },
29 |
30 | // Draw scene
31 | drawScene = () => {
32 | for(Z in map.layers){
33 | for(Y in map.layers[Z]){
34 | for(X in map.layers[Z][Y]){
35 | token = map.layers[Z][Y][X];
36 | if(token == "1"){ // 1 = cube
37 | scene.insertAdjacentHTML("beforeEnd", drawCube(X,Y,Z));
38 | }
39 | }
40 | }
41 | }
42 | }
43 |
44 | drawScene();
45 | scene.style.width = floor.style.width = w * 200 + "px";
46 | scene.style.height = floor.style.height = h * 200 + "px";
47 | if(top.RX) RX.onchange = RX.onupdate = RX.oninput = RZ.onchange = RZ.onupdate = RZ.oninput = () => { moveScene(rx = +RX.value, rz = +RZ.value) }
--------------------------------------------------------------------------------
/webgl/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/css3d/1/index.html:
--------------------------------------------------------------------------------
1 |
Mini 3D Platformer demo 1
2 |
3 |
4 |
5 |
Move with arrow keys or WASD or ZQSD, jump with Space
6 |
Source code
7 |
8 |
17 |
18 |
Camera:
19 |
22 |
23 |
rx
24 | rz
25 |
26 |
27 |
28 |
29 |
224 |
--------------------------------------------------------------------------------
/css3d/2/index.html:
--------------------------------------------------------------------------------
1 |
Mini 3D Platformer demo 2
2 |
3 |
4 |
5 |
Rotate with left/right (or A/D or Q/D), go front with up (or Z or W), go back with down (or S), jump with Space
6 |
Source code
7 |
8 |
17 |
18 |
Camera:
19 |
22 |
23 |
rx
24 | rz
25 |
26 |
27 |
28 |
29 |
269 |
--------------------------------------------------------------------------------
/css3d/3/index.html:
--------------------------------------------------------------------------------
1 |
Mini 3D Platformer demo 3
2 |
3 |
4 |
5 |
Rotate with left/right (or A/D or Q/D), go front with up (or Z or W), go back with down (or S), jump with Space
6 |
Source code
7 |
8 |
17 |
18 |
19 |
20 |
21 |
265 |
--------------------------------------------------------------------------------
/webgl/w.js:
--------------------------------------------------------------------------------
1 | // WebGL framework
2 | // ===============
3 |
4 | debug = 1; // Enable shader/program compilation logs (optional)
5 |
6 | W = {
7 |
8 | // List of 3D models that can be rendered by the framework
9 | // (See the end of the file for built-in models: plane, billboard, cube, pyramid...)
10 | models: {},
11 |
12 | // List of custom renderers
13 | //renderers: {},
14 |
15 | // Reset the framework
16 | // param: a