aframe.js How to change shape center position?(pivot) - three.js

Question

https://glitch.com/edit/#!/copper-past-property?path=index.html%3A13%3A76
under picture's pivot position is center
i want to pivot position to bottom center like under image.
i update example. https://glitch.com/edit/#!/copper-past-property?path=viewport.js%3A127%3A39
I want to move and resize a shape relative to the bottom, just like a 3d object.

Answer 1

In general, the easiest way to add an offset / pivot is by using a parent-child relation:
insert your object inside any parent entity
set the parents position where want your object (plus the pivot position)
move the child in the opposite direction of where the pivot should be (so pivot * -1)
perform any operations on the parent entity
For example a box at 0 0.5 -3 with a pivot at 0 -0.5 0:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<!-- The sphere is the parent entity -->
<a-sphere position="0 0 -3" radius="0.1" color="blue"
animation="property: rotation; to: 360 0; loop: true; dur: 5000">
<!--- The original, but now off-centered box --->
<a-box position="0 0.5 0" material="wireframe:true; color: #aa00ff"></a-box>
</a-sphere>
<!--- axis --->
<a-box position="0 0 -3" scale="5 0.05 0.05" color="red"></a-box>
</a-scene>
Your case is quite specific, as you want a pivot for the TransformControls.
One way would be to apply a pivot where they are attached (viewport.js).
The entities could have a component defining a pivot point:
AFRAME.registerComponent("editor-config", {
schema: {
offset: {type: "vec3", default: {x: 0, y: 0, z: 0}}
},
init: function() {
// once the entity is loaded
this.el.addEventListener("loaded", evt => {
// save the offset within the THREE.Object3D
const mesh = this.el.getObject3D("mesh")
if (!mesh.userData) mesh.userData = {}
mesh.userData.editoroffset = this.data.offset
})
}
});
// <a-box position="-1 0.5 -3" editor-config="offset: 0 -0.5 0"></a-box>
Then when the TransformControls are attached - you can apply the pivot:
/*** setSelectEntity(entity) within viewport.js ***/
this.transformControls.attach(entity);
// reset the position
this.transformControls.position.multiplyScalar(0);
// if there is an offset to apply - use it
if (entity.userData && entity.userData.editoroffset)
this.transformControls.position.copy(entity.userData.editoroffset)
Check it out in this glitch