tresjs / cientos Goto Github PK

Description

Vue 3.3.4 added an experimental feature called propsDeconstruct allowing us to dispense withDefaults in favor of a more natural deconstruction that keeps the reactivity.

const { args = [1, 1, 1], color = '0xffffff' } = defineProps<{
  args?: ConstructorParameters<typeof BoxGeometry>
  color?: TresColor
}>()

Suggested solution

As of now, the following components has been updated, we need to update the rest

• All shapes
• Smoke
• Stars
• Levioso
• Contact Shadows
• Transform Controls
• Orbit Controls

Alternative

No response

Additional context

No response

Validations

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

Using ScrollControls on the Nuxt playground gets broken

Reproduction

https://deploy-preview-52--tresjs-playground.netlify.app/experiments/scroll-controls

Steps to reproduce

No response

System Info

System:
    OS: macOS 13.4.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 100.84 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.14.1 - ~/.nvm/versions/node/v18.14.1/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.3.1 - ~/.nvm/versions/node/v18.14.1/bin/npm
  Browsers:
    Brave Browser: 114.1.52.130
    Chrome: 114.0.5735.198
    Firefox: 114.0.2
    Safari: 16.5.1
  npmPackages:
    @tresjs/cientos: 2.3.0 => 2.3.0 
    @tresjs/core: ^2.4.0 => 2.4.0 
    @tresjs/nuxt: 1.0.0 => 1.0.0 
    @tresjs/post-processing: ^0.3.0 => 0.3.0

Used Package Manager

pnpm

Code of Conduct

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

Floating component similar https://github.com/pmndrs/drei/blob/master/src/core/Float.tsx

Is your feature request related to a problem? Please describe.
In order to create a real first person shooter control, in combination with the PointerLock Controls or any other Mesh that you want to move

const map = [
{ name: Controls.forward, keys: ['ArrowUp', 'KeyW'] },
{ name: Controls.back, keys: ['ArrowDown', 'KeyS'] },
{ name: Controls.left, keys: ['ArrowLeft', 'KeyA'] },
{ name: Controls.right, keys: ['ArrowRight', 'KeyD'] },
{ name: Controls.jump, keys: ['Space'] },
]

<KeyboardControls map={map}>
     <PointerLockControls/> // here could be a Mesh or a Camera
</KeyboardControls>

Describe the solution you'd like
Abstraction in Cientos

Suggested solution
Check drei implementation

Additional context
Add any other context or screenshots about the feature request here.

Describe the bug

Using <Environment /> from cientos gives several errors on the console, probably related to the color space breaking change from ThreeJS v152.

Don't rely on the reproduction

Reproduction

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

Steps to reproduce

Check the console

System Info

System:
    OS: macOS 13.2.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 93.86 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.14.1 - ~/.nvm/versions/node/v18.14.1/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.3.1 - ~/.nvm/versions/node/v18.14.1/bin/npm
  npmPackages:
    @tresjs/cientos: 2.1.2 => 2.1.1 
    @tresjs/core: 2.1.2 => 2.1.2 
    @tresjs/post-processing: ^0.1.0 => 0.1.0

Used Package Manager

pnpm

Code of Conduct

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

Is your feature request related to a problem? Please describe.
A Particle abstraction implementation is one abstraction that helps a user to create stars in the sky, sparkles, etc

<Particles :amount="1" :texture"MYCUSTOMTEXTURE" :depth="0.4" :speed="10" />

Describe the solution you'd like
Abstraction in Cientos

Suggested solution
Check drei [implementation](https://github.com/pmndrs/drei/blob/master/src/core/Cloud.tsx)

Additional context
Add any other context or screenshots about the feature request here.

https://github.com/pmndrs/drei#pivotcontrols

Describe the bug
GLTF Model is trying to return the model by ref before the variable is initialized on model load

Reproduction
Reproduction

Expected behavior
Error on console disappears and model is returned successfully via templateref

System Info
Output of npx envinfo --system --npmPackages '{vite,@tresjs/*, three, vue}' --binaries --browsers

  System:
    OS: Linux 5.0 undefined
    CPU: (5) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @tresjs/cientos: ^2.0.0-alpha.0 => 2.0.0-alpha.1 
    @tresjs/core: ^2.0.0-alpha.0 => 2.0.0-alpha.1 
    vite: ^3.2.4 => 3.2.5 

Same as Tresjs/tres#269 in cientos

Description

Adapt cientos package to Tresjs/tres#331 changes

Abstractions

• Environment
• MouseParallax
• Stars
• Smoke
• Levioso
• Contact Shadows
• Precipitation

Controls

• OrbitControls @alvarosabu
• TransformControls
• PointerLockControls
• KeyboardControls
• MapControls
• ScrollControls

Materials

• WobbleMaterial

Staging

• Backdrop

Misc

• useTweakpane

Suggested solution

• Refactor watchers
• Remove deconstruct props if needed
• Merge to 'next'

Alternative

No response

Additional context

No response

Validations

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Add a lint-pr.yaml to the CI/CD to check quality of PRs using https://github.com/amannn/action-semantic-pull-request

feat(ui): Add `Button` component
^    ^    ^
|    |    |__ Subject
|    |_______ Scope
|____________ Type

name: "Lint PR"

on:
  pull_request_target:
    types:
      - opened
      - edited
      - synchronize

jobs:
  main:
    name: Validate PR title
    runs-on: ubuntu-latest
    steps:
      - uses: amannn/action-semantic-pull-request@v5
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Describe the bug
GLTF Model is not loading and rendering the model

Reproduction
Reproduction

Steps
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
GLTFModel renders the model

Screenshots
If applicable, add screenshots to help explain your problem.

System Info
Output of npx envinfo --system --npmPackages '{vite,@tresjs/*, three, vue}' --binaries --browsers

  System:
    OS: Linux 5.0 undefined
    CPU: (5) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @tresjs/cientos: ^2.0.0-alpha.0 => 2.0.0-alpha.0 
    @tresjs/core: ^2.0.0-alpha.0 => 2.0.0-alpha.0 
    vite: ^3.2.4 => 3.2.5 

Additional context
Add any other context about the problem here.

Blank page and possible memory leak

Description

For more options on outside environment

Suggested solution

https://github.com/pmndrs/drei#sky

Alternative

No response

Additional context

No response

Validations

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Is your feature request related to a problem? Please describe.
Shining floors everywhere!!

Describe the solution you'd like
Same concept as R3F Drei https://github.com/pmndrs/drei#meshreflectormaterial

Suggested solution
Shaders

Description

Good controls for presentation purposes

Suggested solution

https://github.com/pmndrs/drei#presentationcontrols

Alternative

No response

Additional context

No response

Validations

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

When the mouse wheel is used, this error occurs all the time, causing the scene to fail to zoom

Reproduction

https://stackblitz.com/edit/vitejs-vite-9seq6j?file=tsconfig.json,package.json,vite.config.ts,src%2Fcomponents%2FTheExperience.vue

Steps to reproduce

No response

System Info

No response

Used Package Manager

npm

Code of Conduct

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

Is your feature request related to a problem? Please describe.
A Clouds (or smoke) implementation, is one abstraction that helps a user to create smoking effect

<Clouds :opacity="1" :texture"MYCUSTOMTEXTURE" :speen="0.4" :segments="10" color="#000000" />

Describe the solution you'd like
Abstraction in Cientos

Suggested solution
Check drei implementation

Additional context
Add any other context or screenshots about the feature request here.

Description

As a developer using TresJS, I want

• Environment props to be reactive
• More presets other than 'sunset' (city, etc)

so that:

• I can dynamically configure the preset or toggle the background property

Suggested solution

Modify the useEnvironment/component.ts component so:

• Convert to vue file SFC
• texture should be a ref
• Set the default for the props here.

Modify the useEnvironment/index.ts composable so:

• Reacts to prop changes (Using watchers and computed)
• Return the texture as a ref

Alternative

No response

Additional context

No response

Validations

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Move cientos docs here

Describe the bug
Setting position on GLTFModel doesn't seem to work. Must probably forgot to pass down the props to the mesh

Reproduction
Please provide a link using this template on Stackblitz

Repro

Steps
Steps to reproduce the behavior:

1. Go to 'Experience.vue'
2. Add position to the

Expected behavior
The model should translate to the provided position

System Info
Output of npx envinfo --system --npmPackages '{vite,@tresjs/*, three, vue}' --binaries --browsers

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @tresjs/cientos: ^1.0.0 => 1.0.0 
    @tresjs/core: ^1.0.0 => 1.0.0 
    vite: ^3.2.4 => 3.2.4 

Additional context
Add any other context about the problem here.

If a good name pam-camera-mouse?

And should we move to the controls sections in the docs?

Describe the bug

Something seems broken with the MouseParallax abstraction

Uncaught (in promise) TypeError: 'set' on proxy: trap returned falsish for property 'args'

Reproduction

https://playground.tresjs.org/experiments/mouse-parallax

Steps to reproduce

No response

System Info

No response

Used Package Manager

pnpm

Code of Conduct

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

Describe the bug

There is a problem in the docs with the MeshWobbleMaterial.

I can't access to it, nor in local

Reproduction

https://cientos.tresjs.org/guide/materials/wobble-material.html

Steps to reproduce

Go to https://cientos.tresjs.org/guide/materials/wobble-material.html

System Info

Brave browser

Used Package Manager

pnpm

Code of Conduct

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

https://github.com/pmndrs/drei#scrollcontrols

Is your feature request related to a problem? Please describe.
Continuing with the controls abstraction, will be useful to add MapControls to cientos catalog

Describe the solution you'd like

Suggested solution
Similar to other controls already implemented

Describe the bug

Text3D component comes with two main problems

1. It creates two instance of the Mesh
2. comes with inherit problems. If you add for example name propertie it doesn't set to the object

Reproduction
Please provide a link using this template on Stackblitz

Steps
Steps to reproduce the behavior:

1. Add one log to the scene using useTres().scene.value
2. Add to your scene any valid Text3D component
3. look the children
4. Also you can try to add properties like name, doesn't work corrently

Expected behavior
One mesh should be added to the scene

System Info
Output of npx envinfo --system --npmPackages '{vite,@tresjs/*, three, vue}' --binaries --browsers

Is your feature request related to a problem? Please describe.
Atm is possible to set the loading screen with the async behavior, ex when a model is being loaded, but not to access all the information that the callback provides.

const loadingManager = new THREE.LoadingManager(
    // ...

    // Progress
    (itemUrl, itemsLoaded, itemsTotal) =>
    {
        console.log(itemUrl, itemsLoaded, itemsTotal)
    }
)

Describe the solution you'd like
A composable that wraps THREE.DefaultLoadingManager's progress status.
https://github.com/pmndrs/drei/blob/master/src/core/useProgress.tsx

Describe the bug

I used the component OrbitControls，
But set enableDamping, the controls has no damping

Reproduction

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

Steps to reproduce

No response

System Info

No response

Used Package Manager

npm

Describe the bug

Some shapes have problems with colors

Reproduction

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

Steps to reproduce

Check the console on the reprodution link

System Info

pnpm

Used Package Manager

npm

Code of Conduct

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

Is your feature request related to a problem? Please describe.
Currently, there is no straightforward way to tie HTML content to any object of a TresJS scene and have it projected to the object's whereabouts automatically. This feature would be useful for users who want to create rich, interactive 3D scenes with HTML content that moves and scales along with the 3D objects.

Describe the solution you'd like
I would like to have a new HTML component that allows users to tie HTML content to any object in their TresJS scene. The component should support a variety of properties for customization, such as the wrapping element, className, positioning, scaling, occlusion, and more.

Suggested solution
In the TresJS library, we could provide the following implementation as a Vue component:

<template>
  <Html
    :as="'div'"
    :wrapperClass="wrapperClass"
    :prepend="prepend"
    :center="center"
    :fullscreen="fullscreen"
    :distanceFactor="10"
    :zIndexRange="[100, 0]"
    :portal="domnodeRef"
    :transform="transform"
    :sprite="sprite"
    :calculatePosition="calculatePosition"
    :occlude="occlude"
    :onOcclude="onOcclude"
    v-bind="groupProps"
    v-bind="divProps"
  >
    <h1>hello</h1>
    <p>world</p>
  </Html>
</template>

<script>
import { Html } from 'path/to/html-component';

export default {
  components: {
    Html,
  },
  // ...
};
</script>

This implementation should cover the desired features and provide users with the ability to create dynamic 3D scenes with HTML content.
https://github.com/pmndrs/drei/blob/master/src/web/Html.tsx

Additional context

This feature is inspired by the React Three Fiber (R3F) library, which provides a similar functionality for React users. Implementing this feature in TresJS would allow Vue developers to achieve the same level of interactivity and customization in their 3D scenes.

Add similar to these ones on the core https://github.com/Tresjs/tres/blob/main/.github/ISSUE_TEMPLATE/bug_report.yml?plain=1

Describe the bug

I'm trying to change the direction of the scrolling to horizontal when progress > 0.5 like this:

  <ScrollControls ref="scRef" 
      v-model="progress"
      :distance="10"
      :smooth-scroll="0.1"
      html-scroll
      :horizontal="progress > 0.5"
  >

but props are not reactive

Reproduction

https://stackblitz.com/edit/stackblitz-starters-jq66po?file=src%2Fcomponents%2FTheExperience.vue

Steps to reproduce

Scroll until the point that horizontal should be true

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.20.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.6.3 - /usr/local/bin/pnpm
  npmPackages:
    @tresjs/cientos: 2.3.0 => 2.3.0 
    @tresjs/core: 2.4.0 => 2.4.0 
    vite: ^4.4.3 => 4.4.3

Used Package Manager

pnpm

Code of Conduct

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

Is your feature request related to a problem? Please describe.
Currently, TresJS does not provide a built-in material that allows geometry to wobble and wave around. This feature would be useful for users who want to create visually appealing and dynamic 3D scenes with unique effects on their geometry.

Describe the solution you'd like
I would like to have a new MeshWobbleMaterial component that allows users to apply a wobble and wave effect on their geometry. The material should be self-contained and adapted from the three.js examples.

https://github.com/pmndrs/drei/blob/master/src/core/MeshWobbleMaterial.tsx

Suggested solution
In the TresJS library, we could provide the following implementation as a Vue component:

 <TresMesh>
    <TresBoxGeometry :args="[1,1,1]" />
    <MeshWobbleMaterial factor="1" speed="10" />
  </TresMesh>

Is your feature request related to a problem? Please describe.

Describe the solution you'd like
In order to update the textGeometry and have the v-model "reactive text" effect I propose adding a new needsUpdate prop
Example:

Suggested solution
To achieve this effect we need to listen to changes in the text prop and when it changes, trigger a dispose() method in the current geometry. I have done this with "watch", but for perfomance reasons it could be better to try with computed()

Also if needsUpdate prop is set to false (default value), we just skip the listen and render the plain text

Additional context

Describe the bug

When using OrbitControls, the scene freezes unrecoverably.

Reproduction

https://tresjs.org/guide/

Steps to reproduce

do this:

System Info

No response

Used Package Manager

pnpm

Code of Conduct

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

Description

We can create a wrapper using extend to add CSM and apply shaders to other materials, as we can see in that example. We're applying vertex shader to a physical material using the glass demo,

Suggested solution

a wrapper around https://www.npmjs.com/package/three-custom-shader-material

Alternative

I don't know if there are another alternatives, but CSM is one of the most used

Additional context

The Idea is to create just a wrapper

Validations

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Description

To allow users to easily load video as a texture

Suggested solution

https://github.com/pmndrs/drei#usevideotexture

Alternative

No response

Additional context

No response

Validations

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Is your feature request related to a problem? Please describe.
We should have a CameraControls component as it is a very handy tool.

Describe the solution you'd like
Abstraction in cientos.

Suggested solution
See drei.

Describe the bug

Clicking on examples lands on 404 page not found.

Reproduction

https://cientos.tresjs.org/examples.html

Steps to reproduce

No response

System Info

No response

Used Package Manager

npm

Code of Conduct

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

Describe the bug

Pointerlock + Keyboard is not respecting the initial camera position

Transition between initial camera position and pointerlock should be seamless

Reproduction

https://stackblitz.com/edit/stackblitz-starters-wdhefd?description=Quick%20start%20repo%20for%20Tres.js%20projects&file=package.json,src%2Fcomponents%2FTheExperience.vue&title=TresJS

Steps to reproduce

1. Click on canvas
2. See how the initial position of the Pointerlock differs from initial camera
3. Walk and jump
4. The camera goes under the grid (floor).

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.20.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.6.3 - /usr/local/bin/pnpm
  npmPackages:
    @tresjs/cientos: 2.2.0 => 2.2.0 
    @tresjs/core: 2.4.0 => 2.4.0 
    vite: ^4.3.9 => 4.3.9

Used Package Manager

pnpm

Code of Conduct

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency eslint to v9.3.0
• chore(deps): update dependency vitepress to v1.2.0
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency @types/node to v20.12.12
• chore(deps): update dependency unplugin-auto-import to v0.17.6
• chore(deps): update dependency vue-tsc to v2.0.19
• chore(deps): update dependency eslint-plugin-vue to v9.26.0
• chore(deps): update dependency unocss to ^0.60.0
• chore(deps): update pnpm to v8.15.8
• chore(deps): update typescript-eslint monorepo to v7.9.0 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• fix(deps): update dependency three-stdlib to v2.30.0
• chore(deps): update dependency ubuntu to v22
• chore(deps): update pnpm to v9
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update dependency @tweakpane/core to v2
• chore(deps): update dependency tweakpane to v4

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Is your feature request related to a problem? Please describe.
We can implement a rain abstraction where particles flow to infinity. This effect works also for snow effect and even for beam

Describe the solution you'd like
Examples here:
https://github.com/PacktPublishing/Learn-Three.js-Fourth-edition/blob/main/source/samples/chapters/chapter-7/rain.js
https://github.com/PacktPublishing/Learn-Three.js-Fourth-edition/blob/main/source/samples/chapters/chapter-7/snow.js

Suggested solution

Additional context
I would like feedback about this specific feature, name and props

Description

Provide memory destruction for useGLTF's dracoloader
When using routing to exit the page, the instance of dracoLoader will always occupy memory

Suggested solution

Inside the useGLTF file

export function useDracoLoaderDispose() {
dracoLoader?.dispose()
dracoLoader = null
}

Alternative

No response

Additional context

none

Validations

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Is your feature request related to a problem? Please describe.
packages/cientos/core/OrbitControls.vue offers limited props

export interface OrbitControlsProps {
  /**
   * Whether to make this the default controls.
   *
   * @default false
   * @type {boolean}
   * @memberof OrbitControlsProps
   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
   */
  makeDefault?: boolean
  /**
   * The camera to control.
   *
   * @type {Camera}
   * @memberof OrbitControlsProps
   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
   */
  camera?: Camera
  /**
   * The dom element to listen to.
   *
   * @type {HTMLElement}
   * @memberof OrbitControlsProps
   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
   */
  domElement?: HTMLElement
  /**
   * The target to orbit around.
   *
   * @type {Ref<Vector3>}
   * @memberof OrbitControlsProps
   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
   */
  target?: Ref<Vector3>
  /**
   * Whether to enable damping.
   *
   * @default false
   * @type {boolean}
   * @memberof OrbitControlsProps
   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
   */
  enableDamping?: boolean
}

Describe the solution you'd like
The ThreeJS OrbitControls has way more features and properties we could support

Suggested solution
Add rest of the properties to abstraction

Additional context
Add any other context or screenshots about the feature request here.

Check if we can avoid deep exposure .value.value

The first step for making the first person control is to add the pointer lock control abstraction.

The abstraction should be put in Cientos, and slots can be used for the initial button trigger.

example

For this abstraction, we only need the composable and the component with:
very simple props: camera, domElement
some events: lock, unlock, change (this are provide by the browser)
some methods: moveForward, moveRight, getDirection, isLocked, etc
a logger that indicates or prevents the use of other controls at the same time

Then we can create a composable for first-person control or more elaborate examples.

Is your feature request related to a problem? Please describe.
A contact shadow implementation, facing upwards (positive Y) by default. scale can be a positive number or a 2D array [x: number, y: number].

<ContactShadows opacity="1" scale="10" blur="1" far="10" resolution="256" color="#000000" />

Since this is a rather expensive effect you can limit the number of frames it renders when your objects are static. For instance, making it render only once:

<ContactShadows frames="1" />

Describe the solution you'd like
Abstraction in cientos

Suggested solution
Check drei implementation

Additional context
Add any other context or screenshots about the feature request here.