This is a A-Frame component which allows to manipulate GLTF/GLB file. In particular it demonstrates the possibility editing position, rotation, scale, visibility, material color and texture of individual nodes.
In order to use the component one attach "gltf-manipulator" to an entity. The component has the following attributes:
- nodeNumber: { type: 'int', default: 1 } - the number of nodes of a GLTF/GLB file to be edited. All other attributes are dependent on it, i.e. if 2 is indicated, then the rest of attributes should have by 2 values.
- nodeName: { type: 'array', default: [] } - the name of individual node(s) in a GLTF/GLB file. It is different from node material name. Accepts array of strings. They could be seen in Blender before exporting GLTF file (or alternatively they can be console.logged).
- nodePosition: { type: 'array', default: [] } - position of individual node(s) in a GLTF/GLB file. Accepts array of x y z values.
- nodeRotation: { type: 'array', default: [] } - rotation of individual node(s) in a GLTF/GLB file. Accepts array of x y z values.
- nodeScale: { type: 'array', default: [] } - scale of individual node(s) in a GLTF/GLB file. Accepts array of x y z values.
- nodeVisibility: { type: 'array', default: [] } - visibility of individual node(s) in a GLTF/GLB file. Accepts array of boolean values
- nodeMaterialName: { type: 'array', default: [] } - the name(s) of individual node material(s) in a GLTF/GLB file. It is different from node name. Accepts array of strings. They could be seen in Blender before exporting GLTF file (or alternatively they can be console.logged).
- nodeTextureURL: { type: 'array', default: [] } - the URL(s) to individual node texture(s) to be added to a GLTF/GLB file. Accepts array of strings.
- nodeColor: { type: 'array', default: [] } - color(s) of individual node(s). Accepts array of HEX values.
If attributes are indicated inline, they will be loaded as soon as a-frame is loaded. To make more precise changes it is possible to combine it with the following function:
updateNodeFunction(nodeName, textureURL, position, rotation, scale, color, visibility);
The code below shows the sample implementation of the compoent. Initially major edits are done inline to GLTF file, then individual changes are done through button click event:
<html>
<head>
<title>A-Frame Component: GLTF Manipulator</title>
<script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
<script src="js/gltf-manipulator-component.js"></script>
</head>
<body>
<a-scene>
<a-entity gltf-manipulator="
nodeNumber: 2;
nodeName: Circle003_drum_paint_0, Cube004_drum_defaultCol_0;
nodePosition: 0 0 0, 0 0 0;
nodeRotation: 90 0 0, 0 0 0;
nodeScale: 1 1 1, 1 1 1;
nodeVisibility: true, true;
nodeMaterialName: drum_paint, raccoon_paint;
nodeTextureURL: ;
nodeColor: "
id="model"
position="0 1 -3"
scale="0.2 0.2 0.2"
gltf-model="url(model/raccoon.glb)"
animation-mixer>
</a-entity>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
<script>
// Update individual nodes
document.querySelector('a-scene').addEventListener('loaded', function () {
document.querySelector('#myButton').addEventListener('click', () => {
updateNodeFunction(
'drum_paint', // node name
'model/drum.png', // textureURL
'0 -4 1', // position
'0 0 0', // rotation
'1 1 1', // scale
'#ffffff', // color
true // visibility
);
updateNodeFunction(
'raccoon_paint', // node name
'model/raccoon.png', // textureURL
'0 1 1', // position
'0 0 0', // rotation
'1 1 1', // scale
'#ffffff', // color
true // visibility
);
});
})
</script>
</body>
</html>
The project is powered by AFrame and Three.js. 3D model of raccoon was created by Hiu Kim and was taken from MindAr.js repository.
See demo of the component here: Demo