<Sky /> can not utilize

[IKE1001]

Describe the bug

Reproduction

no

Steps to reproduce

No response

System Info

No response

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.

[RaneeX]

Same issue, I want to use Sky component, but it is not working.

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { OrbitControls, Sky } from '@tresjs/cientos'
</script>

<template>
  <TresCanvas :tone-mapping-exposure="0.25">
    <TresPerspectiveCamera :position="[0, 0, 2000]" />
    <Sky 
          :turbidity="3.4"
          :rayleigh="3"
          :mie-coefficient="0.005"
          :mie-directional-g="0.7"
          :elevation="0.6"
          :azimuth="180"
          :distance="450000"
 />
    <OrbitControls
      :enable-pan="false"
      :enable-zoom="false"
    />
  </TresCanvas>
</template>

version:

"@tresjs/cientos": "3.9.0",
"@tresjs/core": "3.9.0",
"vue": "^3.3.4",
"three": "^0.160.0",

[RaneeX]

Instead of importing from cientos, you can use the Sky component in this way below, and I don't see why using the import is not available.

Code from cientos:

<script setup lang="ts">
// eslint-disable-file vue/attribute-hyphenation
import { MathUtils, Vector3 } from 'three';
import { Sky as SkyImpl } from 'three/examples/jsm/objects/Sky';
import { computed, shallowRef } from 'vue';

export interface SkyProps {
  /**
   * Haziness
   * @param {number} turbidity
   */
  turbidity?: number;
  /**
   * [Rayleigh scattering](https://en.wikipedia.org/wiki/Rayleigh_scattering)
   */
  rayleigh?: number;
  /**
   * [Mie scattering](https://en.wikipedia.org/wiki/Mie_scattering) amount
   */
  mieCoefficient?: number;
  /**
   * [Mie scattering](https://en.wikipedia.org/wiki/Mie_scattering) direction
   */
  mieDirectionalG?: number;
  /**
   * Sun's elevation from the horizon, in degrees
   */
  elevation?: number;
  /**
   * Sun's [azimuth angle](https://en.wikipedia.org/wiki/Solar_azimuth_angle), in degrees – its horizontal coordinate on the horizon
   */
  azimuth?: number;
  /**
   * Sky box scale
   */
  distance?: number;
}

const props = withDefaults(defineProps<SkyProps>(), {
  turbidity: 3.4,
  rayleigh: 3,
  mieCoefficient: 0.005,
  mieDirectionalG: 0.7,
  elevation: 0.6,
  azimuth: 180,
  distance: 450000,
});

const skyRef = shallowRef<SkyImpl>();
const skyImpl = new SkyImpl();
const sunPosition = computed(() => getSunPosition(props.azimuth, props.elevation));

function getSunPosition(azimuth: number, elevation: number) {
  const phi = MathUtils.degToRad(90 - elevation);
  const theta = MathUtils.degToRad(azimuth);
  return new Vector3().setFromSphericalCoords(1, phi, theta);
}

defineExpose({
  root: skyRef,
  sunPosition: sunPosition.value,
});
</script>

<template>
  <primitive
    ref="skyRef"
    :object="skyImpl"
    :material-uniforms-turbidity-value="props.turbidity"
    :material-uniforms-rayleigh-value="props.rayleigh"
    :material-uniforms-mieCoefficient-value="props.mieCoefficient"
    :material-uniforms-mieDirectionalG-value="props.mieDirectionalG"
    :material-uniforms-sunPosition-value="sunPosition"
    :scale="props.distance"
  />
</template>

[andretchen0]

Hi @IKE1001

Thanks for filing the issue. I can also reproduce.

Minimal reproduction

https://stackblitz.com/edit/tresjs-basic-2wnmw7?file=src%2Fcomponents%2FTheExperience.vue

Workaround

@RaneeX 's solution here: https://github.com/Tresjs/cientos/issues/451#issuecomment-2277028362

For followup

In the past, Tres core as well as the linter have broken props that have camelCase in their props, which Cientos sometimes uses for sending values directly to THREE.

That may be what's happening here with: :material-uniforms-mieCoefficient-value.

[JaimeTorrealba]

This was solved with the V4 of cientos, please feel free to re-open if not