front/src/components/Promo/load_models.vue

@@ -42,7 +42,7 @@ const groundTexture = await useTexture({
 
 const timer = ref(10)
 
-renderer.value.capabilities.maxTextures = 4
+// renderer.value.capabilities.maxTextures = 4
 renderer.value.capabilities.maxTextureSize = 512
 renderer.value.capabilities.precision = 'lowp'
 
@@ -188,44 +188,28 @@ const loadModels = async () => {
     setInterval(() => {
         if (timer.value > 0) {
             timer.value -= 1
+        } else if (timer.value == 0 && !controls.value.autoRotate) {
+            camera.value?.position.set(
+                controls.value.minDistance * 0.5,
+                controls.value.minDistance * 0.5,
+                controls.value.minDistance
+            );
+            (controls.value as any).autoRotate = true;
+            (controls.value as any).autoRotateSpeed = 1;
         }
     }, 1000)
 }
 
-const { onLoop } = useRenderLoop()
-onLoop(() => {
+const { onAfterRender } = useLoop()
+onAfterRender(() => {
     clickable_refs.value.map(el => {
         if (el.value[0] && typeof el.value[0].lookAt == 'function') {
             el.value[0].lookAt(camera.value?.position);
         }
     })
-})
-const { onBeforeRender, pause, resume } = useLoop()
-let direction = 'plus'
-onBeforeRender(() => {
-    if (camera.value?.rotation) {
+    if (controls.value) {
         if (timer.value == 0) {
-            pause()
-            const v = Math.PI * 0.001
-            if (camera.value.rotation.x > Math.PI * 0.5 && direction == 'plus') {
-                direction = 'minus'
-            } else if (camera.value.rotation.x < Math.PI * -0.5 && direction == 'minus') {
-                direction = 'plus'
-            }
-            if (direction == 'plus') {
-                camera.value.rotation.x += v
-                camera.value.rotation.y += v
-                camera.value.rotation.z += v
-            } else {
-                camera.value.rotation.x -= v
-                camera.value.rotation.y -= v
-                camera.value.rotation.z -= v
-            }
-            setTimeout(() => {
-                resume()
-            }, 5)
-        } else {
-            resume()
+            (controls.value as any).update();
         }
     }
 })
@@ -257,14 +241,25 @@ watch(() => props.source, () => {
 
 onMounted(() => {
     document.addEventListener('click', clickEvent)
+    document.addEventListener('click', stopTimer)
+    document.addEventListener('touchstart', stopTimer)
     if (sidebar.is_open) {
         sidebar.close()
     }
 })
-onUnmounted(() => { document.removeEventListener('click', clickEvent) })
+onUnmounted(() => {
+    document.removeEventListener('click', clickEvent)
+    document.removeEventListener('click', stopTimer)
+    document.removeEventListener('touchstart', stopTimer)
+})
 const pointer = reactive({ x: 0, y: 0 })
+const stopTimer = () => {
+    timer.value = 10;
+    if (controls.value.autoRotate) {
+        controls.value.autoRotate = false;
+    }
+}
 const clickEvent = (event: MouseEvent) => {
-    timer.value = 10
     const x = (event.clientX / window.innerWidth) * 2 - 1
     const y = - (event.clientY / window.innerHeight) * 2 + 1
     if (x == pointer.x && y == pointer.y) return