bx-865-apps #1
|
@ -29,7 +29,6 @@ const controlsState = reactive({
|
||||||
const { hasFinishLoading, progress } = await useProgress()
|
const { hasFinishLoading, progress } = await useProgress()
|
||||||
const { scene: spot_light } = await useGLTF('/Spot_light.glb')
|
const { scene: spot_light } = await useGLTF('/Spot_light.glb')
|
||||||
const spot_light_item = spot_light.children[0]
|
const spot_light_item = spot_light.children[0]
|
||||||
const spot_light_ref = ref()
|
|
||||||
const spot_light_target = ref()
|
const spot_light_target = ref()
|
||||||
|
|
||||||
const target = new Object3D()
|
const target = new Object3D()
|
||||||
|
@ -49,10 +48,8 @@ onLoop(({ elapsed }) => {
|
||||||
direction = 0.05
|
direction = 0.05
|
||||||
}
|
}
|
||||||
spot_light_target.value.translateX(direction)
|
spot_light_target.value.translateX(direction)
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
console.log(spot_light_target.value)
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
|
<div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
|
||||||
|
@ -69,8 +66,8 @@ console.log(spot_light_target.value)
|
||||||
</Suspense>
|
</Suspense>
|
||||||
<TresObject3D ref="spot_light_target" :position="[10, 1, 10]"></TresObject3D>
|
<TresObject3D ref="spot_light_target" :position="[10, 1, 10]"></TresObject3D>
|
||||||
<TresSpotLight :position="spot_light_item.position" color="pink" :angle="spot_light_item.angle"
|
<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
|
:penumbra="spot_light_item.penumbra" :target="spot_light_target || target" :intensity="500"
|
||||||
ref="spot_light_ref" />
|
cast-shadow />
|
||||||
<!-- <TresDirectionalLight :position="lightPosition" :intensity="10" cast-shadow /> -->
|
<!-- <TresDirectionalLight :position="lightPosition" :intensity="10" cast-shadow /> -->
|
||||||
<TresAmbientLight :intensity="1" />
|
<TresAmbientLight :intensity="1" />
|
||||||
</TresCanvas>
|
</TresCanvas>
|
||||||
|
|
|
@ -19,12 +19,13 @@ const show_alert = () => {
|
||||||
}
|
}
|
||||||
scene.receiveShadow = true
|
scene.receiveShadow = true
|
||||||
scene.castShadow = true
|
scene.castShadow = true
|
||||||
|
console.log(scene, props.modelUrl)
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<TresGroup :posiion="[0, 0, 0]">
|
<TresGroup :posiion="[0, 0, 0]">
|
||||||
<TresMesh :position="center" @click="show_alert" :receive-shadow="true">
|
<TresMesh :position="center" @click="show_alert" receive-shadow cast-shadow>
|
||||||
<TresBoxGeometry :args="box_size" />
|
<TresBoxGeometry :args="box_size" />
|
||||||
<TresMeshBasicMaterial :opacity="0" color="pink" :transparent="true" />
|
<TresMeshPhysicalMaterial :opacity="0" color="pink" :transparent="true" />
|
||||||
</TresMesh>
|
</TresMesh>
|
||||||
<TresMesh>
|
<TresMesh>
|
||||||
<primitive :object="scene" />
|
<primitive :object="scene" />
|
||||||
|
|
|
@ -30,6 +30,7 @@ renderer.value.toneMapping = ACESFilmicToneMapping
|
||||||
renderer.value.toneMappingExposure = 0.15
|
renderer.value.toneMappingExposure = 0.15
|
||||||
renderer.value.shadowMap.enabled = true
|
renderer.value.shadowMap.enabled = true
|
||||||
|
|
||||||
|
console.log(renderer)
|
||||||
const repeat = 20
|
const repeat = 20
|
||||||
|
|
||||||
map.wrapS = RepeatWrapping
|
map.wrapS = RepeatWrapping
|
||||||
|
@ -48,13 +49,13 @@ normalMap.repeat.y = repeat
|
||||||
<Suspense>
|
<Suspense>
|
||||||
<Environment background :files="hdrmap" />
|
<Environment background :files="hdrmap" />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
<TresMesh :rotate-x="-Math.PI * 0.5">
|
<TresMesh :rotate-x="-Math.PI * 0.5" receive-shadow>
|
||||||
<TresPlaneGeometry :args="[repeat * 20, repeat * 20]" />
|
<TresPlaneGeometry :args="[repeat * 20, repeat * 20]" />
|
||||||
<TresMeshStandardMaterial :map="map" :normalMap="normalMap" />
|
<TresMeshStandardMaterial :map="map" :normalMap="normalMap" />
|
||||||
</TresMesh>
|
</TresMesh>
|
||||||
<ModelItem modelUrl="/Walkway.glb" />
|
<ModelItem modelUrl="/Walkway.glb" />
|
||||||
<ModelItem modelUrl="/Andrey.glb" />
|
<ModelItem modelUrl="/Andrey.glb" />
|
||||||
<ModelItem modelUrl="/Area_light.glb" />
|
<!-- <ModelItem modelUrl="/Area_light.glb" /> -->
|
||||||
<!-- <ModelItem modelUrl="/Ground.glb" /> -->
|
<!-- <ModelItem modelUrl="/Ground.glb" /> -->
|
||||||
<ModelItem modelUrl="/Mangal.glb" />
|
<ModelItem modelUrl="/Mangal.glb" />
|
||||||
<ModelItem modelUrl="/Pillar.glb" />
|
<ModelItem modelUrl="/Pillar.glb" />
|
||||||
|
|
Loading…
Reference in New Issue