troisjs / trois

✨ ThreeJS + VueJS 3 + ViteJS ⚡

Home Page:https://troisjs.github.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Metalness => model.traverse is not a function

devbw opened this issue · comments

Hi !

I'm using this function in onReady function (put in @load on ):

const onReady = (model) => {
  const renderer = rendererC.value;

  model.traverse((o) => {
    if (o.isMesh){
      // handle both multiple and single materials
      const asArray = Array.isArray(o.material) ? o.material : [o.material]
      // 0 works for matte materials - change as needed
      asArray.forEach(mat => mat.metalness = 0)
    }
  })

  renderer.onBeforeRender(() => {
    model.scene.rotation.y = - config.rotationScrollX / 500;
  });
};

and the browser returns this error

model.traverse is not a function

And my template :

<template>
  <div>
    <Renderer ref="rendererC" antialias alpha width="500" height="500">
      <Camera :position="{ y: 0.5, z: 3 }" />
      <Scene>
        <PointLight color="#fff" :position="{ y: 1, z: 3 }" />
        <GltfModel src="/statue/scene.gltf" @load="onReady" />
      </Scene>
    </Renderer>
  </div>
</template>

Do you know why ?

Thanks a lot !

My dependencies :

  "devDependencies": {
    "nuxt": "3.0.0",
    "sass": "^1.56.1",
    "sass-loader": "^13.2.0"
  },
  "dependencies": {
    "three": "0.134",
    "troisjs": "^0.3.4"
  }

Found solution, I must point on model.scene to apply traverse method !