87 lines
2.6 KiB
Vue
87 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue';
|
|
import { Object3D, Vector3 } from 'three';
|
|
import { TresCanvas, useRenderLoop } from '@tresjs/core';
|
|
import { vLightHelper } from '@tresjs/core'
|
|
import { CameraControls, GlobalAudio, useGLTF, useProgress } from '@tresjs/cientos'
|
|
|
|
const minPan = new Vector3(-10, 1, -5);
|
|
const maxPan = new Vector3(5, 1, 5);
|
|
const _v = new Vector3();
|
|
|
|
const onChange = (e: any) => {
|
|
_v.copy(e._target);
|
|
e._target.clamp(minPan, maxPan);
|
|
_v.sub(e._target);
|
|
e._camera.position.sub(_v);
|
|
}
|
|
|
|
const cameraPosition = [-6, 4, 25] as unknown as Vector3
|
|
|
|
const controlsState = reactive({
|
|
minDistance: 5,
|
|
maxDistance: 30,
|
|
maxPolarAngle: (Math.PI / 2) - 0.02,
|
|
maxZoom: 1,
|
|
minZoom: 1,
|
|
})
|
|
|
|
const { hasFinishLoading, progress } = await useProgress()
|
|
const { scene: spot_light } = await useGLTF('/Spot_light.glb')
|
|
const spot_light_item = spot_light.children[0]
|
|
const spot_light_target = ref()
|
|
|
|
const target = new Object3D()
|
|
target.translateX(-10)
|
|
target.translateZ(10)
|
|
target.translateY(0)
|
|
|
|
const { onLoop } = useRenderLoop()
|
|
let step = 0.05
|
|
onLoop(() => {
|
|
if (spot_light_target.value) {
|
|
const px = spot_light_target.value.position.x
|
|
if (px >= 10) {
|
|
step = -0.05
|
|
} else if (px <= -10) {
|
|
step = 0.05
|
|
}
|
|
spot_light_target.value.translateX(step)
|
|
}
|
|
})
|
|
</script>
|
|
<template>
|
|
<div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
|
|
Загрузка {{ progress }}%
|
|
</div>
|
|
<div :class="[{ 'invisible': !hasFinishLoading }]">
|
|
<TresCanvas window-size alpha shadows clear-color="#87ceeb">
|
|
<TresPerspectiveCamera :position="cameraPosition" />
|
|
<CameraControls v-bind="controlsState" @change="onChange" make-default />
|
|
|
|
<!-- <TresGridHelper :args="[50, 50]" /> -->
|
|
<Suspense>
|
|
<Models />
|
|
</Suspense>
|
|
<TresObject3D ref="spot_light_target" :position="[10, 1, 10]"></TresObject3D>
|
|
<TresSpotLight :position="spot_light_item.position" color="pink" :angle="spot_light_item.angle"
|
|
:penumbra="spot_light_item.penumbra" :target="spot_light_target || target" :intensity="500"
|
|
cast-shadow />
|
|
<!-- <TresDirectionalLight :position="lightPosition" :intensity="10" cast-shadow /> -->
|
|
<TresAmbientLight :intensity="1" />
|
|
</TresCanvas>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.invisible {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.loader {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 2rem;
|
|
min-height: 100vh;
|
|
}
|
|
</style> |