Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(app)!: 160 Replace value.value for value.root #350

Closed
wants to merge 1 commit into from
Closed

refactor(app)!: 160 Replace value.value for value.root #350

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/guide/directives/v-always-look-at.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const { onLoop } = useRenderLoop()
// here we update the position of the sphere and the camera will always follow the object
onLoop(({ elapsed }) => {
if (sphereRef.value) {
sphereRef.value.value.position.y = Math.sin(elapsed) * 1.5
sphereRef.value.root.position.y = Math.sin(elapsed) * 1.5
}
})
</script>
Expand Down
4 changes: 2 additions & 2 deletions docs/guide/materials/glass-material.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,10 @@ const boxRef = shallowRef()

watch(glassMaterialRef, value => {
// For good practice we dispose the old material
boxRef.value.value.material.dispose()
boxRef.value.root.material.dispose()

// We assign the new MeshGlassMaterialClass
boxRef.value.value.material = value.MeshGlassMaterialClass
boxRef.value.root.material = value.MeshGlassMaterialClass
})
</script>
<template>
Expand Down
4 changes: 2 additions & 2 deletions playground/src/components/ModelsDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@ const { onLoop } = useRenderLoop()

onLoop(() => {
if (akuAkuRef.value) {
akuAkuRef.value.value.rotation.y += 0.01
akuAkuRef.value.root.rotation.y += 0.01
}
if (jeepRef.value) {
jeepRef.value.value.rotation.y -= 0.01
jeepRef.value.root.rotation.y -= 0.01
}
})
</script>
Expand Down
4 changes: 2 additions & 2 deletions playground/src/pages/abstractions/FBODemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,11 @@ const { 'Depth Buffer': isUseDepthBuffer, 'MSAA Samples': numMsaaSamples } = use

watch(
isUseDepthBuffer.value,
() => { state.depth = isUseDepthBuffer.value.value },
() => { state.depth = isUseDepthBuffer.value.root },
)
watch(
numMsaaSamples.value,
() => { state.settings.samples = numMsaaSamples.value.value },
() => { state.settings.samples = numMsaaSamples.value.root },
)
</script>

Expand Down
4 changes: 2 additions & 2 deletions playground/src/pages/abstractions/GlobalAudioDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ const exampleAudio
= 'https://raw.githubusercontent.com/Tresjs/assets/main/music/sunny-afternoon.mp3'

const isPlaying = shallowRef(false)
const sound = shallowRef(false)
const sound = shallowRef()

watch(sound, (value) => {
console.log(value)
console.log(value.root)
})
</script>

Expand Down
112 changes: 56 additions & 56 deletions playground/src/pages/abstractions/LensflareDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,106 +144,106 @@ const [seedRef, scaleRef] = useControls(
seedPropsRef.value = [
{
texture: [line, ring],
color: [oversizeColorA.value.value, oversizeColorB.value.value, oversizeColorC.value.value],
Copy link
Contributor

@andretchen0 andretchen0 Feb 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @JaimeTorrealba ,

This change and others like it cause an error to be thrown or (worse) they fail silently. (That's JS for you! 😆)

oversizeColorA comes from Leches, not Cientos. Leches is still using value.value.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I Couldn't try the lensflare, is completely broken, and you're right I use find and replace.

But the lensflares is broken from the main branch. In any case, let me go back to this changes

Copy link
Member Author

@JaimeTorrealba JaimeTorrealba Feb 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As I almost never use leches I didn't tested well, thanks for point this one :)

color: [oversizeColorA.value.root, oversizeColorB.value.root, oversizeColorC.value.root],
distance: [0, 0],
size: [
Math.max(0, Math.floor(oversizeSize.value.value - 0.5 * oversizeSizeRand.value.value)),
Math.max(0, Math.floor(oversizeSize.value.value + 0.5 * oversizeSizeRand.value.value)),
Math.max(0, Math.floor(oversizeSize.value.root - 0.5 * oversizeSizeRand.value.root)),
Math.max(0, Math.floor(oversizeSize.value.root + 0.5 * oversizeSizeRand.value.root)),
],
length: [
Math.max(0, Math.floor(oversizeNumElements.value.value - 0.5 * oversizeNumElementsRand.value.value)),
Math.max(0, Math.floor(oversizeNumElements.value.value + 0.5 * oversizeNumElementsRand.value.value)),
Math.max(0, Math.floor(oversizeNumElements.value.root - 0.5 * oversizeNumElementsRand.value.root)),
Math.max(0, Math.floor(oversizeNumElements.value.root + 0.5 * oversizeNumElementsRand.value.root)),
],
seed: oversizeSeed.value.value,
seed: oversizeSeed.value.root,
},
{
texture: [rays, rays6],
color: [raysColorA.value.value, raysColorB.value.value, raysColorC.value.value],
color: [raysColorA.value.root, raysColorB.value.root, raysColorC.value.root],
distance: [0, 0],
size: [
Math.max(0, Math.floor(raysSize.value.value - 0.5 * raysSizeRand.value.value)),
Math.max(0, Math.floor(raysSize.value.value + 0.5 * raysSizeRand.value.value)),
Math.max(0, Math.floor(raysSize.value.root - 0.5 * raysSizeRand.value.root)),
Math.max(0, Math.floor(raysSize.value.root + 0.5 * raysSizeRand.value.root)),
],
length: [
Math.max(0, Math.floor(raysNumElements.value.value - 0.5 * raysNumElementsRand.value.value)),
Math.max(0, Math.floor(raysNumElements.value.value + 0.5 * raysNumElementsRand.value.value)),
Math.max(0, Math.floor(raysNumElements.value.root - 0.5 * raysNumElementsRand.value.root)),
Math.max(0, Math.floor(raysNumElements.value.root + 0.5 * raysNumElementsRand.value.root)),
],
seed: raysSeed.value.value,
seed: raysSeed.value.root,
},
{
texture: [circleBlur, circleRainbow, circle],
color: [bodyColorA.value.value, bodyColorB.value.value, bodyColorC.value.value],
color: [bodyColorA.value.root, bodyColorB.value.root, bodyColorC.value.root],
distance: [0, 0],
size: [
Math.max(0, Math.floor(bodySize.value.value - 0.5 * bodySizeRand.value.value)),
Math.max(0, Math.floor(bodySize.value.value + 0.5 * bodySizeRand.value.value)),
Math.max(0, Math.floor(bodySize.value.root - 0.5 * bodySizeRand.value.root)),
Math.max(0, Math.floor(bodySize.value.root + 0.5 * bodySizeRand.value.root)),
],
length: [
Math.max(0, Math.floor(bodyNumElements.value.value - 0.5 * bodyNumElementsRand.value.value)),
Math.max(0, Math.floor(bodyNumElements.value.value + 0.5 * bodyNumElementsRand.value.value)),
Math.max(0, Math.floor(bodyNumElements.value.root - 0.5 * bodyNumElementsRand.value.root)),
Math.max(0, Math.floor(bodyNumElements.value.root + 0.5 * bodyNumElementsRand.value.root)),
],
seed: bodySeed.value.value,
seed: bodySeed.value.root,
},
{
texture: [circleBlur, ring, poly6, polyStroke6],
color: [frontColorA.value.value, frontColorB.value.value, frontColorC.value.value],
distance: [frontOffset.value.value, frontOffset.value.value + frontSpread.value.value],
color: [frontColorA.value.root, frontColorB.value.root, frontColorC.value.root],
distance: [frontOffset.value.root, frontOffset.value.root + frontSpread.value.root],
size: [
Math.max(0, Math.floor(frontSize.value.value - 0.5 * frontSizeRand.value.value)),
Math.max(0, Math.floor(frontSize.value.value + 0.5 * frontSizeRand.value.value)),
Math.max(0, Math.floor(frontSize.value.root - 0.5 * frontSizeRand.value.root)),
Math.max(0, Math.floor(frontSize.value.root + 0.5 * frontSizeRand.value.root)),
],
length: [
Math.max(0, Math.floor(frontNumElements.value.value - 0.5 * frontNumElementsRand.value.value)),
Math.max(0, Math.floor(frontNumElements.value.value + 0.5 * frontNumElementsRand.value.value)),
Math.max(0, Math.floor(frontNumElements.value.root - 0.5 * frontNumElementsRand.value.root)),
Math.max(0, Math.floor(frontNumElements.value.root + 0.5 * frontNumElementsRand.value.root)),
],
seed: frontSeed.value.value,
seed: frontSeed.value.root,
},
{
texture: [circleBlur, ring, poly6, polyStroke6],
color: [backColorA.value.value, backColorB.value.value, backColorC.value.value],
distance: [-backOffset.value.value, -backOffset.value.value - backSpread.value.value],
color: [backColorA.value.root, backColorB.value.root, backColorC.value.root],
distance: [-backOffset.value.root, -backOffset.value.root - backSpread.value.root],
size: [
Math.max(0, Math.floor(backSize.value.value - 0.5 * backSizeRand.value.value)),
Math.max(0, Math.floor(backSize.value.value + 0.5 * backSizeRand.value.value)),
Math.max(0, Math.floor(backSize.value.root - 0.5 * backSizeRand.value.root)),
Math.max(0, Math.floor(backSize.value.root + 0.5 * backSizeRand.value.root)),
],
length: [
Math.max(0, Math.floor(backNumElements.value.value - 0.5 * backNumElementsRand.value.value)),
Math.max(0, Math.floor(backNumElements.value.value + 0.5 * backNumElementsRand.value.value)),
Math.max(0, Math.floor(backNumElements.value.root - 0.5 * backNumElementsRand.value.root)),
Math.max(0, Math.floor(backNumElements.value.root + 0.5 * backNumElementsRand.value.root)),
],
seed: backSeed.value.value,
seed: backSeed.value.root,
},
]
}

watch(() => [
seedRef.value,

oversizeSize.value.value, oversizeSizeRand.value.value,
oversizeNumElements.value.value, oversizeNumElementsRand.value.value,
oversizeColorA.value.value, oversizeColorB.value.value, oversizeColorC.value.value,
oversizeSeed.value.value,
oversizeSize.value.root, oversizeSizeRand.value.root,
oversizeNumElements.value.root, oversizeNumElementsRand.value.root,
oversizeColorA.value.root, oversizeColorB.value.root, oversizeColorC.value.root,
oversizeSeed.value.root,

raysSize.value.value, raysSizeRand.value.value,
raysNumElements.value.value, raysNumElementsRand.value.value,
raysColorA.value.value, raysColorB.value.value, raysColorC.value.value,
raysSeed.value.value,
raysSize.value.root, raysSizeRand.value.root,
raysNumElements.value.root, raysNumElementsRand.value.root,
raysColorA.value.root, raysColorB.value.root, raysColorC.value.root,
raysSeed.value.root,

bodySize.value.value, bodySizeRand.value.value,
bodyNumElements.value.value, bodyNumElementsRand.value.value,
bodyColorA.value.value, bodyColorB.value.value, bodyColorC.value.value,
bodySeed.value.value,
bodySize.value.root, bodySizeRand.value.root,
bodyNumElements.value.root, bodyNumElementsRand.value.root,
bodyColorA.value.root, bodyColorB.value.root, bodyColorC.value.root,
bodySeed.value.root,

frontSize.value.value, frontSizeRand.value.value,
frontNumElements.value.value, frontNumElementsRand.value.value,
frontOffset.value.value, frontSpread.value.value,
frontColorA.value.value, frontColorB.value.value, frontColorC.value.value,
frontSeed.value.value,
frontSize.value.root, frontSizeRand.value.root,
frontNumElements.value.root, frontNumElementsRand.value.root,
frontOffset.value.root, frontSpread.value.root,
frontColorA.value.root, frontColorB.value.root, frontColorC.value.root,
frontSeed.value.root,

backSize.value.value, backSizeRand.value.value,
backNumElements.value.value, backNumElementsRand.value.value,
backOffset.value.value, backSpread.value.value,
backColorA.value.value, backColorB.value.value, backColorC.value.value,
backSeed.value.value,
backSize.value.root, backSizeRand.value.root,
backNumElements.value.root, backNumElementsRand.value.root,
backOffset.value.root, backSpread.value.root,
backColorA.value.root, backColorB.value.root, backColorC.value.root,
backSeed.value.root,
], updateSeedProps)

updateSeedProps()
Expand Down Expand Up @@ -291,8 +291,8 @@ const [seedRef, scaleRef] = useControls(
:position="[10, 5, 0]"
>
<Lensflare
:scale="scaleRef.value.value"
:seed="seedRef.value.value"
:scale="scaleRef.value.root"
:seed="seedRef.value.root"
:seed-props="seedPropsRef"
/>
</TresPointLight>
Expand Down
6 changes: 3 additions & 3 deletions playground/src/pages/abstractions/LeviosoDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@ const { speed, rotationFactor, floatFactor } = useControls({
})

watch([speed.value, rotationFactor.value, floatFactor.value], () => {
leviosoState.speed = speed.value.value
leviosoState.rotationFactor = rotationFactor.value.value
leviosoState.floatFactor = floatFactor.value.value
leviosoState.speed = speed.value.root
leviosoState.rotationFactor = rotationFactor.value.root
leviosoState.floatFactor = floatFactor.value.root
})
const groupRef = shallowRef()
</script>
Expand Down
12 changes: 8 additions & 4 deletions playground/src/pages/controls/CameraControlsDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!-- eslint-disable no-console -->
<script setup lang="ts">
import { reactive, shallowRef } from 'vue'
import { reactive, shallowRef, watch } from 'vue'
import { TresCanvas } from '@tresjs/core'
import { CameraControls } from '@tresjs/cientos'
import { MathUtils, BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
Expand All @@ -25,6 +25,10 @@ const controlsState = reactive({
const controlsRef = shallowRef()
const boxMeshRef = shallowRef()

watch(controlsRef, () => {
console.log('watch ~ controlsRef:', controlsRef.value.root)
})

function onChange() {
console.log('change')
}
Expand Down Expand Up @@ -59,9 +63,9 @@ const { distance, minDistance, maxDistance } = useControls({
})

watch([distance.value, minDistance.value, maxDistance.value], () => {
controlsState.distance = distance.value.value
controlsState.minDistance = minDistance.value.value
controlsState.maxDistance = maxDistance.value.value
controlsState.distance = distance.value.root
controlsState.minDistance = minDistance.value.root
controlsState.maxDistance = maxDistance.value.root
})

useControls(
Expand Down
8 changes: 8 additions & 0 deletions playground/src/pages/controls/FirstPersonControlsDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script setup lang="ts">
import { shallowRef, watch } from 'vue'
import { TresCanvas } from '@tresjs/core'
import { BasicShadowMap, NoToneMapping } from 'three'
import { PointerLockControls, KeyboardControls, Stats, Sky } from '@tresjs/cientos'
Expand All @@ -13,6 +14,12 @@ const gl = {

const isActive = (state: boolean) => console.log(state)
const hasChange = (state: any) => console.log('change', state)

const controlsRef = shallowRef()

watch(controlsRef, () => {
console.log('watch ~ controlsRef:', controlsRef.value.root)
})
</script>

<template>
Expand All @@ -21,6 +28,7 @@ const hasChange = (state: any) => console.log('change', state)
<Stats />
<Sky />
<PointerLockControls
ref="controlsRef"
make-default
@is-lock="state => isActive(state)"
@change="state => hasChange(state)"
Expand Down
9 changes: 8 additions & 1 deletion playground/src/pages/controls/MapControlsDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script setup lang="ts">
import { shallowRef, watch } from 'vue'
import { TresCanvas } from '@tresjs/core'
import { MapControls, Sphere } from '@tresjs/cientos'
import { SRGBColorSpace, NoToneMapping } from 'three'
Expand All @@ -9,12 +10,18 @@ const gl = {
outputColorSpace: SRGBColorSpace,
toneMapping: NoToneMapping,
}

const controlsRef = shallowRef()

watch(controlsRef, () => {
console.log('watch ~ controlsRef:', controlsRef.value.root)
})
</script>

<template>
<TresCanvas v-bind="gl">
<TresPerspectiveCamera :position="[3, 3, 3]" />
<MapControls />
<MapControls ref="controlsRef" />
<Sphere :scale="0.5">
<TresMeshNormalMaterial />
</Sphere>
Expand Down
Loading
Loading