Skip to content

Commit a868b9e

Browse files
dmarcosdmarcos
committed
It removes the ability to provide an external canvas. The canvas size and positioning can be controled styling the a-scene when adding the embedded attribute
1 parent 31b62d5 commit a868b9e

File tree

27 files changed

+4166
-392
lines changed

27 files changed

+4166
-392
lines changed

‎examples/animation/warps/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
<!-- Warps 1 -->
1414

15-
<a-entity position="-2 1.5 -2">
15+
<a-entity position="-2 1.5 -6">
1616

1717
<!-- Green -->
1818
<a-entity>

‎examples/showcase/composite/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
</a-assets>
1616

1717
<a-sky src="#lake"></a-sky>
18-
<a-collada-model src="#sculpture" position="0 0 -2"></a-collada-model>
19-
<a-image src="#pdx" width="10" height="5" position="-2 1.2 1.2"
18+
<a-collada-model src="#sculpture" position="0 0 -6"></a-collada-model>
19+
<a-image src="#pdx" width="10" height="5" position="-2 1.2 -3"
2020
scale="0.2 0.2 0.2"></a-image>
2121
</a-scene>
2222
</body>

‎examples/showcase/shopping/index.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,7 @@
1818
<img id="shoes" src="shoes.png">
1919
</a-assets>
2020

21-
<a-camera position="0 1.6 0"></a-camera>
22-
23-
<a-entity id="model" position="0 0 -2">
21+
<a-entity id="model" position="0 0 -3">
2422
<a-animation attribute="rotation" from="0 -30 0" to="0 330 0" dur="15000"
2523
easing="linear" repeat="infinite"></a-animation>
2624
<a-collada-model position="-.35 0 .55" rotation="0 -20 0" scale="1.5 1.5 1.5"
@@ -29,7 +27,7 @@
2927
</a-entity>
3028

3129
<a-curvedimage id="mozvr-logo" src="#mozvr" radius="5.7" theta-length="36" height="1"
32-
position="0 2.6 0" opacity="0.5">
30+
position="0 2.6 -1" opacity="0.5">
3331
<a-animation attribute="rotation" from="0 10 0" to="0 200 0" delay="500"
3432
dur="1000"></a-animation>
3533
</a-curvedimage>

‎examples/showcase/spheres-and-fog/index.html‎

Lines changed: 125 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -13,129 +13,131 @@
1313
<img id="shadow3" src="../../assets/img/radial-shadow-3.png">
1414
</a-assets>
1515

16-
<!-- Ground Highlight -->
17-
<a-image position="0 -.2 5" src="#highlight1" rotation="-90 0 0"
18-
scale="30 30 30"></a-image>
19-
20-
<!-- Orange -->
21-
<a-entity position="0 0 -5">
22-
<a-sphere position="0 4.2 0" radius="4.2" color="#F16745"
23-
roughness="0.8" width-segments="52" height-segments="52"></a-sphere>
24-
<a-image src="#shadow3" rotation="-90 0 0" scale="3 3 3"></a-image>
25-
</a-entity>
26-
27-
<!-- Green -->
28-
<a-entity position="-3 0 0">
29-
<a-sphere position="0 1.75 0" radius="1.75" color="#7BC8A4"
30-
roughness="0.2"></a-sphere>
31-
<a-image src="#shadow3" rotation="-90 0 0" scale="1.75 1.75 1.75"></a-image>
32-
</a-entity>
33-
34-
<!-- Blue -->
35-
<a-entity position="1 0 0">
36-
<a-sphere position="0 1 0" radius="1" color="#4CC3D9" metalness="0.1"></a-sphere>
37-
<a-image src="#shadow3" rotation="-90 0 0" scale="1 1 1"></a-image>
38-
</a-entity>
39-
40-
<!-- Yellow -->
41-
<a-entity position="3 0 1">
42-
<a-sphere position="0 0.5 0" radius="0.5" color="#FFC65D"></a-sphere>
43-
<a-image src="#shadow3" rotation="-90 0 0" scale="0.5 0.5 0.5"></a-image>
44-
</a-entity>
45-
46-
<!-- Purple -->
47-
<a-entity position="20 0 -2">
48-
<a-sphere position="0 10 0" radius="10" color="#93648D"
49-
segments-width="52" segments-height="52"></a-sphere>
50-
<a-image src="#shadow3" rotation="-90 0 0" scale="9 9 9"></a-image>
51-
</a-entity>
52-
53-
<!-- Yellow -->
54-
<a-entity position="-24 0 -34">
55-
<a-sphere position="0 18 0" radius="18" color="#FFC65D"></a-sphere>
56-
<a-image src="#shadow3" rotation="-90 0 0" scale="8 8 8"></a-image>
57-
</a-entity>
58-
59-
<!-- Green -->
60-
<a-entity position="25 0 20">
61-
<a-sphere position="0 12 0" radius="12" color="#7BC8A4"></a-sphere>
62-
<a-image src="#shadow3" rotation="-90 0 0" scale="8 8 8"></a-image>
63-
</a-entity>
64-
65-
<!-- White -->
66-
<a-entity position="-15 0 5">
67-
<a-sphere position="0 3 0" radius="3" color="#ECECEC"></a-sphere>
68-
<a-image src="#shadow3" rotation="-90 0 0" scale="3 3 3"></a-image>
69-
</a-entity>
70-
71-
<!-- Orange -->
72-
<a-entity position="-6 0 6">
73-
<a-sphere position="0 1 0" radius="1" color="#F16745" roughness="0.8"></a-sphere>
74-
<a-image src="#shadow3" rotation="-90 0 0" scale="1 1 1"></a-image>
75-
</a-entity>
76-
77-
<!-- Yellow -->
78-
<a-entity position="-20 0 30">
79-
<a-sphere position="0 30 0" radius="30" color="#FFC65D" roughness="0.6"></a-sphere>
80-
<a-image src="#shadow3" rotation="-90 0 0" scale="15 15 15"></a-image>
81-
</a-entity>
82-
83-
<!-- Blue -->
84-
<a-entity position="-1 0 14">
85-
<a-sphere position="0 2 0" radius="2" color="#4CC3D9"></a-sphere>
86-
<a-image src="#shadow3" rotation="-90 0 0" scale="2 2 2"></a-image>
87-
</a-entity>
88-
89-
<!-- Orange -->
90-
<a-entity position="10 0 15">
91-
<a-sphere position="0 4 0" radius="4" color="#F16745" roughness="1"></a-sphere>
92-
<a-image src="#shadow3" rotation="-90 0 0" scale="2 2 2"></a-image>
93-
</a-entity>
94-
95-
<!-- Blue -->
96-
<a-entity position="6 0 4">
97-
<a-sphere position="0 1.5 0" radius="1.5" color="#4CC3D9" metalness="0.1"></a-sphere>
98-
<a-image src="#shadow3" rotation="-90 0 0" scale="1.5 1.5 1.5"></a-image>
99-
</a-entity>
100-
101-
<!-- Yellow -->
102-
<a-entity position="5 0 14">
103-
<a-sphere position="0 .6 0" radius=".6" color="#FFC65D"></a-sphere>
104-
<a-image src="#shadow3" rotation="-90 0 0" scale="0.6 0.6 0.6"></a-image>
105-
</a-entity>
106-
107-
<!-- Purple -->
108-
<a-entity position="5 0 25">
109-
<a-sphere position="0 2 0" radius="2" color="#93648D"></a-sphere>
110-
<a-image src="#shadow3" rotation="-90 0 0" scale="2 2 2"></a-image>
111-
</a-entity>
112-
113-
<!-- White -->
114-
<a-entity position="2 0 15">
115-
<a-sphere position="0 0.2 0" radius="0.2" color="#ECECEC"></a-sphere>
116-
<a-image src="#shadow3" rotation="-90 0 0" scale="0.2 0.2 0.2"
117-
opacity="0.5"></a-image>
118-
</a-entity>
119-
120-
<!-- Purple -->
121-
<a-entity position="4 0 10">
122-
<a-sphere position="0 0.15 0" radius="0.15" color="#93648D"></a-sphere>
123-
<a-image src="#shadow3" rotation="-90 0 0" scale="0.25 0.25 0.25"
124-
opacity="0.6"></a-image>
125-
</a-entity>
126-
127-
<!-- Blue -->
128-
<a-entity position="4 0 11">
129-
<a-sphere position="0 0.1 0" radius="0.1" color="#4CC3D9"></a-sphere>
130-
<a-image src="#shadow" rotation="-90 0 0" scale="0.15 0.15 0.15"
131-
opacity="0.6"></a-image>
132-
</a-entity>
133-
134-
<!-- Green -->
135-
<a-entity position="5 0 11">
136-
<a-sphere position="0 0.3 0" radius="0.3" color="#7BC8A4"></a-sphere>
137-
<a-image src="#shadow3" rotation="-90 0 0" scale="0.25 0.25 0.25"
138-
opacity="0.6"></a-image>
16+
<a-entity position="0 0 -10">
17+
<!-- Ground Highlight -->
18+
<a-image position="0 -.2 5" src="#highlight1" rotation="-90 0 0"
19+
scale="30 30 30"></a-image>
20+
21+
<!-- Orange -->
22+
<a-entity position="0 0 -5">
23+
<a-sphere position="0 4.2 0" radius="4.2" color="#F16745"
24+
roughness="0.8" width-segments="52" height-segments="52"></a-sphere>
25+
<a-image src="#shadow3" rotation="-90 0 0" scale="3 3 3"></a-image>
26+
</a-entity>
27+
28+
<!-- Green -->
29+
<a-entity position="-3 0 0">
30+
<a-sphere position="0 1.75 0" radius="1.75" color="#7BC8A4"
31+
roughness="0.2"></a-sphere>
32+
<a-image src="#shadow3" rotation="-90 0 0" scale="1.75 1.75 1.75"></a-image>
33+
</a-entity>
34+
35+
<!-- Blue -->
36+
<a-entity position="1 0 0">
37+
<a-sphere position="0 1 0" radius="1" color="#4CC3D9" metalness="0.1"></a-sphere>
38+
<a-image src="#shadow3" rotation="-90 0 0" scale="1 1 1"></a-image>
39+
</a-entity>
40+
41+
<!-- Yellow -->
42+
<a-entity position="3 0 1">
43+
<a-sphere position="0 0.5 0" radius="0.5" color="#FFC65D"></a-sphere>
44+
<a-image src="#shadow3" rotation="-90 0 0" scale="0.5 0.5 0.5"></a-image>
45+
</a-entity>
46+
47+
<!-- Purple -->
48+
<a-entity position="20 0 -2">
49+
<a-sphere position="0 10 0" radius="10" color="#93648D"
50+
segments-width="52" segments-height="52"></a-sphere>
51+
<a-image src="#shadow3" rotation="-90 0 0" scale="9 9 9"></a-image>
52+
</a-entity>
53+
54+
<!-- Yellow -->
55+
<a-entity position="-24 0 -34">
56+
<a-sphere position="0 18 0" radius="18" color="#FFC65D"></a-sphere>
57+
<a-image src="#shadow3" rotation="-90 0 0" scale="8 8 8"></a-image>
58+
</a-entity>
59+
60+
<!-- Green -->
61+
<a-entity position="25 0 20">
62+
<a-sphere position="0 12 0" radius="12" color="#7BC8A4"></a-sphere>
63+
<a-image src="#shadow3" rotation="-90 0 0" scale="8 8 8"></a-image>
64+
</a-entity>
65+
66+
<!-- White -->
67+
<a-entity position="-15 0 5">
68+
<a-sphere position="0 3 0" radius="3" color="#ECECEC"></a-sphere>
69+
<a-image src="#shadow3" rotation="-90 0 0" scale="3 3 3"></a-image>
70+
</a-entity>
71+
72+
<!-- Orange -->
73+
<a-entity position="-6 0 6">
74+
<a-sphere position="0 1 0" radius="1" color="#F16745" roughness="0.8"></a-sphere>
75+
<a-image src="#shadow3" rotation="-90 0 0" scale="1 1 1"></a-image>
76+
</a-entity>
77+
78+
<!-- Yellow -->
79+
<a-entity position="-20 0 30">
80+
<a-sphere position="0 30 0" radius="30" color="#FFC65D" roughness="0.6"></a-sphere>
81+
<a-image src="#shadow3" rotation="-90 0 0" scale="15 15 15"></a-image>
82+
</a-entity>
83+
84+
<!-- Blue -->
85+
<a-entity position="-1 0 14">
86+
<a-sphere position="0 2 0" radius="2" color="#4CC3D9"></a-sphere>
87+
<a-image src="#shadow3" rotation="-90 0 0" scale="2 2 2"></a-image>
88+
</a-entity>
89+
90+
<!-- Orange -->
91+
<a-entity position="10 0 15">
92+
<a-sphere position="0 4 0" radius="4" color="#F16745" roughness="1"></a-sphere>
93+
<a-image src="#shadow3" rotation="-90 0 0" scale="2 2 2"></a-image>
94+
</a-entity>
95+
96+
<!-- Blue -->
97+
<a-entity position="6 0 4">
98+
<a-sphere position="0 1.5 0" radius="1.5" color="#4CC3D9" metalness="0.1"></a-sphere>
99+
<a-image src="#shadow3" rotation="-90 0 0" scale="1.5 1.5 1.5"></a-image>
100+
</a-entity>
101+
102+
<!-- Yellow -->
103+
<a-entity position="5 0 14">
104+
<a-sphere position="0 .6 0" radius=".6" color="#FFC65D"></a-sphere>
105+
<a-image src="#shadow3" rotation="-90 0 0" scale="0.6 0.6 0.6"></a-image>
106+
</a-entity>
107+
108+
<!-- Purple -->
109+
<a-entity position="5 0 25">
110+
<a-sphere position="0 2 0" radius="2" color="#93648D"></a-sphere>
111+
<a-image src="#shadow3" rotation="-90 0 0" scale="2 2 2"></a-image>
112+
</a-entity>
113+
114+
<!-- White -->
115+
<a-entity position="2 0 15">
116+
<a-sphere position="0 0.2 0" radius="0.2" color="#ECECEC"></a-sphere>
117+
<a-image src="#shadow3" rotation="-90 0 0" scale="0.2 0.2 0.2"
118+
opacity="0.5"></a-image>
119+
</a-entity>
120+
121+
<!-- Purple -->
122+
<a-entity position="4 0 10">
123+
<a-sphere position="0 0.15 0" radius="0.15" color="#93648D"></a-sphere>
124+
<a-image src="#shadow3" rotation="-90 0 0" scale="0.25 0.25 0.25"
125+
opacity="0.6"></a-image>
126+
</a-entity>
127+
128+
<!-- Blue -->
129+
<a-entity position="4 0 11">
130+
<a-sphere position="0 0.1 0" radius="0.1" color="#4CC3D9"></a-sphere>
131+
<a-image src="#shadow" rotation="-90 0 0" scale="0.15 0.15 0.15"
132+
opacity="0.6"></a-image>
133+
</a-entity>
134+
135+
<!-- Green -->
136+
<a-entity position="5 0 11">
137+
<a-sphere position="0 0.3 0" radius="0.3" color="#7BC8A4"></a-sphere>
138+
<a-image src="#shadow3" rotation="-90 0 0" scale="0.25 0.25 0.25"
139+
opacity="0.6"></a-image>
140+
</a-entity>
139141
</a-entity>
140142

141143
<!-- Background -->

‎examples/showcase/tracked-controls/index.html‎

Lines changed: 44 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -26,34 +26,54 @@
2626
<a-entity hand-controls="right" aabb-collider="objects: .cube;" grab></a-entity>
2727

2828
<!-- A-Frame cubes -->
29-
<a-entity class="cube" mixin="cube" position="0.30 1.65 0"></a-entity>
30-
<a-entity class="cube" mixin="cube" position="0 1.95 0"></a-entity>
31-
<a-entity class="cube" mixin="cube" position="-0.30 1.65 0"></a-entity>
29+
<a-entity position="0 0 -4">
30+
<a-entity class="cube" mixin="cube" position="0.30 1.65 0"></a-entity>
31+
<a-entity class="cube" mixin="cube" position="0 1.95 0"></a-entity>
32+
<a-entity class="cube" mixin="cube" position="-0.30 1.65 0"></a-entity>
3233

33-
<a-entity class="cube" mixin="cube" position="0.60 1.35 0"></a-entity>
34-
<a-entity class="cube" mixin="cube" position="0.60 1.05 0"></a-entity>
35-
<a-entity class="cube" mixin="cube" position="0.60 0.75 0"></a-entity>
36-
<a-entity class="cube" mixin="cube" position="0.60 0.45 0"></a-entity>
37-
<a-entity class="cube" mixin="cube" position="0.60 0.15 0"></a-entity>
34+
<a-entity class="cube" mixin="cube" position="0.60 1.35 0"></a-entity>
35+
<a-entity class="cube" mixin="cube" position="0.60 1.05 0"></a-entity>
36+
<a-entity class="cube" mixin="cube" position="0.60 0.75 0"></a-entity>
37+
<a-entity class="cube" mixin="cube" position="0.60 0.45 0"></a-entity>
38+
<a-entity class="cube" mixin="cube" position="0.60 0.15 0"></a-entity>
3839

39-
<a-entity class="cube" mixin="cube" position="0.30 0.75 0"></a-entity>
40-
<a-entity class="cube" mixin="cube" position="0 0.75 0"></a-entity>
41-
<a-entity class="cube" mixin="cube" position="-0.30 0.75 0"></a-entity>
40+
<a-entity class="cube" mixin="cube" position="0.30 0.75 0"></a-entity>
41+
<a-entity class="cube" mixin="cube" position="0 0.75 0"></a-entity>
42+
<a-entity class="cube" mixin="cube" position="-0.30 0.75 0"></a-entity>
4243

43-
<a-entity class="cube" mixin="cube" position="-0.60 1.35 0"></a-entity>
44-
<a-entity class="cube" mixin="cube" position="-0.60 1.05 0"></a-entity>
45-
<a-entity class="cube" mixin="cube" position="-0.60 0.75 0"></a-entity>
46-
<a-entity class="cube" mixin="cube" position="-0.60 0.45 0"></a-entity>
47-
<a-entity class="cube" mixin="cube" position="-0.60 0.15 0"></a-entity>
44+
<a-entity class="cube" mixin="cube" position="-0.60 1.35 0"></a-entity>
45+
<a-entity class="cube" mixin="cube" position="-0.60 1.05 0"></a-entity>
46+
<a-entity class="cube" mixin="cube" position="-0.60 0.75 0"></a-entity>
47+
<a-entity class="cube" mixin="cube" position="-0.60 0.45 0"></a-entity>
48+
<a-entity class="cube" mixin="cube" position="-0.60 0.15 0"></a-entity>
4849

49-
<!-- Environment -->
50-
<a-entity id="sky"
51-
geometry="primitive: sphere; radius: 65;"
52-
material="shader: skyGradient; colorTop: #353449; colorBottom: #BC483E; side: back"></a-entity>
53-
<a-entity ground></a-entity>
54-
<a-entity light="type: point; color: #f4f4f4; intensity: 0.2; distance: 0" position="8 10 18"></a-entity>
55-
<a-entity light="type: point; color: #f4f4f4; intensity: 0.6; distance: 0" position="-8 10 -18"></a-entity>
56-
<a-entity light="type: ambient; color: #f4f4f4; intensity: 0.4;" position="-8 10 -18"></a-entity>
50+
<!-- Environment -->
51+
<a-entity id="sky"
52+
geometry="primitive: sphere; radius: 65;"
53+
material="shader: skyGradient; colorTop: #353449; colorBottom: #BC483E; side: back"></a-entity>
54+
<a-entity ground></a-entity>
55+
<a-entity light="type: point; color: #f4f4f4; intensity: 0.2; distance: 0" position="8 10 18"></a-entity>
56+
<a-entity light="type: point; color: #f4f4f4; intensity: 0.6; distance: 0" position="-8 10 -18"></a-entity>
57+
<a-entity light="type: ambient; color: #f4f4f4; intensity: 0.4;" position="-8 10 -18"></a-entity>
58+
</a-entity>
5759
</a-scene>
5860
</body>
61+
<script>
62+
var sceneEl = document.querySelector('a-scene');
63+
sceneEl.addEventListener('loaded', createSphere);
64+
function createSphere() {
65+
var sphereEl = document.createElement("a-sphere");
66+
sphereEl.setAttribute('color', 'blue');
67+
sphereEl.setAttribute("position", "0 1 0");
68+
sphereEl.setAttribute("scale", "0.1 0.1 0.1");
69+
sphereEl.setAttribute("class", "cube");
70+
sphereEl.setAttribute("mixin", "cube");
71+
sphereEl.addEventListener('hit', function() {
72+
sphereEl.setAttribute('color', 'red');
73+
});
74+
sceneEl.appendChild(sphereEl);
75+
}
76+
77+
</script>
78+
5979
</html>

0 commit comments

Comments
 (0)