tresjs/tres

Declarative ThreeJS using Vue Components

tres's Issues

Refactor Instance Creator

Enable vector set props

Is your feature request related to a problem? Please describe.
A clear and concise description of the problem. Please make the reason and use-cases as detailed as possible. If you intend to submit a PR for this issue.

Atm is only possible to set vector props such as rotation using a vector|array

Describe the solution you'd like
<TresMesh :position-x="3" />

Suggested solution
In module [xy] we could provide following implementation....

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

Text3D cientos

Render 3D text using ThreeJS's TextGeometry.

Text3D will suspend while loading the font data. Text3D requires fonts in JSON format generated through http://gero3.github.io/facetype.js, either as a path to a JSON file or a JSON object. If you face display issues try checking "Reverse font direction" in the typeface tool.

<Text3D :font="fontUrl" v-bind="{...textOptions}">
 Hola Tres
  <TresMeshNormalMaterial />
</Text3D>

Docs core examples

• Orbit Controls (mention cientos approach)
• Basic animations
• Load Textures
• Load Models

Transform Controls

Something similar to

• Transform Controls https://github.com/pmndrs/drei#pivotcontrols
• Make default

Deprecate physicallyCorrectLights ThreeJS v150

Describe the bug
The latest release r150 of ThreeJS deprecated physicallyCorrectLights

WebGLRenderer
Rename .physicallyCorrectLights = true → .useLegacyLights = false. https://github.com/mrdoob/three.js/pull/24975 (@WestLangley)

Expected behavior
Add deprecation notice

Performance discussion

Vue reactivity is based on Proxy. This allows Vue 3 to automatically track changes to data objects and update the corresponding DOM elements whenever the data changes.

Since we are rendering a scene and updating it in every frame (60FPS), that means that we are updating the scene 60 times per second. If the object to be updated is reactive, Vue will try to update the scene 60 times per second. This is not a good idea 😅 and will be detrimental to performance, especially in big scenes

Here is a benchmark of the difference between using a Proxy object and a plain object.

Source: Proxy vs Plain Object

To discuss

• How can we improve the performance of the core (ex use shallowRef instead of ref) See Reactivity Advanced API
• #34

One real world example is updating an instance for animation:

<script setup lang="ts">
const boxRef: Ref<TresInstance | null> = ref(null)

onLoop(({ _delta, elapsed }) => {
  if (boxRef.value) {
    boxRef.value.rotation.y += 0.01
    boxRef.value.rotation.z = elapsed * 0.2
  }
})
</script>

<template>
  <TresMesh ref="boxRef" :scale="1" cast-shadow>
    <TresBoxGeometry :args="[1, 1, 1]" />
    <TresMeshStandardMaterial v-bind="pbrTexture" />
  </TresMesh>
</template>

Here we are getting the ref for the mesh with the Mesh instance so we can update the rotation, but boxRef remains a Proxy, a solution would be to unref or use a shallowRef since Direct template ref are not available see vuejs/core#1227

I would love to have your input here @wheatjs @kissu @Astanusic

Food for though

https://discoverthreejs.com/tips-and-tricks/#performance

Environment component cientos

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

Add a component that would easily create an environment map for background using HDR or cubeTextLoader and set the scene.background to it

Similar implementation to https://github.com/pmndrs/drei#environment

Describe the solution you'd like
Sets up a global cubemap, which affects the default scene.environment, and optionally scene.background, unless a custom scene has been passed. A selection of presets from HDRI Haven are available for convenience. If you pass an array of files it will use THREE.CubeTextureLoader.

Suggested solution

<Environment
  background="false" // can be true, false or "only" (which only sets the background) (default: false)
  blur="0" // blur factor between 0 and 1 (default: 0, only works with three 0.146 and up)
  files="['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png']"
  path="/"
  preset="null"
  encoding="undefined" // adds the ability to pass a custom THREE.TextureEncoding (default: THREE.sRGBEncoding for an array of files and THREE.LinearEncoding for a single texture)
/>

If you provide a single string it will use THREE.RGBELoader.

<Environment files="file.hdr" />

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

THREE.GLTFLoader: No DRACOLoader instance provided

Describe the bug
useGLTF and GLTFModel both have an error with DracoLoader

chunk-3J2C55FA.js?v=30a1aa41:425 [TresJS ▲ ■ ●]  [useLoader] - Failed to load resource Error: THREE.GLTFLoader: No DRACOLoader instance provided.

Reproduction
Reproduction Stackblitz

Steps
Steps to reproduce the behavior:

1. Go to Demo,
2. Check console

Expected behavior
useGltf should work

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.1.0 => 1.1.0 
    @tresjs/core: ^1.2.0 => 1.2.1 
    vite: ^3.2.4 => 3.2.5 

Additional context
Add any other context about the problem here.

Docs for core composables

As a user, I will like to know how can I use composable along my vue components

Add events to TransformControls documentation

Describe the bug

Documentation for events emitted by this component are missing

• dragging event
• change event
• mouseDown event
• mouseUp event
• objectChange event

Reproduction
Please provide a link using this template on Stackblitz

Steps
Steps to reproduce the behavior:

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

How can we measure the performance of a scene, something like https://github.com/utsuboco/r3f-perf, maybe new package?

How can we measure the performance of a scene, something like https://github.com/utsuboco/r3f-perf, maybe new package?

• Measure FPS
• Measure CPU usage
• How many objects and materials are used on the scene?

Explore Vue Custom Render API

Is your feature request related to a problem? Please describe.
R3F is based on a custom renderer with reconciliation

Describe the solution you'd like
Explore if we could find an easy solution using https://vuejs.org/api/custom-renderer.html#createrenderer or push the Vue team to implement it.

Supposedly is possible but documentation is poor to say at least.

This probably would be a BREAKING CHANGE for a potential v2

fdyi @Tahul @wheatjs

BufferGeometry and BufferAttribute support

Is your feature request related to a problem? Please describe.
At the moment there is no working way of implementing particles using <TresBufferGeometry />, especially attributes.

Describe the solution you'd like
A way of replicate this

const firefliesGeometry = new THREE.BufferGeometry()
const firefliesCount = 30
const positionArray = new Float32Array(firefliesCount * 3)

for(let i = 0; i < firefliesCount; i++)
{
    positionArray[i * 3 + 0] = Math.random() * 4
    positionArray[i * 3 + 1] = Math.random() * 4
    positionArray[i * 3 + 2] = Math.random() * 4
}

firefliesGeometry.setAttribute('position', new THREE.BufferAttribute(positionArray, 3))

// Material
const firefliesMaterial = new THREE.PointsMaterial({ size: 0.1, sizeAttenuation: true })

const fireflies = new THREE.Points(firefliesGeometry, firefliesMaterial)
scene.add(fireflies)

Suggested solution
Similar to R3F

  <points ref={geom} position={[0, 10, 0]} rotation={[-Math.PI / 4, 0, Math.PI / 6]}>
      <bufferGeometry>
        <bufferAttribute attachObject={["attributes", "position"]} count={coords.length / 3} array={coords} itemSize={3} />
        <bufferAttribute attachObject={["attributes", "size"]} count={sizes.length} array={sizes} itemSize={1} />
      </bufferGeometry>
      <dotMaterial />
    </points>

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

Document args and properties

Add a page to /guide explaining how args and properties work in the context of THREE instances

Support for Group on Instance Creator

Is your feature request related to a problem? Please describe.
In three is possible to group several mesh instances https://threejs.org/docs/#api/en/objects/Group

Describe the solution you'd like
Add support for groups on InstanceCreator

Repeat docs animation on click

Component ---> docs/.vitepress/theme/components/LoveVueThreeJS.vue

Better state management `useTres`

Is your feature request related to a problem? Please describe.
Atm we are using provide/inject API to share the renderer state, especially to be able to extend the catalogue on cientos.

useTres was an attempt to achieve a local state but wasn't that efficient or type-safe. Also is using reactive atm which can affect performance.

Describe the solution you'd like
A state that is:

• Performant: doesn't affect the performance of the scene
• Scalable
• Typed

Suggested solution
Maybe shallowReactive with readonly for some properties. I'm also thinking a lot about pinia, especially for devtools support but I still don't know if it's possible to make the state shallowReactive to avoid issues (specially for scene)

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

Tres REPL

Is your feature request related to a problem? Please describe.
Would you make me the honors @Tahul

https://github.com/vuejs/repl

We could do follow-up tasks to replace Stackblitz demos maybe, since they require WebContainers

Using tweakpane on parent and child component overlaps

Describe the bug
Using tweakpane useTweakPane folders on parent and child component overlaps

I am doing ... What I expect is ... What actually happening is

Reproduction
Repro

Steps
Steps to reproduce the behavior:

1. Add ' const { pane } = useTweakPane()` in both parent component and child
2. Add inputs or folders in both

Expected behavior
Controls stack instead of overlap

Screenshots
Video

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.2.2 => 1.2.2 
    @tresjs/core: ^1.3.2 => 1.3.2 
    vite: ^3.2.4 => 3.2.5 

TransformControls cientos props without set method not updating

Describe the bug
The following props are not being properly updated:

• enabled.
• showX, showY, showZ
• axis.

Reproduction
Stackblitz

Steps
Steps to reproduce the behavior:

1. Go to '...'
2. Play with props on the panel top right

Expected behavior
All props work

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.3.0 => 1.3.0 
    @tresjs/core: ^1.4.0 => 1.4.0 
    vite: ^3.2.4 => 3.2.4 

Additional context
Most probably is because this properties doesn't use a set function

onLoop delta is always 0

Describe the bug
When using any of the loops from renderLoops composable, delta = clock.getDelta() is always 0, it can't be used for animation

Reproduction
Reproduction Link

Steps
Steps to reproduce the behavior:

1. Go to 'TheExperience.vue`
2. Check the onLoopcomposable callback
3. Console delta
4. See value

Expected behavior
Delta should be the seconds passed since the time .oldTime was set and sets .oldTime to the current time.
If .autoStart is true and the clock is not running, also starts the clock

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: (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.1.0 => 1.1.0 
    vite: ^3.2.4 => 3.2.4 

Events

Similar of R3F Events would be nice to add Raytracing support

Could not resolve "@vueuse/core" on Installation

Describe the bug
Could not resolve "@vueuse/core" on installation, since it's a peerDependency set as external, the user would need to add it separately

Reproduction
Stackblitz

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

  System:
    OS: Linux 5.0 undefined
    CPU: (3) 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/core: ^1.6.0 => 1.6.0 
    vite: ^4.1.0 => 4.1.1 

Docs for cientos

cientos package is currently without documentation

Allow comments inside components like `TresMesh`

Describe the bug
I was working on #116 and while I was implementing color shorthand for material, I duplicate and commented the old one. I expected the code to ignore the commented material and what actually happening is an error that crash the app.

Reproduction
Stackblitz

Steps
Steps to reproduce the behavior:

1. Go to a file with a <TresMesh> component
2. Create a comment inside the component
3. See error

Expected behavior
The application should not crash and ignore the comment

Screenshots

System Info

System:
    OS: macOS 13.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 708.17 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.14.0 - ~/.nvm/versions/node/v18.14.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.3.1 - ~/.nvm/versions/node/v18.14.0/bin/npm
  Browsers:
    Brave Browser: 91.1.26.74
    Chrome: 110.0.5481.100
    Chrome Canary: 112.0.5609.1
    Firefox: 110.0
    Firefox Developer Edition: 110.0
    Safari: 16.2
    Safari Technology Preview: 16.4
  npmPackages:
    @tresjs/cientos: workspace:^1.7.0 => 1.7.0
    @tresjs/core: workspace:^1.7.0 => 1.7.0

Postprocessing package

Package to support EffectComposer https://github.com/pmndrs/react-postprocessing

Update renderer TresCanvas via props using set methods

Is your feature request related to a problem? Please describe.
Right now <TresCanvas :alpha="true" /> will not change if alpha is updated using tweakpane for example.

Describe the solution you'd like
Watch mutable props and use the correct setMethod, for example:

A change on clear-color prop would trigger a renderer.value.setClearColor(props.clearColor)

Suggested solution
Create a utility do dynamically generate the setMethod based on the name of the prop

Docs

https://threejs.org/docs/?q=we#api/en/renderers/WebGLRenderer

Stackblitz embed component for demos

I want to be able to render demos done in Stackblitz on the documentation pages.

For that, I would like to have a wrapper component for the SDK to avoid using an iframe directly

Generate instances on build-time rather than run-time

Goal

Generate three-shakeable components on build time to avoid the need for a catalog of global components. This will be probably a BREAKING CHANGE, especially for cientos.

<script setup lang="ts">

import { TresCanvas, TresPerspectiveCamera, TresScene, TresAmbienLight, useRenderLoop } from '@tresjs/core' 
import { OrbitControls, TransformControls } from '@tresjs/cientos'

const sphereRef = ref()

const { onLoop } = useRenderLoop()

onLoop(({ elapsed }) => {
  sphereRef.value.position.y += Math.sin(elapsed * 0.01) * 0.1
})
</script>
<template>
  <TresCanvas v-bind="state">
    <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
    <OrbitControls make-default />
    <TresScene>
      <TresAmbientLight :intensity="0.5" />
      <TransformControls mode="scale" :object="sphereRef" />

      <TresMesh ref="sphereRef" :position="[0, 4, 0]" cast-shadow>
        <TresSphereGeometry />
        <TresMeshToonMaterial color="#FBB03B" />
        <!-- <TresMeshToonMaterial color="#FBB03B" /> -->
      </TresMesh>
      <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
      <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
        <TresPlaneGeometry :args="[10, 10, 10, 10]" />
        <TresMeshToonMaterial />
      </TresMesh>
      <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
    </TresScene>
  </TresCanvas>
</template>

• Using a vite plugin to generate all the components from THREE instances (Except Scene)
• Each component should locally register components on the slots (is possible?)
• Typescript Definition for the components generated from the ThreeJS instance
• Include them in the final bundle
• Strategy for replacing catalog extend
• Update the way cientos extends the catalog

Extend catalog in `cientos`

The current implementation allows extending the catalog inside the core but not in the build of cientos or any other external pkg

The idea would be to refactor the OrbitControls on cientos to be able to extend the catalog.

This opens the door so anyone can create TresJS Plugin (this could be interesting to you @CarelessCourage )

Scene doesn't scale properly

Describe the bug
The library still glitches in responsiveness, especially regarding models, they get distorted aspect ratio, probably the canvas.

Reproduction
Re-scale a scene

Steps
Steps to reproduce the behavior:

1. Go to any scene
2. Resize until very very small

Expected behavior
Re-scaling doesn't affect objects or the camera aspect ratio

Screenshots

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

 System:
    OS: macOS 13.2.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 74.72 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
  Browsers:
    Brave Browser: 110.1.48.164
    Chrome: 110.0.5481.177
    Safari: 16.3
  npmPackages:
    @tresjs/cientos: ^1.7.0 => 1.7.0 
    @tresjs/core: ^1.7.0 => 1.7.0 
    vite: ^4.1.0 => 4.1.4 

Additional context
Add any other context about the problem here.

Renderer presets

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

TresJS is intended to be as simple and verbose as possible, but we can add an optional "preset" configuration for example for realistic scenes

Describe the solution you'd like

<TresCanvas preset="realistic" />

Would set the following properties to the render

renderer.physicallyCorrectLights = true // real lights
renderer.outputEncoding = THREE.sRGBEncoding // gama correction
renderer.toneMapping = THREE.ACESFilmicToneMapping
renderer.toneMappingExposure = 3
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap

TresFog is not adding fog to scene

Describe the bug
Using is not adding scene.fog(new Fog())

Reproduction
Reproduction

Steps
Steps to reproduce the behavior:

1. Add a <TresFog /> to the scene

Expected behavior
Scene should have Fog

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: (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.2.2 => 1.2.2 
    @tresjs/core: ^1.3.2 => 1.3.2 
    vite: ^3.2.4 => 3.2.5 

Additional context
Add any other context about the problem here.

Unit Test

Is your feature request related to a problem? Please describe.
Since we are aiming to open source it we need Unit testing for composable and utilities at least.

Describe the solution you'd like
Vitest with Happy dom?

[Vue warn]: injection "local-scene" not found.

Describe the bug
Yep, lot of noisy warnings on the console about provide inject

Reproduction
Stackblitz

Steps
Steps to reproduce the behavior:

1. Open the console

Expected behavior

Less warnings

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

Dynamically extend catalogue

Atm, is only possible to extend the catalogue when installing the @tresjs/core plugin like this:

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

app.use(plugin, {
  extends: {
    OrbitControls,
  },
})

But it's likely that packages like cientos would need to extend the initial catalogue dynamically to add new components, for example TresTextGeometry from three/examples/jsm/geometries/TextGeometry for #15

I will investigate if there is away to add more components o renderer on the fly

Text3D is missing center prop

Describe the bug

TextGeometry text starts at the mesh initial position, so it's [0,0,0] the text will start there. Atm the only way of centering is to add a negative x value to the mesh.

On vanilla threeJS the code would look like this

import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js'

 const textGeometry = new TextGeometry(
    'Hola TresJS',
    {
        font: font,
        size: 0.5,
        height: 0.2,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 0.03,
        bevelSize: 0.02,
        bevelOffset: 0,
        bevelSegments: 5
    }
)

textGeometry.center()

Current

<Text3D center /> is not centering the text

Desired

<Text3D center /> should center the text

useFbx composable and component for cientos

Is your feature request related to a problem? Please describe.
Since a potential user is interested in using TresJS to load FBX models and to be honest, along with Gltf is one of the most used formats let's add support for it

Describe the solution you'd like
Same thing as useGLTFbut for fbx models

Suggested solution

import { useFBX } from '@tresjs/cientos'

const { scene } = await useFBX('/models/AkuAku.fbx')

or

<script setup lang="ts">
import { OrbitControls, FBXModel } from '@tresjs/cientos'
</script>
<template>
  <Suspense>
    <TresCanvas clear-color="#82DBC5" shadows alpha>
      <TresPerspectiveCamera :position="[11, 11, 11]" />
      <OrbitControls />
      <TresScene>
        <FBXModel path="/models/AkuAku.fbx" />
        <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
      </TresScene>
    </TresCanvas>
  </Suspense>
</template>

for the composable import the loader from three-stdlib

• Update docs

Add i18n to Tresjs documentation

description

To expand the project, it will be necessary to add translations in different languages, for this we need to create the base.
Currently there are intentions to add Spanish and Chinese.

To discuss

We have several strategies to achieve this goal, but here I will expose two of them.

1. Using the current feature provide by vitepress (check it out)[https://vitepress.vuejs.org/guide/i18n]

1. We need to make the redirection manually (explained in the link) through netlify
2. We need to reorganize the folder structure of the Docs
3. Vitepress will make the rest for us
4. Currently I have found no projects using this feature

2. Using the I18n plugin

1. We need to install and setup the library
2. We don't need to update folders but we'll need to update the content, with the current JSON
3. We need to create the navbar options manually
   4 Be aware of diferent formats like plurals, dates etc.
   5 Implies more work to do, but it is a tested solution

Pam camera mouse effect [Feature Request]

Description

example

Why TresJs need this feature

Creating the abstraction open doors for creating beautiful scenes (like showcase) easily. with a really nice effect.

Might have a factor props and a disabled.

We could discuss names

HMR disposal

Atm HMR disposal is not working as expected. Meshes are duplicated and this could lead to performance issues on large scenes.

Also not nice for DX. User needs to reload everytime.

This one is pretty tricky.

Desired solution.

Renderer, scene and object follow a disposal flow when HMR hits

Nuxt module package

Would be nice to have a Nuxt module for TresJS

https://nuxt.com/docs/guide/going-further/modules

• ClientMode DX
• Autoimports components and composables
• Auto install vite-plugin-glsl

CI/CD

The idea of this discussion is to figure out a proper CI/CD and release management before going public

Current

Atm, I'm doing all the bumping of versions, changelogs, and releases manually, which is not maintainable in time and slows done quick delivery.

The current workflow is:

1. Change is made on @tresjs/core.
2. Commit: feat(core): whatever
3. PR and merge to main
4. Release branch is created release/core-1.x.0 since a feat with no breaking changes is a minor release
5. Version is bumped on core's package.json
6. Versions of core are updated manuallty on each of the other packages ` "@tresjs/core": "workspace:^1.x.0",
7. Changelog is created with conventional-changelog -p angular -i CHANGELOG.md -s ⚠️ The problem with this one is that always add all of the commits since the beginning, so I have to manually delete all the ones that are not going to release
8. Changes are commited and push
9. PR is checked and merged into main
10. pnpm build:ci && git status && pnpm publish:pkgs
11. git tag is created manually like this git tag -a @tresjs/[email protected] -m "Release @tresjs/[email protected]"

Solution

The monorepo will be divided in several repos here #150, when that's done we can

• Apply release-it to core
• Apply release-it to cientos

Cameras lookAt doesn't work

Describe the bug

Setting <TresPerspectiveCamera look-at="[0,0,0]"/> doesn't work because it's actually a function that needs t to be called

Contribution Guidelines

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

Describe the solution you'd like
Since we might open the repo public soon, might be a good idea to create a proper Contribution and Code of Conduct Guide

Suggested solution
A CONTRIBUTING.md and CODE_OF_CONDUCT.md is written

Additional context
Vitejs CONTRIBUTING.md

useAnimation composable for AnimationMixer

Is your feature request related to a problem? Please describe.
Atm there is no support for AnimationMixer

Describe the solution you'd like
A composable that leverage the work around animation management with TresJS

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

Nested Props

Is your feature request related to a problem? Please describe.
Following #116 at the moment is only possible to do this on hardcoded properties like rotation, scale, position and color

Describe the solution you'd like
Automatic nested properties using dashes like this:

<TresDirectionalLight :rotation-x="1" :shadow-map-camera-near="0.5" />

Suggested solution
I'm thinking something like this:

const propsName = 'shadow-map-camera-near'
const propVal = 0.5
const nestedProps = propName.split('-').map(p => p.replace(/^[a-z]/g, c => c.toLowerCase())); // ['material', 'uniforms',...'value']

for (let i = 0; i < nestedProps.length - 1; i++) {
  if (!instance[nestedProps[i]]) {
    instance[nestedProps[i]] = {};
  }
  instance = instance[nestedProps[i]];
}

instance[nestedProps[nestedProps.length - 1]] = propVal; // 

Probably we will need to check if the property with the dashes already exists and is not a nested property, like cast-shadow, also considering that maybe a key of the nested properties also has dashes, like shadow-**map-size**-height

Docs local first scene doesn't scale on mobile

Describe the bug

Camera aspect ratio looks incorrect on mobile when resizing

Reproduction
Please provide a link using this template on Stackblitz

Steps
Steps to reproduce the behavior:

1. Go to https://tresjs.org/guide/ on mobile

Expected behavior
Scene is correctly resized

Screenshots

Shapes abstractions for Cientos

Is your feature request related to a problem? Please describe.
Currently is possible to create Meshes with the core approach:

<TresMesh>
   <TresMeshSphereGeometry />
   <TresMeshBasicMaterial />
</TresMesh>

Describe the solution you'd like
Shortcut component

<Sphere radius="1">
   <TresBasicMaterial />
</Sphere>

• Box
• Sphere
• Plane
• Torus
• TorusKnot
• Circle
• Cone
• Tube
• Ring
• Tetrahedron
• Polyhedron
• Icosahedron
• Octahedron
• Dodecahedron
• Extrude
• Lathe.