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>
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