Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta name="description" content="Modifying a named object within 1 glTF file">
  <title>Modifying a named object within 1 glTF file</title>
    <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
    <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.10.0/dist/aframe-extras.min.js"></script>
  </head>
  <body>
<script>
AFRAME.registerComponent('select', {
  schema: {default: "Suzanne"},
  init: function () {
    var self = this
    console.log(this.data)
    this.el.addEventListener('model-loaded', () => {         
      self.el.object3D.traverse( (c) => {      
        if (c.type == "Mesh" && c.name.length){
          if (c.name == this.data){
            console.log(c)
            c.material.color = {r:255, g:0, b:0}
            setInterval( () => { c.rotation.y += 1 }, 100)
            // animation just used as a visible example
          }
        }
      }) // traversing
    }) // model-loaded event
  } // init
}) // comp reg
  
​
</script>
<a-scene debug>
  <a-assets>
    <a-asset-item id="tree" src="https://vatelier.net/MyDemo/MultipleObjectsWithShaders/MultipleObjectsWithShaders.gltf"></a-asset-item>
  </a-assets>
  <a-sky color="#CCC"></a-sky>
  <a-entity select="Suzanne" id="mesh" gltf-model-next="#tree" position="0 1 -6">
    <!-- change select="Cube" to color and spin it instead -->
      <a-text position="-2.5 2 2" value="Modifying a named object within 1 glTF file"></a-text>
      <a-text position="-2.5 -1.5 1" value="(Both objects are initially grey and static)"></a-text>
    </a-entity>
</a-scene>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Utopiahpro
0viewers