Cant change material on GLB via code

šŸ§‘ā€šŸ’» Technical Support
,
1

Hello, Iā€™ve followed the animated material templateā€™s method of applying animated materials to models in Niantic Studio. Unfortunately I havenā€™t had any success getting it working. The shader works fine when applied to a primitive, but the same is not true for a GLB. Does anyone happen to know what Iā€™m doing wrong?

Iā€™m just trying to tile a material, and using ecs.Material.set to set the offset property doesnā€™t work. When I change the offset on the material on the GLB, that reverts to 0. Iā€™ve tried importing a GLB WITHOUT a material as well and thereā€™s no difference in behaviour.

Cheers

import * as ecs from ā€˜@8thwall/ecsā€™

const {THREE} = window as any

let material = null

ecs.registerComponent({
name: ā€˜scrolling-textureā€™,
schema: {},
schemaDefaults: {},
data: {
time: ecs.f32,
},
add: (world, component) => {
ecs.Material.remove(world, component.eid)
const object = world.three.entityToObject.get(component.eid)

const texture = new THREE.TextureLoader().load(
  `${require('./assets/ballTexture1.png')}`,
  (tex) => {
    console.log('Texture loaded successfully:', tex)
  },
  undefined,
  (err) => {
    console.error('Error loading texture:', err)
  }
)

texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.RepeatWrapping

material = new THREE.ShaderMaterial({
  uniforms: {
    time: {value: 0},
    texture1: {value: texture},
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform float time;
    uniform sampler2D texture1;
    varying vec2 vUv;
    void main() {
      vec2 uv = vUv;
      uv.x += time * 0.1; // Scroll horizontally
      gl_FragColor = texture2D(texture1, uv);
    }
  `,
})

object.material = material
object.traverse((node) => {
  if (node.isMesh) {
    console.log('Applying material to mesh:', node.name || 'unnamed mesh')
    node.material = material
  }
})

},
tick: (world, component) => {
material.uniforms.time.value = world.time.elapsed * 0.001
},
remove: (world, component) => {},
})

2

You need to wait for the model to be fully loaded before traversing it.