tres
tres copied to clipboard
Tresjs
When TresCanvas is unmounted, an error occurs equal to the number of Html components.
Describe the bug
When TresCanvas is unmounted, an error occurs equal to the number of Html components. hook.js:608 THREE.Material: parameter 'vertexShader' has value of undefined.
<template>
<div class="about">
<h1>This is an about page</h1>
<div class="canvas">
<TresCanvas v-bind="gl">
<OrbitControls />
<TresPerspectiveCamera :position="[5, 5, 5]" />
<!-- Your scene here -->
<TresMesh cast-shadow :position="[0, 0, 0]">
<TresBoxGeometry :args="[1, 1, 2]" />
<TresMeshToonMaterial color="blue" />
<Html center transform sprite>
<div class="text">TEXT</div>
</Html>
</TresMesh>
</TresCanvas>
</div>
</div>
</template>
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
import { Html, OrbitControls } from '@tresjs/cientos'
const gl = {
clearColor: '#87CEEB',
shadows: true,
alpha: true,
shadowMapType: BasicShadowMap,
outputColorSpace: SRGBColorSpace,
toneMapping: NoToneMapping,
}
</script>
<style>
.canvas {
width: 500px;
height: 500px;
position: relative;
}
.text {
color: white;
font-weight: bold;
font-size: 30px;
}
</style>
hook.js:608 THREE.Material: parameter 'vertexShader' has value of undefined.
now about page
if I go home?
If I add Html components, the error increases by the corresponding number.
Reproduction
https://stackblitz.com/edit/tresjs-basic-4pso7hpr?file=src%2Fcomponents%2FTheExperience.vue
Steps to reproduce
No response
System Info
npx envinfo --system --npmPackages '{vite,@tresjs/*, three, vue}' --binaries --browsers
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
System:
OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
CPU: (8) x64 13th Gen Intel(R) Core(TM) i7-1355U
Memory: 1.70 GB / 7.76 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
npm: 11.0.0 - ~/.nvm/versions/node/v20.18.0/bin/npm
npmPackages:
@tresjs/cientos: ^4.0.3 => 4.0.3
@tresjs/core: ^4.3.2 => 4.3.2
vite: ~6.0.6 => 6.0.6
Used Package Manager
npm
Code of Conduct
- [X] I agree to follow this project's Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] The provided reproduction is a minimal reproducible example of the bug.
This is related to the undefined attributed to the vertexShader. I am currently fixing several issues with the <Html> component, and it will be available once those are resolved! 👌
