diff --git a/index.html b/index.html
index 094b014f..4ef5ea00 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
-
+
diff --git a/src/aframe-streetmix-parsers.js b/src/aframe-streetmix-parsers.js
index 28160122..58e023f0 100644
--- a/src/aframe-streetmix-parsers.js
+++ b/src/aframe-streetmix-parsers.js
@@ -300,7 +300,7 @@ function createSidewalkClonedVariants(
10
);
const dividerParentEl = createParentElement('pedestrians-parent');
- dividerParentEl.setAttribute('position', { y: elevationPosY });
+ dividerParentEl.object3D.position.setY(elevationPosY);
// Randomly generate avatars
for (let i = 0; i < totalPedestrianNumber; i++) {
const variantName =
@@ -690,7 +690,8 @@ function createOutdoorDining(length, posY) {
reusableObjectEl.setAttribute('mixin', 'outdoor_dining');
// const positionZ = randomPosition(reusableObjectEl, 'z', length, outdorDiningLength);
- reusableObjectEl.setAttribute('position', { y: posY, z: randPosZ });
+ reusableObjectEl.object3D.position.setY(posY);
+ reusableObjectEl.object3D.position.setZ(randPosZ);
outdoorDiningParentEl.append(reusableObjectEl);
});
@@ -729,7 +730,8 @@ function createMicroMobilityElement(
const reusableObjectEl = document.createElement('a-entity');
const rotationY = variantList[0] === 'inbound' ? 0 : 180;
reusableObjectEl.setAttribute('rotation', '0 ' + rotationY + ' 0');
- reusableObjectEl.setAttribute('position', { y: posY, z: randPosZ });
+ reusableObjectEl.object3D.position.setY(posY);
+ reusableObjectEl.object3D.position.setZ(randPosZ);
if (animated) {
reusableObjectEl.setAttribute('animation-mixer', '');
@@ -774,7 +776,7 @@ function createFlexZoneElement(variantList, length, showVehicles = true) {
} else if (variantList[0] === 'rideshare') {
reusableObjectEl.setAttribute('mixin', 'sedan-rig');
}
- reusableObjectEl.setAttribute('position', { z: randPosZ });
+ reusableObjectEl.object3D.position.setZ(randPosZ);
flexZoneParentEl.append(reusableObjectEl);
});
@@ -823,7 +825,8 @@ function createBenchesParentElement() {
function createBikeRacksParentElement(posY) {
const placedObjectEl = document.createElement('a-entity');
placedObjectEl.setAttribute('class', 'bikerack-parent');
- placedObjectEl.setAttribute('position', { y: posY, z: -3.5 });
+ placedObjectEl.object3D.position.setY(posY);
+ placedObjectEl.object3D.position.setZ(-3.5);
return placedObjectEl;
}
@@ -833,7 +836,7 @@ function createBikeShareStationElement(variantList, posY) {
placedObjectEl.setAttribute('mixin', 'bikeshare');
const rotationCloneY = variantList[0] === 'left' ? 90 : 270;
placedObjectEl.setAttribute('rotation', '0 ' + rotationCloneY + ' 0');
- placedObjectEl.setAttribute('position', { y: posY });
+ placedObjectEl.object3D.position.setY(posY);
return placedObjectEl;
}
@@ -848,7 +851,7 @@ function createParkletElement(length, variantList) {
placedObjectEl.setAttribute('position', { x: 0, y: 0.02, z: randPosZ });
placedObjectEl.setAttribute('mixin', 'parklet');
const rotationY = variantList[0] === 'left' ? 90 : 270;
- placedObjectEl.setAttribute('rotation', { y: rotationY });
+ placedObjectEl.setAttribute('rotation', { x: 0, y: rotationY, z: 0 });
parkletParent.append(placedObjectEl);
});
return parkletParent;
@@ -875,7 +878,7 @@ function createBusStopElement(rotationBusStopY, posY) {
placedObjectEl.setAttribute('class', 'bus-stop');
placedObjectEl.setAttribute('rotation', '0 ' + rotationBusStopY + ' 0');
placedObjectEl.setAttribute('mixin', 'bus-stop');
- placedObjectEl.setAttribute('position', { y: posY });
+ placedObjectEl.object3D.position.setY(posY);
return placedObjectEl;
}
@@ -923,7 +926,7 @@ function createSegmentElement(
width: ${segmentWidthInMeters};`
);
- segmentEl.setAttribute('position', { y: positionY });
+ segmentEl.object3D.position.setY(positionY);
segmentEl.setAttribute('mixin', mixinId);
if (repeatCount.length !== 0) {
@@ -1793,7 +1796,7 @@ function processBuildings(left, right, streetWidth, showGround, length) {
segmentsDepth: 10,
segmentsWidth: 10
});
- groundParentEl.setAttribute('position', { y: -3 });
+ groundParentEl.object3D.position.setY(-3);
} else {
groundParentEl = document.createElement('a-box');
groundParentEl.setAttribute('depth', length);
@@ -1805,14 +1808,13 @@ function processBuildings(left, right, streetWidth, showGround, length) {
'mixin',
variantToMaterialMapping[currentValue]
); // case grass, fence
- groundParentEl.setAttribute('position', { y: -1 });
+ groundParentEl.object3D.position.setY(-1);
}
if (side === 'right') {
- // groundParentEl.setAttribute('position', groundPositionX + ' -1 0');
- groundParentEl.setAttribute('position', { x: groundPositionX });
+ groundParentEl.object3D.position.setX(groundPositionX);
} else {
- groundParentEl.setAttribute('position', { x: groundPositionX });
+ groundParentEl.object3D.position.setX(groundPositionX);
}
groundParentEl.classList.add('ground-' + side);
groundParentEl.setAttribute(
@@ -1856,13 +1858,14 @@ function processBuildings(left, right, streetWidth, showGround, length) {
const objectPositionX = buildingPositionX - (sideMultiplier * 150) / 2;
const placedObjectEl = document.createElement('a-entity');
placedObjectEl.setAttribute('class', 'seawall-parent');
- placedObjectEl.setAttribute('position', { x: objectPositionX, z: 4.5 }); // position="1.043 0.100 -3.463"
+ placedObjectEl.object3D.position.setX(objectPositionX);
+ placedObjectEl.object3D.position.setZ(4.5); // position="1.043 0.100 -3.463"
let rotationCloneY;
if (currentValue === 'compound-wall') {
- placedObjectEl.setAttribute('position', { y: 3 });
- placedObjectEl.setAttribute('position', {
- x: objectPositionX + 1.5 * sideMultiplier
- });
+ placedObjectEl.object3D.position.setY(3);
+ placedObjectEl.object3D.position.setX(
+ objectPositionX + 1.5 * sideMultiplier
+ );
rotationCloneY = side === 'left' ? 90 : -90;
} else {
rotationCloneY = side === 'left' ? -90 : 90;
diff --git a/src/components/intersection.js b/src/components/intersection.js
index d7f80360..14c15aab 100644
--- a/src/components/intersection.js
+++ b/src/components/intersection.js
@@ -347,9 +347,13 @@ AFRAME.registerComponent('intersection', {
if (crosswalklArray[0]) {
const cw1 = document.createElement('a-entity');
- cw1.setAttribute('position', { x: intersectWidth / 2 - 2, z: 0.11 });
+ cw1.setAttribute('position', {
+ x: intersectWidth / 2 - 2,
+ y: 0,
+ z: 0.11
+ });
cw1.setAttribute('rotation', { x: 0, y: 0, z: 180 });
- cw1.setAttribute('scale', { y: intersectDepth / 12 });
+ cw1.setAttribute('scale', { x: 1, y: intersectDepth / 12, z: 1 });
cw1.setAttribute('mixin', 'markings crosswalk-zebra');
cw1.setAttribute('data-layer-name', 'Crosswalk • East');
cw1.classList.add('autocreated');
@@ -357,9 +361,13 @@ AFRAME.registerComponent('intersection', {
}
if (crosswalklArray[1]) {
const cw2 = document.createElement('a-entity');
- cw2.setAttribute('position', { x: -intersectWidth / 2 + 2, z: 0.11 });
+ cw2.setAttribute('position', {
+ x: -intersectWidth / 2 + 2,
+ y: 0,
+ z: 0.11
+ });
cw2.setAttribute('rotation', { x: 0, y: 0, z: 180 });
- cw2.setAttribute('scale', { y: intersectDepth / 12 });
+ cw2.setAttribute('scale', { x: 1, y: intersectDepth / 12, z: 1 });
cw2.setAttribute('mixin', 'markings crosswalk-zebra');
cw2.setAttribute('data-layer-name', 'Crosswalk • West');
cw2.classList.add('autocreated');
@@ -367,9 +375,13 @@ AFRAME.registerComponent('intersection', {
}
if (crosswalklArray[2]) {
const cw3 = document.createElement('a-entity');
- cw3.setAttribute('position', { y: -intersectDepth / 2 + 2, z: 0.11 });
+ cw3.setAttribute('position', {
+ x: 0,
+ y: -intersectDepth / 2 + 2,
+ z: 0.11
+ });
cw3.setAttribute('rotation', { x: 0, y: 0, z: 90 });
- cw3.setAttribute('scale', { y: intersectWidth / 12 });
+ cw3.setAttribute('scale', { x: 1, y: intersectWidth / 12, z: 1 });
cw3.setAttribute('mixin', 'markings crosswalk-zebra');
cw3.setAttribute('data-layer-name', 'Crosswalk • Zebra (Continental)');
cw3.classList.add('autocreated');
@@ -377,10 +389,14 @@ AFRAME.registerComponent('intersection', {
}
if (crosswalklArray[3]) {
const cw4 = document.createElement('a-entity');
- cw4.setAttribute('position', { y: intersectDepth / 2 - 2, z: 0.11 });
+ cw4.setAttribute('position', {
+ x: 0,
+ y: intersectDepth / 2 - 2,
+ z: 0.11
+ });
cw4.setAttribute('data-layer-name', 'Crosswalk • Zebra (Continental)');
cw4.setAttribute('rotation', { x: 0, y: 0, z: 90 });
- cw4.setAttribute('scale', { y: intersectWidth / 12 });
+ cw4.setAttribute('scale', { x: 1, y: intersectWidth / 12, z: 1 });
cw4.setAttribute('mixin', 'markings crosswalk-zebra');
cw4.classList.add('autocreated');
el.appendChild(cw4);
diff --git a/src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx b/src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx
index beb7cd9e..b4c4fde2 100644
--- a/src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx
+++ b/src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx
@@ -173,7 +173,7 @@ const createEntity = (mixinId) => {
const segmentElevationPosY = getSegmentElevationPosY(ancestorEl);
// set position y by elevation level of segment
if (customGroupCreated) {
- customGroupEl.setAttribute('position', { y: segmentElevationPosY });
+ customGroupEl.object3D.position.setY(segmentElevationPosY);
newEntityObject.components.position = { x: 0, y: 0, z: 0 };
} else {
newEntityObject.components.position = {