Skip to content

Commit c4361a1

Browse files
alvarosabualvarosabu
authored
Merge pull request Tresjs#49 from Tresjs/fix-glass-example
fix: glass effect demo, add info
2 parents b44014a + f09c33a commit c4361a1

File tree

3 files changed

+173
-60
lines changed

3 files changed

+173
-60
lines changed

‎components/content/GlassExample.vue

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
<script setup>
2-
import { shallowRef, reactive } from 'vue'
32
import { EquirectangularReflectionMapping } from 'three'
43
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'
54
6-
//This effect is base on: https://tympanus.net/codrops/2021/10/27/creating-the-effect-of-transparent-glass-and-plastic-in-three-js/
7-
85
const { map, normalMap } = await useTexture({
96
map: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/glass-effect/bg-texture.jpg',
107
normalMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/glass-effect/normal-example.jpg',
@@ -26,13 +23,9 @@ const options = reactive({
2623
envMap: hdrEquirect,
2724
clearcoatNormalMap: normalMap,
2825
envMapIntensity: 1.5,
29-
clearcoat: 0.5,
30-
clearcoatRoughness: 0.1,
31-
clearcoatNormalScale: 0.3,
3226
})
3327
3428
const { pane } = useTweakPane()
35-
3629
pane.addInput(options, 'transmission', {
3730
label: 'transmission',
3831
min: 0,
@@ -57,24 +50,6 @@ pane.addInput(options, 'roughness', {
5750
max: 1,
5851
step: 0.01,
5952
})
60-
pane.addInput(options, 'clearcoat', {
61-
label: 'clearcoat',
62-
min: 0,
63-
max: 1,
64-
step: 0.01,
65-
})
66-
pane.addInput(options, 'clearcoatRoughness', {
67-
label: 'clearcoatRoughness',
68-
min: 0,
69-
max: 1,
70-
step: 0.01,
71-
})
72-
pane.addInput(options, 'clearcoatNormalScale', {
73-
label: 'clearcoatNormalScale',
74-
min: 0,
75-
max: 1,
76-
step: 0.01,
77-
})
7853
7954
const hdrEquiredButton = pane.addButton({
8055
title: 'Enable/Disable hdrEquired',

‎content/experiments/glass-material.md

Lines changed: 96 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,99 @@ description: A realistic glass/plastic effect, play with it!
66
tags: ['materials', 'useTweakPane']
77
---
88

9-
<GlassExample />
9+
::glass-example
10+
::
11+
12+
::the-info
13+
14+
![Glass material](/glass-example.png)
15+
16+
# Glass material
17+
18+
Author: [@**jaimebboyjt**](https://twitter.com/jaimebboyjt).
19+
20+
> This effect is base on: https://tympanus.net/codrops/2021/10/27/creating-the-effect-of-transparent-glass-and-plastic-in-three-js/
21+
22+
```vue
23+
// App.vue
24+
<script setup>
25+
import { EquirectangularReflectionMapping } from 'three'
26+
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'
27+
28+
const { map, normalMap } = await useTexture({
29+
map: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/glass-effect/bg-texture.jpg',
30+
normalMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/glass-effect/normal-example.jpg',
31+
})
32+
33+
const planeRef = shallowRef(null)
34+
35+
// the hdrEquirect image add a beautiful realistic glass effect
36+
const hdrEquirect = await new RGBELoader().load(
37+
'https://raw.githubusercontent.com/Tresjs/assets/main/textures/glass-effect/glass-effect.hdr',
38+
() => {
39+
hdrEquirect.mapping = EquirectangularReflectionMapping
40+
},
41+
)
42+
43+
const options = reactive({
44+
transmission: 1,
45+
thickness: 0.5,
46+
roughness: 0,
47+
envMap: hdrEquirect,
48+
clearcoatNormalMap: normalMap,
49+
envMapIntensity: 1.5,
50+
})
51+
52+
const { pane } = useTweakPane()
53+
pane.addInput(options, 'transmission', {
54+
label: 'transmission',
55+
min: 0,
56+
max: 1,
57+
step: 0.01,
58+
})
59+
pane.addInput(options, 'thickness', {
60+
label: 'thickness',
61+
min: 0,
62+
max: 1,
63+
step: 0.01,
64+
})
65+
pane.addInput(options, 'envMapIntensity', {
66+
label: 'envMapIntensity',
67+
min: 0,
68+
max: 3,
69+
step: 0.1,
70+
})
71+
pane.addInput(options, 'roughness', {
72+
label: 'roughness',
73+
min: 0,
74+
max: 1,
75+
step: 0.01,
76+
})
77+
78+
const hdrEquiredButton = pane.addButton({
79+
title: 'Enable/Disable hdrEquired',
80+
})
81+
hdrEquiredButton.on('click', () => {
82+
options.envMap = options.envMap ? null : hdrEquirect
83+
})
84+
</script>
85+
<template>
86+
<TresCanvas window-size clear-color="#F7F7F7" class="over-hidden" grid>
87+
<TresPerspectiveCamera :position="[0, 0, 3]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
88+
<OrbitControls />
89+
<TresGridHelper :args="[30, 30]" :position="[0, -2.5, 0]" />
90+
<TresMesh :position="[-0, 0, 0]">
91+
<TresIcosahedronGeometry :args="[1, 10]" />
92+
<TresMeshPhysicalMaterial v-bind="options" />
93+
</TresMesh>
94+
<TresMesh ref="planeRef" :position="[0, 0, -1]">
95+
<TresPlaneGeometry :args="[5, 5]" />
96+
<TresMeshBasicMaterial :map="map" />
97+
</TresMesh>
98+
<TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
99+
<TresAmbientLight />
100+
</TresCanvas>
101+
</template>
102+
```
103+
104+
::

0 commit comments

Comments
 (0)