Skip to content

Commit 69f839e

Browse files
alvarosabualvarosabu
authored
feat: html iphone demo (#82)
* feat: html iphone demo * feat(html-phone): added hover to closeup button
1 parent b42d1b7 commit 69f839e

File tree

9 files changed

+3239
-1782
lines changed

9 files changed

+3239
-1782
lines changed

‎components/content/html-phone/iPhone.vue‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<script setup lang="ts">
2+
import { Html, useGLTF } from '@tresjs/cientos'
3+
import { Color, MeshStandardMaterial } from 'three'
4+
const { nodes } = await useGLTF('/models/iphone/iphonex.glb', { draco: true })
5+
const model = nodes['iphonex']
6+
const back = nodes['iphonexback']
7+
const { seekByName } = useSeek()
8+
9+
const screen = seekByName(model, 'SCREEN')
10+
const bottomTab = seekByName(model, 'BottomTab')
11+
screen?.position.set(0, 0, 0.01)
12+
screen.material.transparent = true
13+
screen.material.opacity = 0.5
14+
console.log(nodes)
15+
16+
bottomTab.material = new MeshStandardMaterial({
17+
color: new Color('#000000'),
18+
emissive: new Color('#000000'),
19+
})
20+
21+
const emit = defineEmits(['view-clicked'])
22+
const closeUp = ref(false)
23+
function onViewClose() {
24+
closeUp.value = true
25+
emit('view-clicked')
26+
}
27+
</script>
28+
29+
<template>
30+
<Levioso :speed="closeUp ? 0: 1" :rotationFactor="closeUp ? 0: 1">
31+
<TresGroup :position="[0, 1, 0]" ref="">
32+
<primitive :object="model">
33+
<Html :distance-factor="1.39" transform :position="[1, 0, 0.2]" :occlude="[back]" v-if="!closeUp">
34+
<button @click="onViewClose"
35+
class="
36+
p-6
37+
flex
38+
items-center
39+
rounded-full
40+
text-4xl
41+
hover:bg-dark
42+
hover:text-white
43+
transition-colors
44+
duration-200
45+
ease-in-out
46+
"
47+
>
48+
<i class="i-carbon-view" />
49+
</button>
50+
</Html>
51+
<Html
52+
transform
53+
wrapper-class="webpage"
54+
:distance-factor="1.39"
55+
center
56+
:occlude="[back]"
57+
:position="[0.17, -0.25, 0.05]"
58+
>
59+
<iframe
60+
class="rounded-xl overflow-hidden w-[430px] h-[852px] bg-white dark:bg-dark"
61+
src="https://tresjs.org"
62+
frameborder="0"
63+
/>
64+
</Html>
65+
66+
</primitive>
67+
<primitive :object="back" />
68+
</TresGroup>
69+
</Levioso>
70+
</template>

‎components/content/html-phone/index.vue‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<script setup lang="ts">
2+
import { TresCanvas } from '@tresjs/core'
3+
import { BasicShadowMap, SRGBColorSpace, NoToneMapping, PerspectiveCamera } from 'three'
4+
import gsap from 'gsap'
5+
const gl = {
6+
shadows: true,
7+
alpha: true,
8+
shadowMapType: BasicShadowMap,
9+
outputColorSpace: SRGBColorSpace,
10+
toneMapping: NoToneMapping,
11+
}
12+
13+
const cameraRef = ref<PerspectiveCamera | null>(null)
14+
15+
const onViewClicked = () => {
16+
gsap.to(cameraRef.value.position, {
17+
duration: 1,
18+
x: 0,
19+
y: 3,
20+
z: 3,
21+
ease: 'power2.inOut',
22+
onUpdate: () => {
23+
cameraRef.value.lookAt(0, 3, 0)
24+
},
25+
})
26+
}
27+
28+
const { hasFinishLoading, progress } = await useProgress()
29+
</script>
30+
31+
<template>
32+
<div class="hero absolute z-30 prose p-24">
33+
<h2 class="text-6xl opacity-0 animate-fade-in animate-delay-1s animate-forwards transition-all ease-in-out">iTres</h2>
34+
<p class="text-2xl opacity-0 animate-fade-in animate-delay-2s animate-forwards transition-all ease-in-out">New fancy phone, mind-blowing. Head turning. </p>
35+
<p class="opacity-0 animate-fade-in animate-delay-4s animate-forwards transition-all ease-in-out">Only $2999.99</p>
36+
</div>
37+
<Transition
38+
name="fade-overlay"
39+
enter-active-class="opacity-1 transition-opacity duration-200"
40+
leave-active-class="opacity-0 transition-opacity duration-200"
41+
>
42+
<div
43+
v-show="!hasFinishLoading"
44+
class="absolute t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono"
45+
>
46+
<div class="w-200px text-black text-center">
47+
<p class="animate-tada">
48+
🤳
49+
</p>
50+
Loading... {{ progress }} %
51+
</div>
52+
</div>
53+
</Transition>
54+
<TresCanvas v-bind="gl">
55+
<TresPerspectiveCamera
56+
ref="cameraRef"
57+
:position="[5, 5, 5]"
58+
:look-at="[0, 2, 0]"
59+
/>
60+
<Suspense>
61+
<IPhone @view-clicked="onViewClicked" />
62+
</Suspense>
63+
<ContactShadows
64+
:blur="3.5"
65+
:resolution="512"
66+
:opacity="1"
67+
/>
68+
<Suspense>
69+
<Environment
70+
background
71+
:blur="0.9"
72+
preset="city"
73+
/>
74+
</Suspense>
75+
<TresAmbientLight :intensity="1" />
76+
<TresDirectionalLight
77+
:intensity="2"
78+
:position="[2, 3, 0]"
79+
:cast-shadow="true"
80+
:shadow-camera-far="50"
81+
:shadow-camera-left="-10"
82+
:shadow-camera-right="10"
83+
:shadow-camera-top="10"
84+
:shadow-camera-bottom="-10"
85+
/>
86+
</TresCanvas>
87+
</template>
88+
89+
<style scoped>
90+
@import url('https://fonts.cdnfonts.com/css/sf-pro-display');
91+
92+
.hero {
93+
font-family: 'SF Pro Display';
94+
}
95+
</style>

‎content/experiments/html-phone.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
thumbnail: /html-phone.png
3+
title: HTML iPhone
4+
slug: html-phone
5+
author: alvarosabu
6+
status: published
7+
description: Using HTML abstraction to render a page inside a model
8+
tags: ['html', 'gltf']
9+
---
10+
11+
::html-phone
12+
::

‎content/experiments/nuxt-stones.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ slug: nuxt-stones
55
status: published
66
author: alvarosabu
77
description: Nuxt Stone is a simple scene with a stone model and a Nuxt logo. The scene is rendered with baked lighting and post-processing effects.
8-
tags: ['gltf', 'baked', 'emission', 'post-processing']
8+
tags: ['gltf', 'baked', 'emission', 'post-processing', 'bloom']
99
---
1010

1111
<NuxtStones />

‎nuxt.config.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,14 @@ export default defineNuxtConfig({
1717
],
1818
},
1919
},
20-
modules: ['@tresjs/nuxt', '@unocss/nuxt', 'nuxt-svgo', '@nuxt/content', '@nuxt/image-edge'],
20+
modules: [
21+
'@tresjs/nuxt',
22+
'@unocss/nuxt',
23+
'nuxt-svgo',
24+
'@nuxt/content',
25+
'@nuxt/image-edge',
26+
"@nuxt/image"
27+
],
2128
css: ['@unocss/reset/tailwind-compat.css', '@tresjs/leches/styles'],
2229
declare: ['*.glsl'],
2330
unocss: {
@@ -106,4 +113,4 @@ export default defineNuxtConfig({
106113
build: {
107114
transpile: ['fsevents', 'postprocessing'],
108115
},
109-
})
116+
})

‎package.json‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,32 +9,33 @@
99
"lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue"
1010
},
1111
"dependencies": {
12-
"@tresjs/post-processing": "^0.4.0",
12+
"@tresjs/post-processing": "^0.7.0",
1313
"mdast-util-to-string": "^4.0.0",
14-
"three": "^0.157.0",
14+
"three": "^0.158.0",
1515
"three-custom-shader-material": "^5.4.0",
1616
"unist-util-stringify-position": "^4.0.0"
1717
},
1818
"devDependencies": {
19-
"@iconify-json/carbon": "^1.1.21",
20-
"@iconify-json/game-icons": "^1.1.3",
21-
"@iconify-json/ic": "^1.1.14",
22-
"@iconify-json/logos": "^1.1.37",
23-
"@nuxt/content": "^2.8.2",
24-
"@nuxt/image-edge": "1.0.0-rc.3-28290977.ffac767",
25-
"@tresjs/cientos": "3.5.0",
26-
"@tresjs/core": "^3.3.0",
19+
"@iconify-json/carbon": "^1.1.24",
20+
"@iconify-json/game-icons": "^1.1.6",
21+
"@iconify-json/ic": "^1.1.16",
22+
"@iconify-json/logos": "^1.1.40",
23+
"@nuxt/content": "^2.8.5",
24+
"@nuxt/image": "^1.1.0",
25+
"@nuxt/image-edge": "1.1.0-28355789.b3279fe",
26+
"@tresjs/cientos": "3.6.0",
27+
"@tresjs/core": "^3.5.1",
2728
"@tresjs/eslint-config-vue": "^0.2.1",
28-
"@tresjs/leches": "^0.12.0",
29-
"@tresjs/nuxt": "1.2.0",
29+
"@tresjs/leches": "0.15.0-next.1",
30+
"@tresjs/nuxt": "1.3.0",
3031
"@tweakpane/plugin-essentials": "^0.2.0",
31-
"@types/three": "^0.157.0",
32-
"@unocss/nuxt": "^0.55.3",
33-
"gsap": "^3.12.2",
34-
"nuxt": "^3.7.4",
35-
"nuxt-svgo": "^3.5.5",
36-
"postprocessing": "^6.33.2",
37-
"vite-plugin-glsl": "^1.1.2",
38-
"vite-svg-loader": "^4.0.0"
32+
"@types/three": "^0.159.0",
33+
"@unocss/nuxt": "^0.58.0",
34+
"gsap": "^3.12.3",
35+
"nuxt": "^3.8.2",
36+
"nuxt-svgo": "^3.7.0",
37+
"postprocessing": "^6.33.4",
38+
"vite-plugin-glsl": "^1.2.0",
39+
"vite-svg-loader": "^5.1.0"
3940
}
4041
}

0 commit comments

Comments
 (0)