如何在 Vue 中使用 troisjs 循环 GlftModel

Question

Hey I want to Loop a 3D Model that I created but if i try to run this code it don't loop it only runs it once and then it stops and it returns no error. I hope you can help me

  <template>
  <Renderer ref="renderer" antialias orbit-ctrl resize="window">
      <Camera ref="cam" :position="{ z: 40, x: 3 }"></Camera>
      <Scene :background="'white'">
        <AmbientLight color="#808080"></AmbientLight>
        <PointLight color="#ffffff" :position="{ y: 50, z: 0 }"></PointLight>
        <PointLight color="#ffffff" :position="{ y: -50, z: 0 }"></PointLight>
        <PointLight color="#ffffff" :position="{ y: 0, z: 0 }"></PointLight>
        <GltfModel ref="model" :rotation="{ y: 0.2, x: 0.1, z: 1}" src="http://192.168.178.23:8080/car.gltf"/>
      </Scene>
  </Renderer>
</template>

<script>
import { Camera, PointLight, Renderer, Scene, GltfModel, AmbientLight   } from 'troisjs';
export default {
  name: 'Car',
  components: { Camera,  PointLight, Renderer, Scene, GltfModel, AmbientLight   },
  mounted() {
        const renderer = this.$refs.renderer
        const box = this.$refs.model
        renderer.onBeforeRender(() => {
          box.rotation.x += 0.01;
        });
      },
};
</script>

Answer 1

You could use .traverse or .traverseVisible making sure that the object is a Mesh.

renderer.onBeforeRender(() => {
  box.traverse((obj3D) => {
      if (obj3D instanceof Mesh) {
        // Make sure this object is a mesh.
        obj3D.rotation.x += 0.01;
      }
    })
});

Callback would be invoked in the current object ( box in this case) and all its descendants.

https://threejs.org/docs/index.html?q=object#api/en/core/Object3D.traverse