Skip to content

Commit

Permalink
chore(Lensflare): fix linter errors
Browse files Browse the repository at this point in the history
  • Loading branch information
@andretchen0
andretchen0 committed Sep 8, 2023
1 parent c439895 commit 59c4b7e
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 63 deletions.
135 changes: 76 additions & 59 deletions playground/src/pages/LensflareDemo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,8 @@ const rockMaterial = new MeshPhongMaterial({ color: 0x123141, specular: 0xffffff
const [seedRef, scaleRef] = useControls(
{
seed: { value: 847 },
scale: { value: 1, min: 0, max: 2, step: 0.01 }
});
scale: { value: 1, min: 0, max: 2, step: 0.01 },
})
{
const TEXTURE_PATH
Expand All @@ -81,68 +81,67 @@ const [seedRef, scaleRef] = useControls(
const rays6 = `${TEXTURE_PATH}rays6.png`
const ring = `${TEXTURE_PATH}ring.png`
const [oversizeSize, oversizeSizeRand, oversizeNumElements,
oversizeNumElementsRand, oversizeColorA, oversizeColorB, oversizeColorC, oversizeSeed] = useControls(
'Oversize',
{
size0: { value: 768, min: 0, max: 1024, step: 1 },
sizeRand0: { value: 512, min: 0, max: 1024, step: 1 },
count0: { value: 1, min: 0, max: 20, step: 1 },
countRand0: { value: 2, min: 0, max: 20, step: 1 },
colorA0: '#ffffff',
colorB0: '#ffffff',
colorC0: '#ffffff',
seed0: { value: 930104199, min: 0, max: 2 ** 31, step: 1 },
})
'Oversize',
{
size0: { value: 768, min: 0, max: 1024, step: 1 },
sizeRand0: { value: 512, min: 0, max: 1024, step: 1 },
count0: { value: 1, min: 0, max: 20, step: 1 },
countRand0: { value: 2, min: 0, max: 20, step: 1 },
colorA0: '#ffffff',
colorB0: '#ffffff',
colorC0: '#ffffff',
seed0: { value: 930104199, min: 0, max: 2 ** 31, step: 1 },
})
const [bodySize, bodySizeRand, bodyNumElements, bodyNumElementsRand,
bodyColorA, bodyColorB, bodyColorC, bodySeed] = useControls(
'Body',
{
size1: { value: 180, min: 0, max: 512, step: 1 },
sizeRand1: { value: 256, min: 0, max: 512, step: 1 },
count1: { value: 2, min: 0, max: 20, step: 1 },
countRand1: { value: 1, min: 0, max: 20, step: 1 },
colorA1: '#ffffff',
colorB1: '#ffffff',
colorC1: '#808080',
seed1: { value: 1021142105, min: 0, max: 2 ** 31, step: 1 },
})
'Body',
{
size1: { value: 180, min: 0, max: 512, step: 1 },
sizeRand1: { value: 256, min: 0, max: 512, step: 1 },
count1: { value: 2, min: 0, max: 20, step: 1 },
countRand1: { value: 1, min: 0, max: 20, step: 1 },
colorA1: '#ffffff',
colorB1: '#ffffff',
colorC1: '#808080',
seed1: { value: 1021142105, min: 0, max: 2 ** 31, step: 1 },
})
const [frontSize, frontSizeRand, frontOffset, frontSpread, frontNumElements, frontNumElementsRand,
frontColorA, frontColorB, frontColorC, frontSeed] = useControls(
'Front',
{
size2: { value: 20, min: 0, max: 512, step: 1 },
sizeRand2: { value: 160, min: 0, max: 512, step: 1 },
offset2: { value: 0.5, min: 0, max: 4, step: 0.1 },
spread2: { value: 1, min: 0, max: 4, step: 0.1 },
count2: { value: 5, min: 0, max: 20, step: 1 },
countRand2: { value: 16, min: 0, max: 20, step: 1 },
colorA2: '#ffffff',
colorB2: '#808080',
colorC2: '#a9a9a9',
seed2: { value: 2, min: 0, max: 2 ** 31, step: 1 },
},
)
'Front',
{
size2: { value: 20, min: 0, max: 512, step: 1 },
sizeRand2: { value: 160, min: 0, max: 512, step: 1 },
offset2: { value: 0.5, min: 0, max: 4, step: 0.1 },
spread2: { value: 1, min: 0, max: 4, step: 0.1 },
count2: { value: 5, min: 0, max: 20, step: 1 },
countRand2: { value: 16, min: 0, max: 20, step: 1 },
colorA2: '#ffffff',
colorB2: '#808080',
colorC2: '#a9a9a9',
seed2: { value: 2, min: 0, max: 2 ** 31, step: 1 },
},
)
const [backSize, backSizeRand, backOffset, backSpread, backNumElements, backNumElementsRand,
backColorA, backColorB, backColorC, backSeed] = useControls(
'Back',
{
size3: { value: 180, min: 0, max: 512, step: 1 },
sizeRand3: { value: 90, min: 0, max: 512, step: 1 },
offset3: { value: 0.5, min: 0, max: 4, step: 0.1 },
spread3: { value: 0.5, min: 0, max: 4, step: 0.1 },
count3: { value: 3, min: 0, max: 20, step: 1 },
countRand3: { value: 2, min: 0, max: 20, step: 1 },
colorA3: '#ffffff',
colorB3: '#a9a9a9',
colorC3: '#00008b',
seed3: { value: 869412245, min: 0, max: 2 ** 31, step: 1 },
},
)
'Back',
{
size3: { value: 180, min: 0, max: 512, step: 1 },
sizeRand3: { value: 90, min: 0, max: 512, step: 1 },
offset3: { value: 0.5, min: 0, max: 4, step: 0.1 },
spread3: { value: 0.5, min: 0, max: 4, step: 0.1 },
count3: { value: 3, min: 0, max: 20, step: 1 },
countRand3: { value: 2, min: 0, max: 20, step: 1 },
colorA3: '#ffffff',
colorB3: '#a9a9a9',
colorC3: '#00008b',
seed3: { value: 869412245, min: 0, max: 2 ** 31, step: 1 },
},
)
const updateSeedProps = () => {
seedPropsRef.value = [
Expand Down Expand Up @@ -233,7 +232,6 @@ const [seedRef, scaleRef] = useControls(
updateSeedProps()
}
</script>

<template>
Expand All @@ -243,9 +241,22 @@ const [seedRef, scaleRef] = useControls(
<TresPerspectiveCamera :position="[11, 11, 100]" />
</Levioso>
<OrbitControls />
<Levioso :speed="1.3" :range="[-13, 13]" :rotation-factor="10">
<TresPointLight ref="lightRef" :color="color" :intensity="1000" :position="[10, 0, 0]">
<Lensflare :seed="seedRef.value.value" :scale="0.5" :elements="elementsRef" />
<Levioso
:speed="1.3"
:range="[-13, 13]"
:rotation-factor="10"
>
<TresPointLight
ref="lightRef"
:color="color"
:intensity="1000"
:position="[10, 0, 0]"
>
<Lensflare
:seed="seedRef.value.value"
:scale="0.5"
:elements="elementsRef"
/>
</TresPointLight>
</Levioso>
<TresPointLight
Expand All @@ -259,7 +270,13 @@ const [seedRef, scaleRef] = useControls(
:scale="scaleRef.value.value"
/>
</TresPointLight>
<Dodecahedron v-for="{ key, position, rotation, scale } in rocks" :key="key" :material="rockMaterial"
:position="position" :rotation="rotation" :scale="scale" />
<Dodecahedron
v-for="{ key, position, rotation, scale } in rocks"
:key="key"
:material="rockMaterial"
:position="position"
:rotation="rotation"
:scale="scale"
/>
</TresCanvas>
</template>
9 changes: 5 additions & 4 deletions src/core/abstractions/Lensflare/component.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,10 @@ const lensflareElementPropsToLensflareElement = (p: LensflareElementProps) => {
const updateThreeElements = () => {
while (lensflareElementPropsArray.value.length > threeElements.length) {
const element = { ... lensflareElementPropsToLensflareElement(lensflareElementPropsArray.value[threeElements.length]) };
threeElements.push(element)
threeLensflare.addElement(element)
const element = lensflareElementPropsToLensflareElement(lensflareElementPropsArray.value[threeElements.length])
const copy = { ... element }
threeElements.push(copy)
threeLensflare.addElement(copy)
}
lensflareElementPropsArray.value.forEach((elementProps, i) => {
Expand Down Expand Up @@ -99,7 +100,7 @@ const scaleThreeElements = () => {
}
lensflareElementPropsArray.value.forEach((elementProps, i) => {
threeElements[i].size = elementProps.size * props.scale;
threeElements[i].size = elementProps.size * props.scale
})
}
Expand Down

0 comments on commit 59c4b7e

Please sign in to comment.