-
-
Notifications
You must be signed in to change notification settings - Fork 32
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Environment not working #305
Comments
Start a new pull request in StackBlitz Codeflow. |
Hi @KaliaJS thanks for reaching out.
Check here for usage https://cientos.tresjs.org/guide/staging/environment.html#usage.
Yeah that doesn't work most of the time when that happens you can create a reproduction repo based on https://github.com/Tresjs/starter so I can take a look 😊 |
@alvarosabu Okay thank you I understand better. I had tried with an EXR file and thought the extension was not important. I thought we could also put a jpg if we wanted to use only the background. |
@alvarosabu It's working but I've a warning in the console saying : expose() should be passed a plain object, received ref.
at <Component files= (6) ['/src/assets/environments/space-posx.jpg', '/src/assets/environments/space-negx.jpg', '/src/assets/environments/space-posy.jpg', '/src/assets/environments/space-negy.jpg', '/src/assets/environments/space-posz.jpg', '/src/assets/environments/space-negz.jpg'] background=true >
at <App> Any idea why ? <script setup>
import { CameraControls, Environment, Box } from '@tresjs/cientos'
import negx from '@assets/environments/space-negx.jpg'
import negy from '@assets/environments/space-negy.jpg'
import negz from '@assets/environments/space-negz.jpg'
import posx from '@assets/environments/space-posx.jpg'
import posy from '@assets/environments/space-posy.jpg'
import posz from '@assets/environments/space-posz.jpg'
const controlsState = reactive({
minDistance: 0,
maxDistance: 100,
})
</script>
<template>
<TresCanvas
window-size
shadows
>
<TresPerspectiveCamera :position="[5, 5, 5]" />
<CameraControls
v-bind="controlsState"
make-default
/>
<Suspense>
<Environment
:files="[ posx, negx, posy, negy, posz, negz ]"
:background="true"
/>
</Suspense>
<TresGridHelper :position="[0, -1, 0]" />
<Box :scale="2">
<TresMeshToonMaterial color="orange" />
</Box>
<TresAmbientLight />
<TresDirectionalLight :position="[0, 2, 4]" />
</TresCanvas>
</template> |
Describe the bug
Can someone explain to me how to make the environment work with a file? With the preset it works well. using useEnvironment doesn't work either.
I tried with a file in the public folder
but also by importing it from the assets folder.
When using the component I get only a warning :
When I use useEnvironments I get 2 warnings and 1 error :
I tried to import the environment image into Stackblitz but it doesn't work.
Reproduction
https://stackblitz.com/edit/tresjs-basic-8r1lk7
Steps to reproduce
No response
System Info
No response
Used Package Manager
yarn
Code of Conduct
The text was updated successfully, but these errors were encountered: