Skip to content

Commit efddeac

Browse files
damienmontastieralvarosabuTinoooo
authored
chore: migrate new tresleches (#178)
* migrate to new tresleches, change devDependencies package.json file * add todo next commit * lint * try floa false leches * refactor: improve BarrelBlurDemo component layout and styling * leches floatg * Update docs/.vitepress/theme/components/DocsDemoGUI.vue * ci: update package publishing workflow to force install corepack --------- Co-authored-by: alvarosabu <alvaro.saburido@gmail.com> Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>
1 parent 16c3344 commit efddeac

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+1172
-578
lines changed

‎.github/workflows/pkg.pr.new.yml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,13 @@ jobs:
2525
- name: Checkout code
2626
uses: actions/checkout@v4
2727

28-
- run: corepack enable
28+
- run: npm i -g --force corepack && corepack enable
2929
- uses: actions/setup-node@v4
3030
with:
3131
node-version: ${{ matrix.node-version }}
32-
cache: "pnpm"
32+
cache: pnpm
3333
- name: Install dependencies
3434
run: pnpm install
3535
- name: Build
3636
run: pnpm build
37-
- run: pnpx pkg-pr-new publish --compact --pnpm
37+
- run: pnpx pkg-pr-new publish --compact --pnpm

‎docs/.vitepress/theme/components/DocsDemo.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@
44
<template>
55
<ClientOnly>
66
<div
7-
class="relative"
8-
style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;"
7+
class="relative aspect-16/9 my-8 rounded-lg overflow-hidden shadow-lg"
98
>
109
<Suspense>
1110
<slot></slot>

‎docs/.vitepress/theme/components/DocsDemoGUI.vue

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<ClientOnly>
3+
<div
4+
class="relative my-8 flex flex-col rounded-lg overflow-hidden shadow-lg"
5+
>
6+
<Suspense>
7+
<slot></slot>
8+
</Suspense>
9+
</div>
10+
</ClientOnly>
11+
</template>

‎docs/.vitepress/theme/components/pmdrs/BarrelBlurDemo.vue

Lines changed: 29 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -29,35 +29,36 @@ const { amount, offsetX, offsetY, blendFunction } = useControls({
2929
</script>
3030

3131
<template>
32-
<TresLeches style="left: initial;right:10px; top:10px;" />
33-
34-
<TresCanvas
35-
v-bind="gl"
36-
>
37-
<TresPerspectiveCamera
38-
:position="[5, 5, 5]"
39-
:look-at="[0, 0, 0]"
40-
/>
41-
<OrbitControls auto-rotate />
32+
<div class="aspect-16/9">
33+
<TresCanvas
34+
v-bind="gl"
35+
>
36+
<TresPerspectiveCamera
37+
:position="[5, 5, 5]"
38+
:look-at="[0, 0, 0]"
39+
/>
40+
<OrbitControls auto-rotate />
4241

43-
<Suspense>
44-
<Environment preset="shangai" />
45-
</Suspense>
42+
<Suspense>
43+
<Environment preset="shangai" />
44+
</Suspense>
4645

47-
<RoundedBox :args="[2, 2, 2, 2, 0.25]">
48-
<TresMeshPhysicalMaterial
49-
color="white"
50-
:metalness=".9"
51-
:roughness=".5"
52-
:clearcoat="1.0"
53-
:clearcoatRoughness="0.1"
54-
/>
55-
</RoundedBox>
46+
<RoundedBox :args="[2, 2, 2, 2, 0.25]">
47+
<TresMeshPhysicalMaterial
48+
color="white"
49+
:metalness=".9"
50+
:roughness=".5"
51+
:clearcoat="1.0"
52+
:clearcoatRoughness="0.1"
53+
/>
54+
</RoundedBox>
5655

57-
<Suspense>
58-
<EffectComposerPmndrs>
59-
<BarrelBlurPmndrs :amount="amount.value" :offset="[offsetX.value, offsetY.value]" :blendFunction="Number(blendFunction.value)" />
60-
</EffectComposerPmndrs>
61-
</Suspense>
62-
</TresCanvas>
56+
<Suspense>
57+
<EffectComposerPmndrs>
58+
<BarrelBlurPmndrs :amount="amount" :offset="[offsetX, offsetY]" :blendFunction="Number(blendFunction)" />
59+
</EffectComposerPmndrs>
60+
</Suspense>
61+
</TresCanvas>
62+
</div>
63+
<TresLeches :float="false" />
6364
</template>

‎docs/.vitepress/theme/components/pmdrs/ChromaticAberrationDemo.vue

Lines changed: 45 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import { ChromaticAberrationPmndrs, EffectComposerPmndrs } from '@tresjs/post-pr
88
99
import '@tresjs/leches/styles'
1010
11+
// TODO: Adapt watchEffect to useControls for visibility of modulationOffset
12+
1113
const gl = {
1214
clearColor: '#ffffff',
1315
toneMapping: NoToneMapping,
@@ -24,57 +26,58 @@ const { offsetX, offsetY, radialModulation, modulationOffset } = useControls({
2426
})
2527
2628
watchEffect(() => {
27-
modulationOffset.value.visible = radialModulation.value.value
29+
// modulationOffset.value.visible = radialModulation.value.value
2830
})
2931
</script>
3032

3133
<template>
32-
<TresLeches style="left: initial;right:10px; top:10px;" />
33-
34-
<TresCanvas
35-
v-bind="gl"
36-
>
37-
<TresPerspectiveCamera
38-
:position="[5, 5, 5]"
39-
:look-at="[0, 0, 0]"
40-
/>
41-
<OrbitControls auto-rotate />
42-
43-
<template
44-
v-for="i in 4"
45-
:key="i"
34+
<div class="aspect-16/9">
35+
<TresCanvas
36+
v-bind="gl"
4637
>
47-
<TresMesh
48-
:position="[((i - 1) - (4 - 1) / 2) * 1.5, 0, 0]"
38+
<TresPerspectiveCamera
39+
:position="[5, 5, 5]"
40+
:look-at="[0, 0, 0]"
41+
/>
42+
<OrbitControls auto-rotate />
43+
44+
<template
45+
v-for="i in 4"
46+
:key="i"
4947
>
50-
<TresBoxGeometry
51-
:width="4"
52-
:height="4"
53-
:depth="4"
54-
/>
55-
<TresMeshStandardMaterial color="#1C1C1E" />
56-
</TresMesh>
57-
</template>
48+
<TresMesh
49+
:position="[((i - 1) - (4 - 1) / 2) * 1.5, 0, 0]"
50+
>
51+
<TresBoxGeometry
52+
:width="4"
53+
:height="4"
54+
:depth="4"
55+
/>
56+
<TresMeshStandardMaterial color="#1C1C1E" />
57+
</TresMesh>
58+
</template>
5859

59-
<TresAmbientLight color="#ffffff" />
60+
<TresAmbientLight color="#ffffff" />
6061

61-
<TresDirectionalLight />
62+
<TresDirectionalLight />
6263

63-
<ContactShadows
64-
:opacity="1"
65-
:position-y="-.5"
66-
:scale="20"
67-
:blur=".85"
68-
/>
64+
<ContactShadows
65+
:opacity="1"
66+
:position-y="-.5"
67+
:scale="20"
68+
:blur=".85"
69+
/>
6970

70-
<Suspense>
71-
<EffectComposerPmndrs>
72-
<ChromaticAberrationPmndrs ref="chromaticAberrationRef" :offset="new Vector2(offsetX.value, offsetY.value)" :radial-modulation="radialModulation.value" :modulation-offset="modulationOffset.value" />
73-
</EffectComposerPmndrs>
74-
</Suspense>
71+
<Suspense>
72+
<EffectComposerPmndrs>
73+
<ChromaticAberrationPmndrs ref="chromaticAberrationRef" :offset="new Vector2(offsetX, offsetY)" :radial-modulation="radialModulation" :modulation-offset="modulationOffset" />
74+
</EffectComposerPmndrs>
75+
</Suspense>
7576

76-
<Suspense>
77-
<Environment :intensity="2" :blur="0" preset="snow" />
78-
</Suspense>
79-
</TresCanvas>
77+
<Suspense>
78+
<Environment :intensity="2" :blur="0" preset="snow" />
79+
</Suspense>
80+
</TresCanvas>
81+
</div>
82+
<TresLeches :float="false" />
8083
</template>

‎docs/.vitepress/theme/components/pmdrs/ColorAverageDemo.vue

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const { blendFunction, opacity } = useControls({
3939
4040
function onUpdateTimeline(e) {
4141
const progress = 1 - e.progress()
42-
opacity.value.value = progress
42+
opacity.value = progress
4343
}
4444
4545
watch(meshRef, () => {
@@ -63,30 +63,31 @@ onUnmounted(() => {
6363
</script>
6464

6565
<template>
66-
<TresLeches style="left: initial;right:10px; top:10px;" />
66+
<div class="aspect-16/9">
67+
<TresCanvas
68+
v-bind="gl"
69+
>
70+
<TresPerspectiveCamera
71+
:position="[5, 2, 15]"
72+
:look-at="[0, 0, 0]"
73+
/>
74+
<OrbitControls auto-rotate />
6775

68-
<TresCanvas
69-
v-bind="gl"
70-
>
71-
<TresPerspectiveCamera
72-
:position="[5, 2, 15]"
73-
:look-at="[0, 0, 0]"
74-
/>
75-
<OrbitControls auto-rotate />
76+
<TresMesh ref="meshRef" :position="[0, 3.5, 0]">
77+
<TresBoxGeometry :args="[2, 2, 2]" />
78+
<TresMeshPhysicalMaterial color="#8B0000" :roughness=".25" />
79+
</TresMesh>
7680

77-
<TresMesh ref="meshRef" :position="[0, 3.5, 0]">
78-
<TresBoxGeometry :args="[2, 2, 2]" />
79-
<TresMeshPhysicalMaterial color="#8B0000" :roughness=".25" />
80-
</TresMesh>
81+
<Suspense>
82+
<Environment background preset="shangai" />
83+
</Suspense>
8184

82-
<Suspense>
83-
<Environment background preset="shangai" />
84-
</Suspense>
85-
86-
<Suspense>
87-
<EffectComposerPmndrs>
88-
<ColorAveragePmndrs :blendFunction="Number(blendFunction.value)" :opacity="opacity.value" />
89-
</EffectComposerPmndrs>
90-
</Suspense>
91-
</TresCanvas>
85+
<Suspense>
86+
<EffectComposerPmndrs>
87+
<ColorAveragePmndrs :blendFunction="Number(blendFunction)" :opacity="opacity" />
88+
</EffectComposerPmndrs>
89+
</Suspense>
90+
</TresCanvas>
91+
</div>
92+
<TresLeches :float="false" />
9293
</template>

‎docs/.vitepress/theme/components/pmdrs/DotScreenDemo.vue

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -31,32 +31,34 @@ const { scene } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets
3131
</script>
3232

3333
<template>
34-
<TresLeches style="left: initial;right:10px; top:10px;" />
35-
36-
<TresCanvas
37-
v-bind="gl"
38-
>
39-
<TresPerspectiveCamera
40-
:position="[0, 1, 7.5]"
41-
:look-at="[0, 0, 0]"
42-
/>
43-
<OrbitControls />
44-
45-
<primitive :scale="2" :rotation-x="Math.PI / -5" :rotation-y="Math.PI" :position-y=".25" :position-z="0.5" :object="scene" />
46-
47-
<ContactShadows
48-
:opacity="1"
49-
:position-y="-1.5"
50-
/>
51-
52-
<Suspense>
53-
<Environment preset="modern" />
54-
</Suspense>
55-
56-
<Suspense>
57-
<EffectComposerPmndrs>
58-
<DotScreenPmndrs :blendFunction="Number(blendFunction.value)" :angle="angle.value" :scale="scale.value" />
59-
</EffectComposerPmndrs>
60-
</Suspense>
61-
</TresCanvas>
34+
<div class="aspect-16/9">
35+
<TresCanvas
36+
v-bind="gl"
37+
>
38+
<TresPerspectiveCamera
39+
:position="[0, 1, 7.5]"
40+
:look-at="[0, 0, 0]"
41+
/>
42+
<OrbitControls />
43+
44+
<primitive :scale="2" :rotation-x="Math.PI / -5" :rotation-y="Math.PI" :position-y=".25" :position-z="0.5" :object="scene" />
45+
46+
<ContactShadows
47+
:opacity="1"
48+
:position-y="-1.5"
49+
/>
50+
51+
<Suspense>
52+
<Environment preset="modern" />
53+
</Suspense>
54+
55+
<Suspense>
56+
<EffectComposerPmndrs>
57+
<DotScreenPmndrs :blendFunction="Number(blendFunction)" :angle="angle" :scale="scale" />
58+
</EffectComposerPmndrs>
59+
</Suspense>
60+
</TresCanvas>
61+
</div>
62+
63+
<TresLeches :float="false" />
6264
</template>

0 commit comments

Comments
 (0)