spot light

This commit is contained in:
Kseninia Mikhaylova 2024-06-03 10:13:13 +03:00
parent dd1599e082
commit 262a94d1a9
2 changed files with 8 additions and 4 deletions

View File

@ -2,10 +2,10 @@
import { reactive } from 'vue'; import { reactive } from 'vue';
import { Vector3 } from 'three'; import { Vector3 } from 'three';
import { TresCanvas } from '@tresjs/core'; import { TresCanvas } from '@tresjs/core';
import { CameraControls, useProgress } from '@tresjs/cientos' import { vLightHelper } from '@tresjs/core'
import { CameraControls, useGLTF, useProgress } from '@tresjs/cientos'
import sunset from '../../assets/promo/models/sunset.hdr' import sunset from '../../assets/promo/models/sunset.hdr'
console.log(sunset)
const minPan = new Vector3(-10, 1, -5); const minPan = new Vector3(-10, 1, -5);
const maxPan = new Vector3(5, 1, 5); const maxPan = new Vector3(5, 1, 5);
@ -31,7 +31,8 @@ const controlsState = reactive({
const { hasFinishLoading, progress } = await useProgress() const { hasFinishLoading, progress } = await useProgress()
const { scene: spot_light } = await useGLTF('/Spot_light.glb')
const spot_light_item = spot_light.children[0]
</script> </script>
<template> <template>
<div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']"> <div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
@ -46,6 +47,9 @@ const { hasFinishLoading, progress } = await useProgress()
<Suspense> <Suspense>
<Models /> <Models />
</Suspense> </Suspense>
<TresSpotLight :position="spot_light_item.position"
:color="spot_light_item.color" :angle="spot_light_item.angle" :penumbra="spot_light_item.penumbra"
:intensity="spot_light_item.intensity" cast-shadow v-light-helper />
<!-- <TresDirectionalLight :position="lightPosition" :intensity="10" cast-shadow /> --> <!-- <TresDirectionalLight :position="lightPosition" :intensity="10" cast-shadow /> -->
<!-- <TresAmbientLight /> --> <!-- <TresAmbientLight /> -->
</TresCanvas> </TresCanvas>

View File

@ -59,7 +59,7 @@ normalMap.repeat.y = repeat
<ModelItem modelUrl="/Pillar.glb" /> <ModelItem modelUrl="/Pillar.glb" />
<ModelItem modelUrl="/Pointer.glb" /> <ModelItem modelUrl="/Pointer.glb" />
<ModelItem modelUrl="/Quad.glb" /> <ModelItem modelUrl="/Quad.glb" />
<ModelItem modelUrl="/Spot_light.glb" /> <!-- <ModelItem modelUrl="/Spot_light.glb" /> -->
<ModelItem modelUrl="/Walkway.glb" /> <ModelItem modelUrl="/Walkway.glb" />
<!-- <primitive :object="groundModel" /> --> <!-- <primitive :object="groundModel" /> -->