A-Frame-Component-GLTF-Manipulator

Description / Rationale

This is an A-Frame component which allows to manipulate GLTF/GLB file. In particular it demonstrates the possibility of editing position, rotation, scale, visibility, material color and texture of individual nodes.

Instructions

In order to use the component attach "gltf-manipulator" to A-frame 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 attributes below should have by 2 values at least).
nodeName: { type: 'array', default: [] } - the name of individual node(s) in a GLTF/GLB file. It is different from node material name. It accepts array of strings.
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 accepts array of strings.
nodeTextureURL: { type: 'array', default: [] } - the URL(s) to individual node texture(s) to be added to a GLTF/GLB file. It accepts array of strings.
nodeColor: { type: 'array', default: [] } - color(s) of individual node(s). It 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 the component 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 to a 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/c-frame/[email protected]/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>

Tech Stack

The project is powered by AFrame and Three.js. 3D model of raccoon was created by Hiu Kim and taken from MindAr.js repository.

Demo

See demo of the component here: Demo

Alternative API with multiple components

Thanks for sharing this example.
I did something similar in a project to override some material properties only, but using multiple components. Like this:

AFRAME.registerComponent("material-values", {
  multiple: true,
  schema: {
    materialName: { type: "string", default: "" },
    color: { type: "color", default: "" },
    map: { type: "string", default: "" },
    metalness: { type: "number", default: -1, min: 0, max: 1 },
    roughness: { type: "number", default: -1, min: 0, max: 1 },
    opacity: { type: "number", default: 1, min: 0, max: 1 }
  },

  events: {
    "model-loaded": function () {
      this.update();
    },
  },

  init() {
    this.rendererSystem = this.el.sceneEl.systems.renderer;
  },

  update: function () {
    const mesh = this.el.getObject3D("mesh");
    if (!mesh) return;

    const materialName = this.data.materialName;
    const color = this.data.color;
    const map = this.data.map;
    const metalness = this.data.metalness;
    const roughness = this.data.roughness;
    const opacity = this.data.opacity;
    mesh.traverse((node) => {
      if (node.material && node.material.name === materialName) {
        if (color !== "") {
          node.material.color.set(color);
          // The following line calls node.material.color.convertSRGBToLinear() when <a-scene renderer="colorManagement:true">
          this.rendererSystem.applyColorCorrection(node.material.color);
        } else {
          this.data.color = "#" + node.material.color.getHexString();
        }

        if (metalness !== -1) {
          node.material.metalness = metalness;
        } else {
          this.data.metalness = node.material.metalness;
        }

        if (roughness !== -1) {
          node.material.roughness = roughness;
        } else {
          this.data.roughness = node.material.roughness;
        }

        if (map) {
          const imageSrc = map;
          const loader = new THREE.TextureLoader();
          loader.load(
            imageSrc,
            function (texture) {
              if (node.material.map) {
                texture.encoding = node.material.map.encoding;
                texture.flipY = node.material.map.flipY;
                texture.offset.copy(node.material.map.offset);
                texture.repeat.copy(node.material.map.repeat);
                texture.wrapS = node.material.map.wrapS;
                texture.wrapT = node.material.map.wrapT;
                node.material.map.dispose();
              }
              node.material.map = texture;
              texture.needsUpdate = true;
              node.material.needsUpdate = true;
            },
            undefined,
            function () {
              console.error(`Error loading ${imageSrc}`);
            }
          );
        }
        node.material.opacity = opacity;
        node.material.transparent = opacity < 1;
        node.material.needsUpdate = true;
      }
    });
  },
});

and using it like this:

<a-entity
  material-values__glass="materialName:glass;metalness:0.882;roughness:0.055;opacity:0.9"
  material-values__body="materialName:body_color;color:#ad050f;metalness:0.85;roughness:0.25"
  gltf-model="car.glb"
></a-entity>

If I don't specify a property, for example roughness, it defaults to -1, and I don't set it.
Also this way you can use the inspector and have a color picker to change the color.

akbartus / a-frame-component-gltf-manipulator Goto Github PK