Skip to content

Commit ea12f07

Browse files
alvarosabualvarosabu
authored
feat: update demos to v4 (#166)
* chore: update deps * feat(array-cameras): update to v4 * chore: clean up brickelangelo * fix: cult-of-the-lamb * feat: updated dancing-blob * chore: remove tweakpane from portal * chore: remove unused tag * feat: fixed broken experiments * feat: fixed issue with parallax on scrollscontrols demo
1 parent 377a3f2 commit ea12f07

Some content is hidden

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

46 files changed

+4109
-4125
lines changed

‎app.vue

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
<template>
2-
<div class="">
3-
<NuxtLayout>
4-
<NuxtPage />
5-
</NuxtLayout>
6-
</div>
2+
<NuxtLayout>
3+
<NuxtPage />
4+
</NuxtLayout>
75
</template>

‎components/content/array-cameras/model.vue ‎components/content/array-cameras/KnightRigged.vue

+3-5
Original file line numberDiff line numberDiff line change
@@ -32,17 +32,15 @@ watch(animation, (value) => {
3232
currentAction.play()
3333
})
3434
35-
const { onLoop } = useRenderLoop()
35+
const { onBeforeRender } = useLoop()
3636
37-
onLoop(() => {
37+
onBeforeRender(() => {
3838
if (mixer) {
3939
mixer.update(0.01)
4040
}
4141
})
4242
</script>
4343

4444
<template>
45-
<Suspense>
46-
<primitive :object="model" />
47-
</Suspense>
45+
<primitive :object="model" />
4846
</template>

‎components/content/array-cameras/index.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ useControls('fpsgraph')
7979
:position="[0, 2, 5]"
8080
/>
8181
<Suspense>
82-
<model />
82+
<KnightRigged />
8383
</Suspense>
8484
<TresAmbientLight
8585
:color="0xffffff"

‎components/content/brickelangelo-david/David.vue

-35
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { useMouse } from '@vueuse/core'
77
const groupRef = ref<Group>()
88
99
const gltf = await useGLTF('/models/legolangelo/david.glb')
10-
console.log(gltf)
1110
1211
const david = gltf.nodes.David
1312
@@ -25,40 +24,6 @@ const lego = legoNodes.LegoPiece
2524
const legoMaterial = new MeshPhongMaterial({ color: 'lightgray' })
2625
const legoInstancedMesh = new InstancedMesh(lego.geometry, legoMaterial, instanceCount)
2726
28-
/* function pointInsideDavidMesh(point) {
29-
const raycaster = new Raycaster()
30-
const direction = new Vector3(1, 0, 0) // Arbitrary direction
31-
const origin = point.clone()
32-
raycaster.set(origin, direction)
33-
34-
const intersects = raycaster.intersectObject(david)
35-
36-
return intersects.length % 2 === 1
37-
}
38-
39-
const dummy = new Object3D()
40-
let instanceIndex = 0
41-
42-
david.geometry.computeBoundingBox()
43-
const boundingBox = david.geometry.boundingBox
44-
const legoSize = 1 // Adjust the size of the lego piece
45-
46-
console.log(boundingBox)
47-
48-
for (let x = boundingBox.min.x; x < boundingBox.max.x; x += legoSize) {
49-
for (let y = boundingBox.min.y; y < boundingBox.max.y; y += legoSize) {
50-
for (let z = boundingBox.min.z; z < boundingBox.max.z; z += legoSize) {
51-
const point = new Vector3(x, y, z)
52-
if (pointInsideDavidMesh(point)) {
53-
dummy.position.copy(point)
54-
dummy.updateMatrix()
55-
legoInstancedMesh.setMatrixAt(instanceIndex++, dummy.matrix)
56-
}
57-
}
58-
}
59-
}
60-
61-
legoInstancedMesh.instanceMatrix.needsUpdate = true */
6227
6328
useControls('fpsgraph')
6429

‎components/content/brickelangelo-david/index.vue

+1-3
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ const gl = {
1717
}
1818
1919
const lightRef = ref()
20-
const sphereLight = ref()
2120
2221
watch([x, y], () => {
2322
// Normalize the mouse position to a range that's relevant for your scene
@@ -32,11 +31,10 @@ watch([x, y], () => {
3231
3332
const cameraRef = ref()
3433
const cameraPosition = ref(new Vector3(-0.63, 2, 0.63))
35-
const cameraLookAt = ref(new Vector3(0, 0, 0))
3634
3735
useControls({ cameraPosition })
3836
39-
const { hasFinishLoading, progress, items } = await useProgress()
37+
const { hasFinishLoading, progress } = await useProgress()
4038
4139
watch(hasFinishLoading, (hasFinishLoading) => {
4240
if (!cameraRef.value || hasFinishLoading) return

‎components/content/cult-of-the-lamb/Lamb.vue

+9-7
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
<script setup lang="ts">
22
import { LoopOnce } from 'three'
33
4-
const { nodes, animations } = await useGLTF('/models/cult-of-the-lamb/Lamb.glb', { draco: true })
5-
console.log(animations)
4+
const { scene, nodes, animations } = await useGLTF('/models/cult-of-the-lamb/lamb-v2.glb', { draco: true })
5+
66
const lamb = nodes['rig']
77
8-
const { actions, mixer } = useAnimations(animations, lamb)
8+
const { actions } = useAnimations(animations, lamb)
99
10-
const currentAction = ref(actions['rigAction'])
10+
const currentAction = ref(actions['elevate'])
1111
1212
currentAction.value.clampWhenFinished = true
1313
currentAction.value.loop = LoopOnce
1414
currentAction.value.play()
1515
</script>
1616

1717
<template>
18-
<Levioso>
19-
<primitive :object="lamb" />
20-
</Levioso>
18+
<TresGroup>
19+
<Levioso>
20+
<primitive :object="scene" />
21+
</Levioso>
22+
</TresGroup>
2123
</template>

‎components/content/cult-of-the-lamb/Ritual.vue

+13-11
Original file line numberDiff line numberDiff line change
@@ -46,15 +46,17 @@ materials['Flame'].emissive = new Color('#C55B37')
4646
</script>
4747

4848
<template>
49-
<primitive :object="pentagram" />
50-
<template v-for="symbol in symbols">
51-
<Levioso>
52-
<primitive :object="symbol" />
53-
</Levioso>
54-
</template>
55-
56-
<primitive
57-
v-for="candle in candles"
58-
:object="candle"
59-
/>
49+
<TresGroup>
50+
<primitive :object="pentagram" />
51+
<template v-for="symbol in symbols">
52+
<Levioso>
53+
<primitive :object="symbol" />
54+
</Levioso>
55+
</template>
56+
57+
<primitive
58+
v-for="candle in candles"
59+
:object="candle"
60+
/>
61+
</TresGroup>
6062
</template>

‎components/content/cult-of-the-lamb/index.vue

+7-6
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
import { TresCanvas } from '@tresjs/core'
33
import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
44
5-
import { OrbitControls } from '@tresjs/cientos'
6-
import { EffectComposer, Bloom } from '@tresjs/post-processing'
5+
/* import { EffectComposer, Bloom } from '@tresjs/post-processing' */
76
import { BlendFunction } from 'postprocessing'
87
98
const gl = {
@@ -19,7 +18,7 @@ const bloomParams = reactive({
1918
luminanceThreshold: 0.1,
2019
luminanceSmoothing: 0.3,
2120
mipmapBlur: true,
22-
intensity: 0.3,
21+
intensity: 0.4,
2322
radius: 0.5,
2423
disableRender: true,
2524
blendFunction: BlendFunction.ADD,
@@ -35,15 +34,17 @@ const bloomParams = reactive({
3534
<Suspense>
3635
<Lamb />
3736
</Suspense>
38-
<Suspense>
39-
<Ritual />
40-
</Suspense>
37+
4138
<TresAmbientLight :args="[0xffffff, 0.5]" />
39+
4240
<Suspense>
4341
<EffectComposer>
4442
<Bloom v-bind="bloomParams" />
4543
</EffectComposer>
4644
</Suspense>
45+
<Suspense>
46+
<Ritual />
47+
</Suspense>
4748
<Backdrop
4849
:floor="1.5"
4950
:segments="20"

‎components/content/dancing-blob/TheDancingBlob.vue

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!-- Github Luckystriike: https://github.com/luckystriike22/TresJsPlayground/ -->
2+
<script lang="ts" setup>
3+
import vertexShader from './shaders/vertex.glsl'
4+
import fragmentShader from './shaders/fragment.glsl'
5+
6+
import { Vector2 } from 'three'
7+
8+
const props = defineProps<{
9+
analyser: any
10+
dataArray: any
11+
}>()
12+
13+
// composables
14+
const { onBeforeRender } = useLoop()
15+
16+
// refs
17+
const blobRef = shallowRef<any>(null)
18+
19+
20+
onBeforeRender(({ elapsed }) => {
21+
if (blobRef.value && props.analyser && props.dataArray) {
22+
props.analyser?.getByteFrequencyData(props.dataArray);
23+
24+
// calc average frequency
25+
let sum = 0;
26+
for (let i = 0; i < props.dataArray?.length; i++) {
27+
sum += props.dataArray[i];
28+
}
29+
30+
uniforms.value.u_frequency.value = sum > 0 ? sum / props.dataArray?.length : 0;
31+
uniforms.value.u_time.value = elapsed
32+
blobRef.value.rotation.x += 0.01
33+
}
34+
})
35+
36+
37+
// shader
38+
// set props to pass into the shader
39+
const uniforms = ref({
40+
u_resolution: { type: 'V2', value: new Vector2(window.innerWidth, window.innerHeight) },
41+
u_time: { type: 'f', value: 0.0 },
42+
u_frequency: { type: 'f', value: 0.0 },
43+
u_amplitude: { type: 'f', value: 1.5 }
44+
});
45+
46+
47+
</script>
48+
49+
<template>
50+
<TresPerspectiveCamera :position="[13, 0, 0]" />
51+
<OrbitControls />
52+
<TresMesh ref="blobRef">
53+
<TresIcosahedronGeometry :args="[4, 80]"></TresIcosahedronGeometry>
54+
<TresShaderMaterial wireframe :uniforms="uniforms" :fragment-shader="fragmentShader"
55+
:vertex-shader="vertexShader" />
56+
</TresMesh>
57+
<TresDirectionalLight :position="[1, 1, 1]" />
58+
<TresAmbientLight :intensity="1" />
59+
</template>
60+
61+
<style scoped>
62+
.gitBtn {
63+
margin-bottom: 10px;
64+
margin-right: 10px;
65+
z-index: 10;
66+
color: white;
67+
}
68+
69+
.blobPermissionDialog {
70+
height: 100vh;
71+
justify-content: center;
72+
display: flex;
73+
background-color: #0c1a30;
74+
width: 100vw;
75+
color: white;
76+
font-size: x-large;
77+
}
78+
79+
.blobPermissionDialog p {
80+
width: 700px;
81+
}
82+
</style>

0 commit comments

Comments
 (0)