-
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: 83 trescanvas component is missing template or render function a…
…fter 3100 (#84) * chore: update to v3.10.0 * chore: better playground * chore: update all and test removing the server placeholder and some properties * fix: replace TresCanvas with runtime SSR version * chore: expose TresCanvas client and server + ssr build variants * chore: remove v-bind * chore: expose tres canvas core types * chore: revert back client/server TresCanvas and include dts * chore: remove extra client registration on ssr * chore: remove promise.all * chore: revert back ssr pair components and remove comment * chore: simplify components registration --------- Co-authored-by: userquin <userquin@gmail.com>
- Loading branch information
1 parent
f54128b
commit faca608
Showing
15 changed files
with
1,989 additions
and
2,531 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
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 |
|---|---|---|
| @@ -1,48 +1,5 @@ | ||
| <script setup lang="ts"> | ||
| import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three' | ||
| const gl = reactive({ | ||
| clearColor: '#18181B', | ||
| shadows: true, | ||
| alpha: false, | ||
| shadowMapType: BasicShadowMap, | ||
| outputColorSpace: SRGBColorSpace, | ||
| toneMapping: NoToneMapping, | ||
| }) | ||
| const showCube = ref(false) | ||
| setTimeout(() => { | ||
| showCube.value = true | ||
| }, 5000) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div style="height: 100vh"> | ||
| <TresCanvas v-bind="gl"> | ||
| <TresPerspectiveCamera | ||
| :position="[-5.3, 8.3, 10.6]" | ||
| :look-at="[0, 0, 0]" | ||
| /> | ||
| <OrbitControls /> | ||
| <TresAmbientLight | ||
| :color="0xffffff" | ||
| :intensity="0.5" | ||
| /> | ||
| <Suspense> | ||
| <NuxtStones v-if="showCube" /> | ||
| </Suspense> | ||
| <ShaderBall /> | ||
| </TresCanvas> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style> | ||
| html, | ||
| body { | ||
| background: "#18181B"; | ||
| margin: 0; | ||
| padding: 0; | ||
| overflow: hidden; | ||
| } | ||
| </style> | ||
| <NuxtLayout> | ||
| <NuxtPage /> | ||
| </NuxtLayout> | ||
| </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,44 @@ | ||
| <script setup lang="ts"> | ||
| </script> | ||
|
|
||
| <template> | ||
| <div> | ||
| <header class="menu"> | ||
| <div> | ||
| <NuxtLink to="/"> | ||
| Home | ||
| </NuxtLink> | ||
| </div> | ||
| <div> | ||
| <NuxtLink | ||
| to="/page1" | ||
| :prefetch="false" | ||
| > | ||
| page1 | ||
| </NuxtLink> | ||
| </div> | ||
| <div> | ||
| <a href="/page2"> | ||
| page2 | ||
| </a> | ||
| </div> | ||
| </header> | ||
| <slot /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style> | ||
| .menu { | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 3rem; | ||
| color: #fff; | ||
| display: flex; | ||
| justify-content: space-around; | ||
| align-items: center; | ||
| z-index: 100; | ||
| } | ||
| </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 |
|---|---|---|
| @@ -1,9 +1,21 @@ | ||
| export default defineNuxtConfig({ | ||
| ssr: true, | ||
| modules: ['../src/module', '@nuxt/devtools'], | ||
| // for testing purposes | ||
| // imports: { | ||
| // autoImport: false, | ||
| // }, | ||
| tres: { | ||
| // for testing purposes, and so we test both deduplication + auto-detection capabilities | ||
| modules: ['@tresjs/cientos'], | ||
| devtools: true, | ||
| glsl: true, | ||
| }, | ||
| // for testing purposes: include some nuxt build tests | ||
| nitro: { | ||
| routeRules: { | ||
| '/page1': { ssr: false }, // <== client rendered page | ||
| '/page2': { prerender: true }, // <== server SSG page + payload | ||
| }, | ||
| }, | ||
| }) |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <script setup lang="ts"> | ||
| // for testing purposes with auto-import disabled | ||
| // import { TresCanvas } from '#components' | ||
| </script> | ||
|
|
||
| <template> | ||
| <TresCanvas window-size> | ||
| <TresPerspectiveCamera /> | ||
| <TresMesh> | ||
| <TresTorusGeometry :args="[1, 0.5, 16, 32]" /> | ||
| <TresMeshBasicMaterial color="orange" /> | ||
| </TresMesh> | ||
| </TresCanvas> | ||
| </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,24 @@ | ||
| <script setup lang="ts"> | ||
| // for testing purposes with auto-import disabled | ||
| // import { TresCanvas } from '#components' | ||
| // import { onMounted, useRenderLoop } from '#imports' | ||
| const { resume } = useRenderLoop() | ||
| onMounted(() => { | ||
| resume() | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <TresCanvas | ||
| :window-size="true" | ||
| clear-color="#82CDef" | ||
| > | ||
| <TresPerspectiveCamera /> | ||
| <TresMesh> | ||
| <TresTorusGeometry :args="[1, 0.5, 16, 32]" /> | ||
| <TresMeshBasicMaterial color="blue" /> | ||
| </TresMesh> | ||
| </TresCanvas> | ||
| </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,14 @@ | ||
| <script setup lang="ts"> | ||
| // for testing purposes with auto-import disabled | ||
| // import { TresCanvas } from '#components' | ||
| </script> | ||
|
|
||
| <template> | ||
| <TresCanvas window-size> | ||
| <TresPerspectiveCamera /> | ||
| <TresMesh> | ||
| <TresTorusGeometry :args="[1, 0.5, 16, 32]" /> | ||
| <TresMeshBasicMaterial color="pink" /> | ||
| </TresMesh> | ||
| </TresCanvas> | ||
| </template> |
Oops, something went wrong.