rotate

front/src/components/Promo/load_models.vue

@@ -7,7 +7,7 @@ import {
     PlaneGeometry, SpriteMaterial, TextureLoader, Vector2, Vector3,
 } from 'three';
 
-import { useTresContext, useSeek, useRenderLoop, useTexture } from '@tresjs/core';
+import { useTresContext, useSeek, useRenderLoop, useTexture, useLoop } from '@tresjs/core';
 import { useGLTF } from '@tresjs/cientos'
 
 import Env from './env.vue'
@@ -36,14 +36,15 @@ const envVars = reactive({}) as {
     env_normalmap?: string
 }
 
-
 const groundTexture = await useTexture({
     displacementMap: '/ground_displacement.jpg',
 })
 
-// renderer.value.capabilities.maxTextures = 4
+const timer = ref(10)
-// renderer.value.capabilities.maxTextureSize = 512
+
-// renderer.value.capabilities.precision = 'lowp'
+renderer.value.capabilities.maxTextures = 4
+renderer.value.capabilities.maxTextureSize = 512
+renderer.value.capabilities.precision = 'lowp'
 
 const loadModels = async () => {
     const res = await fetch(`${SERVER_URL}/api/obj/scene/${props.source}`)
@@ -182,16 +183,50 @@ const loadModels = async () => {
 
     controls.value.enabled = true;
     props.loaded(false)
+
+    timer.value = 10
+    setInterval(() => {
+        if (timer.value > 0) {
+            timer.value -= 1
+        }
+    }, 1000)
 }
 
 const { onLoop } = useRenderLoop()
 onLoop(() => {
     clickable_refs.value.map(el => {
         if (el.value[0] && typeof el.value[0].lookAt == 'function') {
-            el.value[0].lookAt(camera.value?.position)
+            el.value[0].lookAt(camera.value?.position);
         }
     })
 })
+const { onBeforeRender, pause, resume } = useLoop()
+let direction = 'plus'
+onBeforeRender(() => {
+    if (camera.value?.rotation) {
+        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)
+        }
+    }
+})
 
 const openSidebar = (id: number) => {
     const target = clickable.value.find(el => el.id == id)
@@ -227,6 +262,7 @@ onMounted(() => {
 onUnmounted(() => { document.removeEventListener('click', clickEvent) })
 const pointer = reactive({ x: 0, y: 0 })
 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