<title>A-Frame Undo/Redo/Delete Example</title>
<style>
.ui-button {
position: absolute;
padding: 10px 20px;
background: #333;
color: #fff;
border: none;
cursor: pointer;
font-size: 18px;
}
.ui-button:hover {
background: #555;
}
#delete-button {
top: 20px;
left: 20px;
}
#undo-button {
top: 20px;
left: 100px;
}
#redo-button {
top: 20px;
left: 180px;
}
</style>
<a-scene progressive-controls>
<a-asset-item id="anotherchair" src="https://cdn.glitch.global/3c9342e0-0b69-45d0-b7e8-6f2e8cb53f2c/Chair.glb?v=1719489270451"></a-asset-item>
<a-asset-item id="chair" src="https://cdn.glitch.global/3c9342e0-0b69-45d0-b7e8-6f2e8cb53f2c/Chair.glb?v=1719489270451"></a-asset-item>
<a-asset-item id="sofa" src="https://cdn.glitch.global/3c9342e0-0b69-45d0-b7e8-6f2e8cb53f2c/Sofa.glb?v=1719489265917"></a-asset-item>
<a-entity gltf-model="#anotherchair" class="clickable" position="-4 1 -3" grabbable></a-entity>
<a-entity gltf-model="#chair" class="clickable" position="-2 1 -3" grabbable></a-entity>
<a-entity gltf-model="#sofa" class="clickable" position="-6 1 -3" grabbable></a-entity>
<a-camera position="0 1.6 0">
<a-cursor></a-cursor>
</a-camera>
</a-scene>
<button id="delete-button" class="ui-button">Delete</button>
<button id="undo-button" class="ui-button">Undo</button>
<button id="redo-button" class="ui-button">Redo</button>
<script>
let actionHistory = [];
let redoStack = [];
let selectedEntity = null;
const scene = document.querySelector('a-scene');
// Serialize entity data including all necessary attributes
function serializeEntity(entity) {
const attributes = {};
['position', 'rotation'].forEach(attr => {
const value = entity.getAttribute(attr);
if (value) {
attributes[attr] = value;
}
});
return {
id: entity.getAttribute('id'),
type: entity.tagName.toLowerCase(),
attributes: attributes
};
}
// Create an entity from serialized data
function createEntityFromData(data) {
const entity = document.createElement(data.type);
entity.setAttribute('id', data.id);
Object.keys(data.attributes).forEach(attr => {
entity.setAttribute(attr, data.attributes[attr]);
});
return entity;
}
// Handle deletion and store the state for undo
function deleteEntity(entity) {
const data = serializeEntity(entity);
//data = position, rotation of entity add
actionHistory.push({ action: 'delete', data: data });
redoStack = []; // Clear redo stack on new action
entity.parentNode.removeChild(entity);
selectedEntity = null; // Clear selected entity after deletion
}
// Handle undo operation
function undo() {
if (actionHistory.length === 0) return;
const lastAction = actionHistory.pop();
redoStack.push(lastAction);
if (lastAction.action === 'delete') {
const restoredEntity = createEntityFromData(lastAction.data);
scene.appendChild(restoredEntity);
//restoreEntity . position, rotation
restoredEntity.addEventListener('click', () => selectEntity(restoredEntity));
}
}
// Handle redo operation
function redo() {
if (redoStack.length === 0) return;
const lastRedo = redoStack.pop();
actionHistory.push(lastRedo);
if (lastRedo.action === 'delete') {
const entity = scene.querySelector( lastRedo.data.id);
if (entity) {
entity.parentNode.removeChild(entity);
}
}
}
// Select an entity
function selectEntity(entity) {
selectedEntity = entity;
}
// Attach click event to all clickable entities
document.querySelectorAll('.clickable').forEach((entity) => {
entity.addEventListener('click', () => selectEntity(entity));
});
// Bind UI buttons for delete, undo, and redo
document.getElementById('delete-button').addEventListener('click', () => {
if (selectedEntity) deleteEntity(selectedEntity);
});
document.getElementById('undo-button').addEventListener('click', undo);
document.getElementById('redo-button').addEventListener('click', redo);
</script>
Here is the code what i have tried and deleting is working fine but when i am clicking on undo it is placing at some other place.
I want to place the object at initial plosition
Initial Image before delete and undo
after deleting and undoing it is placing in different position
I need to fix this issue
I am working on webxr for learning i need to add undo and redo functionality so anyone please help me to fix it.
it is placing in differenct position from initial position it placing at position= {0, 0 ,0}, and rotation= {0, 0 ,0}
BEFORE RUNNING ABOVE FILE
PLEASE ADD THESE SCRIPTS IN HEAD TAG