From 1552b2eb6286f959900257b7601656f60de35acb Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Thu, 5 Sep 2024 11:54:05 +0200 Subject: [PATCH 1/2] update to aframe master build (post 1.6.0, three r167) to fix undo material src (fix #840) --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 094b014f..4ef5ea00 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + From 30c77129cb7dbc3840d5d1eabcfa0f3be40360b6 Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Sun, 8 Sep 2024 11:31:10 +0200 Subject: [PATCH 2/2] use full xyz object or position.setX/setY/setZ api --- src/aframe-streetmix-parsers.js | 41 ++++++++++--------- src/components/intersection.js | 32 +++++++++++---- .../AddLayerPanel/AddLayerPanel.component.jsx | 2 +- 3 files changed, 47 insertions(+), 28 deletions(-) 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 = {