Skip to content

Commit 3328caf

Browse files
alvarosabualvarosabu
committed
Merge branch 'main' into feature/haunted-house
2 parents 838b611 + b3ce91f commit 3328caf

File tree

31 files changed

+9539
-47
lines changed

31 files changed

+9539
-47
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<p align="center">
44
<a href="https://www.npmjs.com/package/@tresjs/core"><img src="https://img.shields.io/npm/v/@tresjs/core?color=%2382DBCA" alt="npm package"></a>
5-
<a href="https://discord.gg/tfY9aSNT"><img src="https://img.shields.io/badge/chat-discord-purple?style=flat&logo=discord" alt="discord chat"></a>
5+
<a href="https://discord.gg/UCr96AQmWn"><img src="https://img.shields.io/badge/chat-discord-purple?style=flat&logo=discord" alt="discord chat"></a>
66
</p>
77
<br/>
88

‎components/content/BasicAnimations.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import { TresCanvas, TresInstance, useRenderLoop } from '@tresjs/core'
3-
import { BasicShadowMap, sRGBEncoding, NoToneMapping } from 'three'
3+
import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
44
55
import { OrbitControls } from '@tresjs/cientos'
66
import { ShallowRef } from 'vue'
@@ -10,7 +10,7 @@ const gl = {
1010
shadows: true,
1111
alpha: false,
1212
shadowMapType: BasicShadowMap,
13-
outputEncoding: sRGBEncoding,
13+
outputColorSpace: SRGBColorSpace,
1414
toneMapping: NoToneMapping,
1515
}
1616

‎components/content/Cameras.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import { TresCanvas } from '@tresjs/core'
3-
import { BasicShadowMap, sRGBEncoding, NoToneMapping, PerspectiveCamera, OrthographicCamera } from 'three'
3+
import { BasicShadowMap, SRGBColorSpace, NoToneMapping, PerspectiveCamera, OrthographicCamera } from 'three'
44
55
import { Box, useTweakPane } from '@tresjs/cientos'
66
@@ -9,7 +9,7 @@ const gl = {
99
shadows: true,
1010
alpha: false,
1111
shadowMapType: BasicShadowMap,
12-
outputEncoding: sRGBEncoding,
12+
outputColorSpace: SRGBColorSpace,
1313
toneMapping: NoToneMapping,
1414
}
1515

‎components/content/Events.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import { TresCanvas, TresEvent } from '@tresjs/core'
3-
import { BasicShadowMap, sRGBEncoding, NoToneMapping } from 'three'
3+
import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
44
55
import { OrbitControls } from '@tresjs/cientos'
66
@@ -9,7 +9,7 @@ const gl = {
99
shadows: true,
1010
alpha: false,
1111
shadowMapType: BasicShadowMap,
12-
outputEncoding: sRGBEncoding,
12+
outputColorSpace: SRGBColorSpace,
1313
toneMapping: NoToneMapping,
1414
}
1515

‎components/content/Text3dExperiment.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import { TresCanvas, useRenderLoop, useTexture } from '@tresjs/core'
3-
import { BasicShadowMap, sRGBEncoding, NoToneMapping } from 'three'
3+
import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
44
import { useWindowSize } from '@vueuse/core'
55
import { ChromaticAberrationEffect, EffectComposer, EffectPass, RenderPass } from 'postprocessing/module'
66
@@ -13,7 +13,7 @@ const gl = {
1313
shadows: true,
1414
alpha: false,
1515
shadowMapType: BasicShadowMap,
16-
outputEncoding: sRGBEncoding,
16+
outputColorSpace: SRGBColorSpace,
1717
toneMapping: NoToneMapping,
1818
}
1919

‎components/content/TheLights.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import { TresCanvas, TresInstance, useTexture } from '@tresjs/core'
3-
import { BasicShadowMap, sRGBEncoding, NoToneMapping, Color } from 'three'
3+
import { BasicShadowMap, SRGBColorSpace, NoToneMapping, Color } from 'three'
44
55
import { OrbitControls, useTweakPane, GLTFModel, Plane } from '@tresjs/cientos'
66
@@ -9,7 +9,7 @@ const gl = {
99
shadows: true,
1010
alpha: false,
1111
shadowMapType: BasicShadowMap,
12-
outputEncoding: sRGBEncoding,
12+
outputColorSpace: SRGBColorSpace,
1313
toneMapping: NoToneMapping,
1414
}
1515

‎components/content/TresBasic.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import { TresCanvas } from '@tresjs/core'
3-
import { BasicShadowMap, sRGBEncoding, NoToneMapping } from 'three'
3+
import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
44
55
import { OrbitControls } from '@tresjs/cientos'
66
@@ -9,7 +9,7 @@ const gl = {
99
shadows: true,
1010
alpha: false,
1111
shadowMapType: BasicShadowMap,
12-
outputEncoding: sRGBEncoding,
12+
outputColorSpace: SRGBColorSpace,
1313
toneMapping: NoToneMapping,
1414
}
1515
</script>

‎components/content/galaxy-generator/index.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import { TresCanvas, useRenderLoop } from '@tresjs/core'
3-
import { BasicShadowMap, sRGBEncoding, NoToneMapping, Color, AdditiveBlending, BufferAttribute } from 'three'
3+
import { BasicShadowMap, SRGBColorSpace, NoToneMapping, Color, AdditiveBlending, BufferAttribute } from 'three'
44
import gsap from 'gsap'
55
66
import { OrbitControls, useTweakPane } from '@tresjs/cientos'
@@ -13,7 +13,7 @@ const gl = {
1313
shadows: true,
1414
alpha: false,
1515
shadowMapType: BasicShadowMap,
16-
outputEncoding: sRGBEncoding,
16+
outputColorSpace: SRGBColorSpace,
1717
toneMapping: NoToneMapping,
1818
}
1919

‎components/content/gltf.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import { TresCanvas } from '@tresjs/core'
3-
import { sRGBEncoding } from 'three'
3+
import { SRGBColorSpace } from 'three'
44
55
import { OrbitControls, GLTFModel } from '@tresjs/cientos'
66
@@ -12,7 +12,7 @@ watchEffect(() => {
1212
</script>
1313

1414
<template>
15-
<TresCanvas clear-color="#82DBC5" shadows alpha window-size :output-encoding="sRGBEncoding">
15+
<TresCanvas clear-color="#82DBC5" shadows alpha window-size :output-encoding="SRGBColorSpace">
1616
<TresPerspectiveCamera :position="[5, 5, 5]" :fov="75" :near="0.1" :far="1000" />
1717
<OrbitControls />
1818

‎components/content/lowpoly-planet/index.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { PCFSoftShadowMap, sRGBEncoding } from 'three'
2+
import { PCFSoftShadowMap, SRGBColorSpace } from 'three'
33
import { TresCanvas } from '@tresjs/core'
44
import { OrbitControls } from '@tresjs/cientos'
55
@@ -11,7 +11,7 @@ const state = {
1111
clearColor: '#11101B',
1212
shadows: true,
1313
alpha: false,
14-
outputEncoding: sRGBEncoding,
14+
outputColorSpace: SRGBColorSpace,
1515
useLegacyLights: true,
1616
shadowMapType: PCFSoftShadowMap,
1717
}

‎components/content/materials/index.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<script setup lang="ts">
22
import { TresCanvas } from '@tresjs/core'
33
import { OrbitControls, Plane } from '@tresjs/cientos'
4-
import { BasicShadowMap, NoToneMapping, sRGBEncoding } from 'three'
4+
import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
55
import { shallowReactive } from 'vue'
66
77
const gl = shallowReactive({
88
clearColor: '#4f4f4f',
99
shadows: true,
1010
alpha: false,
1111
shadowMapType: BasicShadowMap,
12-
outputEncoding: sRGBEncoding,
12+
outputColorSpace: SRGBColorSpace,
1313
toneMapping: NoToneMapping,
1414
})
1515
</script>

‎components/content/pam-camera-mouse/index.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script setup lang="ts">
2-
import { BasicShadowMap, sRGBEncoding, NoToneMapping } from 'three'
2+
import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
33
import { TresCanvas, useRenderLoop } from '@tresjs/core'
44
5-
import { PamCameraMouse } from '@tresjs/cientos'
5+
import { MouseParallax } from '@tresjs/cientos'
66
77
import Vertex from './shaders/vertex.glsl'
88
import Fragment from './shaders/fragment.glsl'
@@ -12,7 +12,7 @@ const gl = {
1212
shadows: true,
1313
alpha: false,
1414
shadowMapType: BasicShadowMap,
15-
outputEncoding: sRGBEncoding,
15+
outputColorSpace: SRGBColorSpace,
1616
toneMapping: NoToneMapping,
1717
}
1818
@@ -35,7 +35,7 @@ onLoop(() => {
3535
<template>
3636
<TresCanvas v-bind="gl">
3737
<TresPerspectiveCamera :position="[0, 0, 5]" :fov="75" :near="0.1" :far="1000" />
38-
<PamCameraMouse :factor="2" />
38+
<MouseParallax :factor="2" />
3939
<TresMesh :scale="2" :position="[0.5, 0.5, 0]" cast-shadow>
4040
<TresSphereGeometry :args="[1, 30, 30]" />
4141
<TresShaderMaterial v-bind="shader" />

‎components/content/portal-journey/ThePortal.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { sRGBEncoding, DoubleSide, MeshBasicMaterial, ShaderMaterial, Color, Mesh } from 'three'
2+
import { SRGBColorSpace, DoubleSide, MeshBasicMaterial, ShaderMaterial, Color, Mesh } from 'three'
33
import { useRenderLoop, useTexture } from '@tresjs/core'
44
import { useGLTF, useTweakPane } from '@tresjs/cientos'
55
@@ -47,7 +47,7 @@ const bakedTexture = await useTexture([
4747
])
4848
4949
bakedTexture.flipY = false
50-
bakedTexture.encoding = sRGBEncoding
50+
bakedTexture.encoding = SRGBColorSpace
5151
5252
// Baked material
5353
const bakedMaterial = new MeshBasicMaterial({

‎components/content/portal-journey/index.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { BasicShadowMap, sRGBEncoding, NoToneMapping } from 'three'
2+
import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
33
import { TresCanvas } from '@tresjs/core'
44
import { OrbitControls } from '@tresjs/cientos'
55
import ThePortal from './ThePortal.vue'
@@ -10,7 +10,7 @@ const gl = {
1010
shadows: true,
1111
alpha: false,
1212
shadowMapType: BasicShadowMap,
13-
outputEncoding: sRGBEncoding,
13+
outputColorSpace: SRGBColorSpace,
1414
toneMapping: NoToneMapping,
1515
}
1616
</script>

‎components/content/post-processing-manual/index.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import { useRenderLoop, TresCanvas, useTresProvider } from '@tresjs/core'
33
import { reactive, watchEffect } from 'vue'
4-
import { BasicShadowMap, sRGBEncoding, NoToneMapping, LoadingManager, DefaultLoadingManager } from 'three'
4+
import { BasicShadowMap, SRGBColorSpace, NoToneMapping, LoadingManager, DefaultLoadingManager } from 'three'
55
import { OrbitControls, GLTFModel, useTweakPane } from '@tresjs/cientos'
66
import {
77
BloomEffect,
@@ -20,7 +20,7 @@ const gl = reactive({
2020
shadows: true,
2121
alpha: false,
2222
shadowMapType: BasicShadowMap,
23-
outputEncoding: sRGBEncoding,
23+
outputColorSpace: SRGBColorSpace,
2424
toneMapping: NoToneMapping,
2525
})
2626

‎components/content/product-landing-page/Headphones.vue

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<script setup lang="ts">
2+
import { useGLTF, Levioso, ContactShadows } from '@tresjs/cientos'
3+
4+
const props = defineProps({
5+
color: {
6+
type: String,
7+
required: true,
8+
},
9+
})
10+
11+
const {
12+
scene: headphones,
13+
nodes,
14+
materials,
15+
} = await useGLTF('/models/headphones/headphones.gltf', {
16+
draco: true,
17+
})
18+
19+
watch(
20+
() => props.color,
21+
color => {
22+
materials.Base.color.set(color)
23+
24+
if (color === '#000000') {
25+
materials.Base.roughness = 1
26+
materials.Cush.color.set('#050505')
27+
} else {
28+
materials.Cush.color.set('#A4BCB7')
29+
}
30+
},
31+
{ immediate: true },
32+
)
33+
34+
console.log({ headphones, nodes, materials })
35+
</script>
36+
<template>
37+
<Levioso>
38+
<primitive :object="nodes.Headphones_7" :position="[0, 0.5, 0]" :scale="[0.8, 0.8, 0.8]"></primitive>
39+
</Levioso>
40+
<ContactShadows :opacity="0.2" :blur="3" :position="[0, -2, 0]" />
41+
</template>

‎components/content/product-landing-page/index.vue

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<script setup lang="ts">
2+
import { TresCanvas } from '@tresjs/core'
3+
import { BasicShadowMap, SRGBColorSpace } from 'three'
4+
5+
import { MouseParallax } from '@tresjs/cientos'
6+
import Headphones from './Headphones.vue'
7+
8+
const gl = {
9+
shadows: true,
10+
alpha: false,
11+
shadowMapType: BasicShadowMap,
12+
outputColorSpace: SRGBColorSpace,
13+
}
14+
15+
const state = reactive({
16+
selectedColor: '#903345',
17+
colors: ['#903345', '#F2D3AC', '#F2F2F2', '#000000'],
18+
})
19+
</script>
20+
21+
<template>
22+
<div class="landingpage-bg w-full inset-0 h-full"></div>
23+
<div
24+
class="absolute p-8 md:p-0 w-full inset-0 h-full flex flex-col md:flex-row md:justify-center md:items-center bg-red-200 bg-opacity-75"
25+
>
26+
<div class="w-full h-full md:w-2/3 md:h-1/2 bg-red-300 shadow-lg rounded flex flex-col md:flex-row">
27+
<div class="h-1/2 w-full md:w-1/2"></div>
28+
<div class="p-6 w-full md:w-1/2 md:p-4 text-light">
29+
<h1 class="title animate-fade-in-right animate-ease">Experience Sound</h1>
30+
31+
<span class="absolute border-1 border-solid border-white w-800px inline-block" />
32+
33+
<p class="w-full md:w-2/3 my-8 animate-fade-in">
34+
Experience unparalleled audio immersion with the innovative SonicWave™️ Harmony Headphones.
35+
</p>
36+
37+
<ul class="flex gap-8">
38+
<li v-for="color in state.colors">
39+
<button
40+
class="w-10 h-10 rounded-full border-2 border-solid border-white mr-2 cursor-pointer"
41+
:style="{ backgroundColor: color }"
42+
@click="state.selectedColor = color"
43+
></button>
44+
</li>
45+
</ul>
46+
</div>
47+
</div>
48+
</div>
49+
<div class="absolute w-full md:w-1/2 inset-0 h-2/3 md:h-full flex justify-center items-center">
50+
<TresCanvas v-bind="gl" class="pointer-events-none">
51+
<TresPerspectiveCamera :position="[0, 0, 11]" />
52+
<MouseParallax :factor="0.1" />
53+
<Suspense>
54+
<Headphones :color="state.selectedColor" />
55+
</Suspense>
56+
<TresAmbientLight :intensity="2" />
57+
<TresPointLight :position="[0, 0, 10]" :intensity="1" />
58+
<TresDirectionalLight :position="[3, 3, 3]" :intensity="3" />
59+
</TresCanvas>
60+
</div>
61+
</template>
62+
63+
<style scoped>
64+
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Heebo&display=swap');
65+
66+
* {
67+
font-family: 'Heebo', sans-serif;
68+
}
69+
70+
.title {
71+
margin-top: -120px;
72+
font-family: 'Bebas Neue', cursive;
73+
font-size: 128px;
74+
75+
@media (max-width: 768px) {
76+
margin-top: 20px;
77+
font-size: 64px;
78+
}
79+
}
80+
81+
.landingpage-bg {
82+
background-image: url('/landingpage-bg.avif');
83+
filter: blur(24px);
84+
}
85+
</style>

0 commit comments

Comments
 (0)