Tresjs/cientos

Environment not working

Opened this issue · 4 comments

KaliaJS commented

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

<Environment
  path="/milkyway-4k.jpg"
  :background="true"
/>

but also by importing it from the assets folder.

import MilkyWayEnvironment from '@assets/environments/milkyway-4k.jpg'

<Environment
  :path="MilkyWayEnvironment"
  :background="true"
/>

When using the component I get only a warning :

[Vue warn]: expose() should be passed a plain object, received ref. 
  at <Component path="/milkyway-4k.jpg" background=true > 
  at <App>

When I use useEnvironments I get 2 warnings and 1 error :

[Vue warn]: injection "useTres" not found. 
Unhandled error during execution of setup function 
tres.js:431 Uncaught (in promise) Error: useTresContext must be used together with useTresContextProvider

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

alvarosabu commented

Hi @KaliaJS thanks for reaching out.

I tried with a file in the public folder

path is not the correct prop, you need to use files and accept and array of .jpeg or an hdr file, you cant pass only a jpg because Environment doesn't work that way, it only accepts a CubeMap of images or .hdr files

Check here for usage https://cientos.tresjs.org/guide/staging/environment.html#usage.

I tried to import the environment image into Stackblitz but it doesn't work.

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 😊

KaliaJS commented

@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.

KaliaJS commented

@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>