diff --git a/index-intersection.html b/index-intersection.html
new file mode 100644
index 000000000..1151b0779
--- /dev/null
+++ b/index-intersection.html
@@ -0,0 +1,227 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 3DStreet
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/index.js b/src/index.js
index 3354445e9..3066de544 100644
--- a/src/index.js
+++ b/src/index.js
@@ -123,6 +123,11 @@ AFRAME.registerComponent('intersection', {
init: function () {
var data = this.data;
var el = this.el;
+
+ // remove all child nodes if exists
+ while (el.firstChild) {
+ el.removeChild(el.lastChild);
+ }
const dimensionsArray = data.dimensions.split(' ').map((i) => Number(i));
const positionArray = [this.el.getAttribute('position').x, this.el.getAttribute('position').y, this.el.getAttribute('position').z];
const sidewalkArray = data.sidewalk.split(' ').map((i) => Number(i));
@@ -137,13 +142,8 @@ AFRAME.registerComponent('intersection', {
const intersectWidth = dimensionsArray[0];
const intersectDepth = dimensionsArray[1];
- this.el.setAttribute('geometry', 'primitive', 'plane');
- this.geometry = new THREE.PlaneGeometry(intersectWidth, intersectDepth, 1, 1);
- this.material = new THREE.MeshStandardMaterial({ color: '#FF0000' });
- this.mesh = new THREE.Mesh(this.geometry, this.material);
- el.setObject3D('mesh', this.mesh);
-
- this.el.setAttribute('position', { x: positionArray[0], y: positionArray[1], z: positionArray[2] });
+ this.el.setAttribute('geometry', `primitive:box; width: ${intersectWidth}; height: ${intersectDepth}; depth:0.2`);
+ this.el.setAttribute('position', { x: positionArray[0], y: -0.1, z: positionArray[2] });
this.el.setAttribute('rotation', '-90 0 0');
this.el.setAttribute('material', 'src: #asphalt-texture; repeat:5 5; roughness:1');
@@ -169,13 +169,13 @@ AFRAME.registerComponent('intersection', {
// describe sidewalk parameters
const sidewalkParams = {
west: {
- positionVec: { x: intersectWidth / 2 - sidewalkArray[0] / 2 },
+ positionVec: { x: intersectWidth / 2 - sidewalkArray[0] / 2, z: 0.1 },
rotationVec: { x: 90, y: 0, z: 0 },
length: intersectDepth,
width: sidewalkArray[0]
},
east: {
- positionVec: { x: -intersectWidth / 2 + sidewalkArray[1] / 2 },
+ positionVec: { x: -intersectWidth / 2 + sidewalkArray[1] / 2, z: 0.1 },
rotationVec: { x: 90, y: 0, z: 0 },
length: intersectDepth,
width: sidewalkArray[1]
@@ -184,7 +184,8 @@ AFRAME.registerComponent('intersection', {
positionVec: {
y: -intersectDepth / 2 + sidewalkArray[2] / 2,
// add x offset to avoid sidewalk's element overlap
- x: sidewalkArray[1] / 2 - sidewalkArray[0] / 2
+ x: sidewalkArray[1] / 2 - sidewalkArray[0] / 2,
+ z: 0.1
},
rotationVec: { x: 0, y: 90, z: -90 },
// minus the width of the crossing sidewalk
@@ -195,7 +196,8 @@ AFRAME.registerComponent('intersection', {
positionVec: {
y: intersectDepth / 2 - sidewalkArray[3] / 2,
// add x offset to avoid sidewalk's element overlap
- x: sidewalkArray[1] / 2 - sidewalkArray[0] / 2
+ x: sidewalkArray[1] / 2 - sidewalkArray[0] / 2,
+ z: 0.1
},
rotationVec: { x: 0, y: 90, z: -90 },
// minus the width of the crossing sidewalk
@@ -216,25 +218,25 @@ AFRAME.registerComponent('intersection', {
// describe curb parameters
const curbParams = {
northeast: {
- positionVec: { x: intersectWidth / 2 - northeastcurbArray[0] / 2, y: intersectDepth / 2 - northeastcurbArray[1] / 2 },
+ positionVec: { x: intersectWidth / 2 - northeastcurbArray[0] / 2, y: intersectDepth / 2 - northeastcurbArray[1] / 2, z: 0.1 },
rotationVec: { x: 0, y: 90, z: -90 },
length: northeastcurbArray[0],
width: northeastcurbArray[1]
},
southwest: {
- positionVec: { x: -intersectWidth / 2 + southwestcurbArray[0] / 2, y: -intersectDepth / 2 + southwestcurbArray[1] / 2 },
+ positionVec: { x: -intersectWidth / 2 + southwestcurbArray[0] / 2, y: -intersectDepth / 2 + southwestcurbArray[1] / 2, z: 0.1 },
rotationVec: { x: 0, y: 90, z: -90 },
length: southwestcurbArray[0],
width: southwestcurbArray[1]
},
southeast: {
- positionVec: { x: intersectWidth / 2 - southeastcurbArray[0] / 2, y: -intersectDepth / 2 + southeastcurbArray[1] / 2 },
+ positionVec: { x: intersectWidth / 2 - southeastcurbArray[0] / 2, y: -intersectDepth / 2 + southeastcurbArray[1] / 2, z: 0.1 },
rotationVec: { x: 0, y: 90, z: -90 },
length: southeastcurbArray[0],
width: southeastcurbArray[1]
},
northwest: {
- positionVec: { x: -intersectWidth / 2 + northwestcurbArray[0] / 2, y: intersectDepth / 2 - northwestcurbArray[1] / 2 },
+ positionVec: { x: -intersectWidth / 2 + northwestcurbArray[0] / 2, y: intersectDepth / 2 - northwestcurbArray[1] / 2, z: 0.1 },
rotationVec: { x: 0, y: 90, z: -90 },
length: northwestcurbArray[0],
width: northwestcurbArray[1]
@@ -250,28 +252,28 @@ AFRAME.registerComponent('intersection', {
if (stopsignArray[0]) {
const ss1 = document.createElement('a-entity');
- ss1.setAttribute('position', { x: intersectWidth / 2, y: intersectDepth / 3, z: 0.03 });
+ ss1.setAttribute('position', { x: intersectWidth / 2, y: intersectDepth / 3, z: 0.1 });
ss1.setAttribute('rotation', { x: 0, y: 90, z: 90 });
ss1.setAttribute('mixin', 'stop_sign');
el.appendChild(ss1);
}
if (stopsignArray[1]) {
const ss2 = document.createElement('a-entity');
- ss2.setAttribute('position', { x: -intersectWidth / 2, y: -intersectDepth / 3, z: 0.03 });
+ ss2.setAttribute('position', { x: -intersectWidth / 2, y: -intersectDepth / 3, z: 0.1 });
ss2.setAttribute('rotation', { x: 0, y: -90, z: -90 });
ss2.setAttribute('mixin', 'stop_sign');
el.appendChild(ss2);
}
if (stopsignArray[2]) {
const ss3 = document.createElement('a-entity');
- ss3.setAttribute('position', { x: -intersectWidth / 3, y: intersectDepth / 2, z: 0.03 });
+ ss3.setAttribute('position', { x: -intersectWidth / 3, y: intersectDepth / 2, z: 0.1 });
ss3.setAttribute('rotation', { x: -90, y: 90, z: 90 });
ss3.setAttribute('mixin', 'stop_sign');
el.appendChild(ss3);
}
if (stopsignArray[3]) {
const ss4 = document.createElement('a-entity');
- ss4.setAttribute('position', { x: intersectWidth / 3, y: -intersectDepth / 2, z: 0.03 });
+ ss4.setAttribute('position', { x: intersectWidth / 3, y: -intersectDepth / 2, z: 0.1 });
ss4.setAttribute('rotation', { x: 90, y: -90, z: -90 });
ss4.setAttribute('mixin', 'stop_sign');
el.appendChild(ss4);
@@ -279,48 +281,48 @@ AFRAME.registerComponent('intersection', {
if (trafficsignalArray[0]) {
const ts1 = document.createElement('a-entity');
- ts1.setAttribute('position', { x: intersectWidth / 2, y: intersectDepth / 3, z: 0.03 });
+ ts1.setAttribute('position', { x: intersectWidth / 2, y: intersectDepth / 3, z: 0.3 });
ts1.setAttribute('rotation', { x: 210, y: 90, z: 90 });
ts1.setAttribute('mixin', 'signal_left');
el.appendChild(ts1);
const ts2 = document.createElement('a-entity');
- ts2.setAttribute('position', { x: intersectWidth / 2, y: -intersectDepth / 3, z: 0.03 });
+ ts2.setAttribute('position', { x: intersectWidth / 2, y: -intersectDepth / 3, z: 0.3 });
ts2.setAttribute('rotation', { x: 180, y: 90, z: 90 });
ts2.setAttribute('mixin', 'signal_right');
el.appendChild(ts2);
}
if (trafficsignalArray[1]) {
const ts3 = document.createElement('a-entity');
- ts3.setAttribute('position', { x: -intersectWidth / 2, y: -intersectDepth / 3, z: 0.03 });
+ ts3.setAttribute('position', { x: -intersectWidth / 2, y: -intersectDepth / 3, z: 0.3 });
ts3.setAttribute('rotation', { x: 30, y: 90, z: 90 });
ts3.setAttribute('mixin', 'signal_left');
el.appendChild(ts3);
const ts4 = document.createElement('a-entity');
- ts4.setAttribute('position', { x: -intersectWidth / 2, y: intersectDepth / 3, z: 0.03 });
+ ts4.setAttribute('position', { x: -intersectWidth / 2, y: intersectDepth / 3, z: 0.3 });
ts4.setAttribute('rotation', { x: 0, y: 90, z: 90 });
ts4.setAttribute('mixin', 'signal_right');
el.appendChild(ts4);
}
if (trafficsignalArray[2]) {
const ts5 = document.createElement('a-entity');
- ts5.setAttribute('position', { x: -intersectWidth / 3, y: intersectDepth / 2, z: 0.03 });
+ ts5.setAttribute('position', { x: -intersectWidth / 3, y: intersectDepth / 2, z: 0.1 });
ts5.setAttribute('rotation', { x: 120, y: 90, z: 90 });
ts5.setAttribute('mixin', 'signal_left');
el.appendChild(ts5);
const ts6 = document.createElement('a-entity');
- ts6.setAttribute('position', { x: intersectWidth / 3, y: intersectDepth / 2, z: 0.03 });
+ ts6.setAttribute('position', { x: intersectWidth / 3, y: intersectDepth / 2, z: 0.1 });
ts6.setAttribute('rotation', { x: 90, y: 90, z: 90 });
ts6.setAttribute('mixin', 'signal_right');
el.appendChild(ts6);
}
if (trafficsignalArray[3]) {
const ts7 = document.createElement('a-entity');
- ts7.setAttribute('position', { x: intersectWidth / 3, y: -intersectDepth / 2, z: 0.03 });
+ ts7.setAttribute('position', { x: intersectWidth / 3, y: -intersectDepth / 2, z: 0.1 });
ts7.setAttribute('rotation', { x: -60, y: 90, z: 90 });
ts7.setAttribute('mixin', 'signal_left');
el.appendChild(ts7);
const ts8 = document.createElement('a-entity');
- ts8.setAttribute('position', { x: -intersectWidth / 3, y: -intersectDepth / 2, z: 0.03 });
+ ts8.setAttribute('position', { x: -intersectWidth / 3, y: -intersectDepth / 2, z: 0.1 });
ts8.setAttribute('rotation', { x: -90, y: 90, z: 90 });
ts8.setAttribute('mixin', 'signal_right');
el.appendChild(ts8);
@@ -328,7 +330,7 @@ AFRAME.registerComponent('intersection', {
if (crosswalklArray[0]) {
const cw1 = document.createElement('a-entity');
- cw1.setAttribute('position', { x: intersectWidth / 2 - 2, z: 0.013 });
+ cw1.setAttribute('position', { x: intersectWidth / 2 - 2, z: 0.11 });
cw1.setAttribute('rotation', { x: 0, y: 0, z: 180 });
cw1.setAttribute('scale', { y: intersectDepth / 12 });
cw1.setAttribute('mixin', 'markings crosswalk-zebra');
@@ -336,7 +338,7 @@ AFRAME.registerComponent('intersection', {
}
if (crosswalklArray[1]) {
const cw2 = document.createElement('a-entity');
- cw2.setAttribute('position', { x: -intersectWidth / 2 + 2, z: 0.012 });
+ cw2.setAttribute('position', { x: -intersectWidth / 2 + 2, z: 0.11 });
cw2.setAttribute('rotation', { x: 0, y: 0, z: 180 });
cw2.setAttribute('scale', { y: intersectDepth / 12 });
cw2.setAttribute('mixin', 'markings crosswalk-zebra');
@@ -344,7 +346,7 @@ AFRAME.registerComponent('intersection', {
}
if (crosswalklArray[2]) {
const cw3 = document.createElement('a-entity');
- cw3.setAttribute('position', { y: -intersectDepth / 2 + 2, z: 0.011 });
+ cw3.setAttribute('position', { y: -intersectDepth / 2 + 2, z: 0.11 });
cw3.setAttribute('rotation', { x: 0, y: 0, z: 90 });
cw3.setAttribute('scale', { y: intersectWidth / 12 });
cw3.setAttribute('mixin', 'markings crosswalk-zebra');
@@ -352,7 +354,7 @@ AFRAME.registerComponent('intersection', {
}
if (crosswalklArray[3]) {
const cw4 = document.createElement('a-entity');
- cw4.setAttribute('position', { y: intersectDepth / 2 - 2, z: 0.01 });
+ cw4.setAttribute('position', { y: intersectDepth / 2 - 2, z: 0.11 });
cw4.setAttribute('rotation', { x: 0, y: 0, z: 90 });
cw4.setAttribute('scale', { y: intersectWidth / 12 });
cw4.setAttribute('mixin', 'markings crosswalk-zebra');
diff --git a/src/json-utils.js b/src/json-utils.js
index 760c96060..76b6c53fa 100644
--- a/src/json-utils.js
+++ b/src/json-utils.js
@@ -130,7 +130,8 @@ const removeProps = {
// a list of component_name:new_component_name pairs to rename in JSON string
const renameProps = {
'streetmix-loader': 'not-streetmix-loader',
- street: 'not-street'
+ street: 'not-street',
+ intersection: 'not-intersection'
};
function filterJSONstreet (removeProps, renameProps, streetJSON) {
+ 
+
+ 
+ 
