浏览代码

Update demos page

customisations
alemart 3 年前
父节点
当前提交
21276bb719
共有 6 个文件被更改,包括 30 次插入45 次删除
  1. 30
    45
      docs/demos.md
  2. 二进制
      docs/img/qr-demo-hello-aframe.png
  3. 二进制
      docs/img/qr-demo-hello-three.png
  4. 二进制
      docs/img/qr-demo-hello-webgl.png
  5. 二进制
      docs/img/qr-demo-hello-world.png
  6. 二进制
      docs/img/qr-demo-interactivity-three.png

+ 30
- 45
docs/demos.md 查看文件

17
 }
17
 }
18
 
18
 
19
 .gallery-item:not(.gallery-item-3) img {
19
 .gallery-item:not(.gallery-item-3) img {
20
-    border-radius: 25px;
20
+    /*border-radius: 25px;*/
21
 }
21
 }
22
 
22
 
23
 @media screen and (min-width: 600px) {
23
 @media screen and (min-width: 600px) {
24
     .gallery-item {
24
     .gallery-item {
25
-        flex-basis: 30%;
25
+        flex-basis: 80%;
26
     }
26
     }
27
 }
27
 }
28
 
28
 
32
         opacity: 0.9;
32
         opacity: 0.9;
33
     }
33
     }
34
     .gallery-item:hover {
34
     .gallery-item:hover {
35
-        transform: scale(1.1);
35
+        /*transform: scale(1.1);*/
36
         opacity: 1.0;
36
         opacity: 1.0;
37
     }
37
     }
38
 }
38
 }
40
 
40
 
41
 # WebAR demos
41
 # WebAR demos
42
 
42
 
43
-Welcome to my demo gallery! Here you'll find some cool examples of what you can do with MARTINS.js. Feel free to adapt my demos and also to study my code. The Free Edition of MARTINS.js is included with my demos. Before creating derivative works of my demos, make sure to [pick the right edition for you](./download.md){ ._blank }. If you have any questions, feel free to [reach out](./contact.md){ ._blank }.
43
+Here you'll find some cool examples of what you can do with MARTINS.js. They are hosted on [Glitch](https://glitch.com){ ._blank }: it's easy to remix them. Simply click on a link or scan any of the QR codes below.
44
 
44
 
45
-## Free demos
45
+Before creating derivative works of my demos, make sure to [pick the right edition for you](./download.md){ ._blank }. If you have any questions, feel free to [reach out](./contact.md){ ._blank }.
46
+
47
+**Note:** when using a QR code, scan the [reference image below](#reference-image).
48
+
49
+## Basic demos
46
 
50
 
47
 The following free demos will help you get started:
51
 The following free demos will help you get started:
48
 
52
 
49
 <div class="gallery-grid" markdown>
53
 <div class="gallery-grid" markdown>
50
 <div class="gallery-item" markdown>
54
 <div class="gallery-item" markdown>
51
-<a href="https://ko-fi.com/s/058542943d" rel="external" target="_blank">
52
-
53
-![](./img/demo-hello.webp)
55
+![QR code](./img/qr-demo-hello-aframe.png)
54
 
56
 
55
-**Hello, world!**
57
+**WebAR with MARTINS.js + AFRAME**
56
 
58
 
57
-</a>
59
+[Launch demo](https://webar-martins-js-hello-aframe.glitch.me){ ._blank } | [View code](https://glitch.com/edit/#!/webar-martins-js-hello-aframe){ ._blank }
58
 </div>
60
 </div>
59
 <div class="gallery-item" markdown>
61
 <div class="gallery-item" markdown>
60
-<a href="https://ko-fi.com/s/25f4038f8b" rel="external" target="_blank">
62
+![QR code](./img/qr-demo-hello-three.png)
61
 
63
 
64
+**WebAR with MARTINS.js + THREE.js**
62
 
65
 
63
-![](./img/logo-webgl.png)
64
-
65
-**WebAR with WebGL + MARTINS.js**
66
-
67
-</a>
68
-</div>
66
+[Launch demo](https://webar-martins-js-hello-three.glitch.me){ ._blank } | [View code](https://glitch.com/edit/#!/webar-martins-js-hello-three){ ._blank }
69
 </div>
67
 </div>
70
-
71
-
72
-
73
-## Glue codes
74
-
75
-MARTINS.js scans the physical environment, but it doesn't render virtual content. Third-party 3D rendering technologies can help you with that. Glue codes link MARTINS.js to different 3D rendering technologies. My glue codes are compatible with both the Free and the Professional Edition of MARTINS.js. A basic demo is included with all of them.
76
-
77
-<div class="gallery-grid" markdown>
78
 <div class="gallery-item" markdown>
68
 <div class="gallery-item" markdown>
79
-<a href="https://ko-fi.com/s/24523f7548" rel="external" target="_blank">
69
+![QR code](./img/qr-demo-hello-webgl.png)
80
 
70
 
81
-![](./img/logo-aframe.png "A-Frame logo by Mozilla")
71
+**WebAR with MARTINS.js + pure WebGL**
82
 
72
 
83
-**WebAR with AFRAME + MARTINS.js**
84
-
85
-</a>
73
+[Launch demo](https://webar-martins-js-hello-webgl.glitch.me){ ._blank } | [View code](https://glitch.com/edit/#!/webar-martins-js-hello-webgl){ ._blank }
86
 </div>
74
 </div>
87
 <div class="gallery-item" markdown>
75
 <div class="gallery-item" markdown>
88
-<a href="https://ko-fi.com/s/eea4077938" rel="external" target="_blank">
89
-
90
-
91
-![](./img/logo-threejs.png "Three.js logo by Mr.doob")
76
+![](./img/logo-babylonjs.png "Babylon.js logo by David Catuhe")
92
 
77
 
93
-**WebAR with THREE.js + MARTINS.js**
78
+**WebAR with MARTINS.js + BABYLON.js**
94
 
79
 
95
-</a>
80
+Soon!
96
 </div>
81
 </div>
97
 <div class="gallery-item" markdown>
82
 <div class="gallery-item" markdown>
83
+![QR code](./img/qr-demo-hello-world.png)
98
 
84
 
99
-![](./img/logo-babylonjs.png "Babylon.js logo by David Catuhe")
100
-
101
-**WebAR with BABYLON.js + MARTINS.js (soon)**
85
+**Hello, world: minimal example**
102
 
86
 
87
+[Launch demo](https://webar-martins-js-hello-world.glitch.me){ ._blank } | [View code](https://glitch.com/edit/#!/webar-martins-js-hello-world){ ._blank }
103
 </div>
88
 </div>
104
 </div>
89
 </div>
105
 
90
 
107
 
92
 
108
     AFRAME is the easiest choice for non-coders. If you're a coder, all choices are good.
93
     AFRAME is the easiest choice for non-coders. If you're a coder, all choices are good.
109
 
94
 
110
-
111
 ## Fun & games
95
 ## Fun & games
112
 
96
 
113
 WebAR can be a lot of fun. More demos coming soon!
97
 WebAR can be a lot of fun. More demos coming soon!
114
 
98
 
115
 <div class="gallery-grid" markdown>
99
 <div class="gallery-grid" markdown>
116
 <div class="gallery-item" markdown>
100
 <div class="gallery-item" markdown>
117
-<a href="https://ko-fi.com/s/1d3c7e401c" rel="external" target="_blank">
118
-
119
-
120
-![](./img/logo-threejs.png)
101
+![QR code](./img/qr-demo-interactivity-three.png)
121
 
102
 
122
 **Touch interaction with THREE.js**
103
 **Touch interaction with THREE.js**
123
 
104
 
124
-</a>
105
+[Launch demo](https://webar-martins-js-interactivity-three.glitch.me){ ._blank } | [View code](https://glitch.com/edit/#!/webar-martins-js-interactivity-three){ ._blank }
125
 </div>
106
 </div>
126
 </div>
107
 </div>
127
 
108
 
128
 
109
 
110
+## Reference image
111
+
112
+[![Reference image](./assets/my-reference-image.webp)](./assets/my-reference-image.webp){ ._blank }
113
+
129
 
114
 
130
 ## Need something else?
115
 ## Need something else?
131
 
116
 

二进制
docs/img/qr-demo-hello-aframe.png 查看文件


二进制
docs/img/qr-demo-hello-three.png 查看文件


二进制
docs/img/qr-demo-hello-webgl.png 查看文件


二进制
docs/img/qr-demo-hello-world.png 查看文件


二进制
docs/img/qr-demo-interactivity-three.png 查看文件


正在加载...
取消
保存