ksenia_mikhailova
/
demo-int-table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bx-865-apps #1

Merged
ksenia_mikhailova merged 140 commits from bx-865-apps into main 2024-06-27 15:03:27 +03:00
Conversation 0 Commits 140 Files Changed 295 +9 -9
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 72b62896de - Show all commits

18
front/src/components/Promo/main.vue
View File

@ -1,18 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { CameraControls, FBXModel, PositionalAudio, useGLTF, useProgress } from '@tresjs/cientos' import { shallowRef } from 'vue';
import { TresCanvas, useRenderLoop } from '@tresjs/core'; import { CameraControls, FBXModel, GLTFModel, PositionalAudio, useGLTF, useProgress } from '@tresjs/cientos'
import { TresCanvas, useLoader, useRenderLoop } from '@tresjs/core';
import { Vector3 } from 'three'; import { Vector3 } from 'three';
import { GLTFLoader } from 'three/examples/jsm/Addons.js';
import { onMounted, onUnmounted, reactive, ref } from 'vue'; import { onMounted, onUnmounted, reactive, ref } from 'vue';
import modelUrl from '../../assets/promo/models/sea_fbx/source/Stronghold.fbx' import modelUrl from '../../assets/promo/models/sea_fbx/source/Stronghold.fbx'
import duckUrl from '../../assets/promo/models/rubber_duck (1)/scene.gltf' import duckUrl from '../../assets/promo/models/rubber_duck (1)/scene.gltf'
import audioUrl from '../../assets/promo/sounds/sea.ogg' import audioUrl from '../../assets/promo/sounds/sea.ogg'
import { shallowRef } from 'vue';
const router = useRouter() const router = useRouter()
const minPan = new Vector3(-210, 0, -80); const minPan = new Vector3(-210, 0, -80);
const maxPan = new Vector3(210, 0, 100); const maxPan = new Vector3(210, 0, 100);
const _v = new Vector3(); const _v = new Vector3();
@ -45,8 +44,8 @@ onUnmounted(() => {
const ducks: any[] = [] const ducks: any[] = []
const ducksRef: any[] = [] const ducksRef: any[] = []
for (let index = 0; index < 4; index++) { for (let index = 0; index < 4; index++) {
const { scene } = await useGLTF(duckUrl) // const { scene } = await useLoader(GLTFLoader, duckUrl)
ducks.push(scene) // ducks.push(scene)
ducksRef.push(ref()) ducksRef.push(ref())
} }
const { onLoop } = useRenderLoop() const { onLoop } = useRenderLoop()
@ -55,7 +54,7 @@ onLoop(() => {
for (let index = 0; index < ducksRef.length; index++) { for (let index = 0; index < ducksRef.length; index++) {
const element = ducksRef[index]; const element = ducksRef[index];
if (element.value) { if (element.value) {
element.value[0].rotation.y += 0.01 element.value[0].rotation.y += 0.01 * index
} }
} }
}) })
@ -83,7 +82,8 @@ onLoop(() => {
<Suspense> <Suspense>
<TresMesh :position-x="[1, 3].includes(i) ? -300 : 300" :position-z="100 * i" <TresMesh :position-x="[1, 3].includes(i) ? -300 : 300" :position-z="100 * i"
@click="() => console.log('click on duck')" :ref="ducksRef[i]" cast-shadow> @click="() => console.log('click on duck')" :ref="ducksRef[i]" cast-shadow>
<primitive :object="ducks[i - 1]" :scale="40"></primitive> <TresBoxGeometry :args="[100, 100, 100]" />
<TresMeshBasicMaterial color="red" />
</TresMesh> </TresMesh>
</Suspense> </Suspense>
</template> </template>