forked from Tresjs/lab
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: html iphone demo * feat(html-phone): added hover to closeup button
- Loading branch information
1 parent
b42d1b7
commit 69f839e
Showing
9 changed files
with
3,239 additions
and
1,782 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| <script setup lang="ts"> | ||
| import { Html, useGLTF } from '@tresjs/cientos' | ||
| import { Color, MeshStandardMaterial } from 'three' | ||
| const { nodes } = await useGLTF('/models/iphone/iphonex.glb', { draco: true }) | ||
| const model = nodes['iphonex'] | ||
| const back = nodes['iphonexback'] | ||
| const { seekByName } = useSeek() | ||
| const screen = seekByName(model, 'SCREEN') | ||
| const bottomTab = seekByName(model, 'BottomTab') | ||
| screen?.position.set(0, 0, 0.01) | ||
| screen.material.transparent = true | ||
| screen.material.opacity = 0.5 | ||
| console.log(nodes) | ||
| bottomTab.material = new MeshStandardMaterial({ | ||
| color: new Color('#000000'), | ||
| emissive: new Color('#000000'), | ||
| }) | ||
| const emit = defineEmits(['view-clicked']) | ||
| const closeUp = ref(false) | ||
| function onViewClose() { | ||
| closeUp.value = true | ||
| emit('view-clicked') | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <Levioso :speed="closeUp ? 0: 1" :rotationFactor="closeUp ? 0: 1"> | ||
| <TresGroup :position="[0, 1, 0]" ref=""> | ||
| <primitive :object="model"> | ||
| <Html :distance-factor="1.39" transform :position="[1, 0, 0.2]" :occlude="[back]" v-if="!closeUp"> | ||
| <button @click="onViewClose" | ||
| class=" | ||
| p-6 | ||
| flex | ||
| items-center | ||
| rounded-full | ||
| text-4xl | ||
| hover:bg-dark | ||
| hover:text-white | ||
| transition-colors | ||
| duration-200 | ||
| ease-in-out | ||
| " | ||
| > | ||
| <i class="i-carbon-view" /> | ||
| </button> | ||
| </Html> | ||
| <Html | ||
| transform | ||
| wrapper-class="webpage" | ||
| :distance-factor="1.39" | ||
| center | ||
| :occlude="[back]" | ||
| :position="[0.17, -0.25, 0.05]" | ||
| > | ||
| <iframe | ||
| class="rounded-xl overflow-hidden w-[430px] h-[852px] bg-white dark:bg-dark" | ||
| src="https://tresjs.org" | ||
| frameborder="0" | ||
| /> | ||
| </Html> | ||
|
|
||
| </primitive> | ||
| <primitive :object="back" /> | ||
| </TresGroup> | ||
| </Levioso> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| <script setup lang="ts"> | ||
| import { TresCanvas } from '@tresjs/core' | ||
| import { BasicShadowMap, SRGBColorSpace, NoToneMapping, PerspectiveCamera } from 'three' | ||
| import gsap from 'gsap' | ||
| const gl = { | ||
| shadows: true, | ||
| alpha: true, | ||
| shadowMapType: BasicShadowMap, | ||
| outputColorSpace: SRGBColorSpace, | ||
| toneMapping: NoToneMapping, | ||
| } | ||
| const cameraRef = ref<PerspectiveCamera | null>(null) | ||
| const onViewClicked = () => { | ||
| gsap.to(cameraRef.value.position, { | ||
| duration: 1, | ||
| x: 0, | ||
| y: 3, | ||
| z: 3, | ||
| ease: 'power2.inOut', | ||
| onUpdate: () => { | ||
| cameraRef.value.lookAt(0, 3, 0) | ||
| }, | ||
| }) | ||
| } | ||
| const { hasFinishLoading, progress } = await useProgress() | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="hero absolute z-30 prose p-24"> | ||
| <h2 class="text-6xl opacity-0 animate-fade-in animate-delay-1s animate-forwards transition-all ease-in-out">iTres</h2> | ||
| <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> | ||
| <p class="opacity-0 animate-fade-in animate-delay-4s animate-forwards transition-all ease-in-out">Only $2999.99</p> | ||
| </div> | ||
| <Transition | ||
| name="fade-overlay" | ||
| enter-active-class="opacity-1 transition-opacity duration-200" | ||
| leave-active-class="opacity-0 transition-opacity duration-200" | ||
| > | ||
| <div | ||
| v-show="!hasFinishLoading" | ||
| class="absolute t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono" | ||
| > | ||
| <div class="w-200px text-black text-center"> | ||
| <p class="animate-tada"> | ||
| 🤳 | ||
| </p> | ||
| Loading... {{ progress }} % | ||
| </div> | ||
| </div> | ||
| </Transition> | ||
| <TresCanvas v-bind="gl"> | ||
| <TresPerspectiveCamera | ||
| ref="cameraRef" | ||
| :position="[5, 5, 5]" | ||
| :look-at="[0, 2, 0]" | ||
| /> | ||
| <Suspense> | ||
| <IPhone @view-clicked="onViewClicked" /> | ||
| </Suspense> | ||
| <ContactShadows | ||
| :blur="3.5" | ||
| :resolution="512" | ||
| :opacity="1" | ||
| /> | ||
| <Suspense> | ||
| <Environment | ||
| background | ||
| :blur="0.9" | ||
| preset="city" | ||
| /> | ||
| </Suspense> | ||
| <TresAmbientLight :intensity="1" /> | ||
| <TresDirectionalLight | ||
| :intensity="2" | ||
| :position="[2, 3, 0]" | ||
| :cast-shadow="true" | ||
| :shadow-camera-far="50" | ||
| :shadow-camera-left="-10" | ||
| :shadow-camera-right="10" | ||
| :shadow-camera-top="10" | ||
| :shadow-camera-bottom="-10" | ||
| /> | ||
| </TresCanvas> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| @import url('https://fonts.cdnfonts.com/css/sf-pro-display'); | ||
| .hero { | ||
| font-family: 'SF Pro Display'; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| --- | ||
| thumbnail: /html-phone.png | ||
| title: HTML iPhone | ||
| slug: html-phone | ||
| author: alvarosabu | ||
| status: published | ||
| description: Using HTML abstraction to render a page inside a model | ||
| tags: ['html', 'gltf'] | ||
| --- | ||
|
|
||
| ::html-phone | ||
| :: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.