Using the bunny gltf model shows with tweakpane how you can play and pause animations.

https://cientos.tresjs.org/guide/abstractions/use-animations.html

I'm trying to use a v-for to instantiate some meshes, but it looks like the v-for has no reactivity with the scene. Is this expected behavior? If so, any ideas on how to make the v-for reactive? Thanks.

I like your library very much and want to learn and use it in the website I'm about to create.

When I tried to check the playground demo, I found that it didn't display properly.
node version > 18
Steps 1： pnpm install
Steps 2： pnpm dev
My local implementation localhost：3000

https://playground.tresjs.org/vue/portal-journey/

Excuse me, which step did I do wrong?

Currently , my only solution is change import
import { TresCanvas as TC, TresCanvasProps } from '@tresjs/core';

To
import { TresCanvas as TC } from '@tresjs/core';
import { TresCanvasProps } from '@tresjs/core/dist/components/TresCanvas.vue';

Have anyone same problem when run experiments ? I tried on Window 10 , node 19.6 and Mac 18.16 have same problem and solution :/

Move the following demos to the docs.

• Animations
• Basic Shaders
• Events
• GLTF Model
• Lights
• Text3D
• UseAnimations
• Smoke Demos

Inspiration

https://codepen.io/prisoner849/pen/poNXPyv

https://github.com/franky-adl/threejs-synthwave-scene

When i run 'pnpm dev' locally, i get this error:

I guess maybe node version cause? I checked the node version, and It's 16.19.0. Ok, I change it to 18.14.0. Yes，it works! Then , I change it to 17.9.1, the error again.

Add something about node version in README?

Hi!!
Pls help, how to work with STL models in Tres?
I'm load model via STLloader as in THREE, and how I can render it now?
Trying primitive

  <Suspense>
    <primitive :object="mySTLModel" />
  </Suspense>

But get Failed to resolve component: primitive

Describe the bug

The default perspective camera adjustment parameters are normal, but when switching to orthorgraphic camera, the adjustment parameters have no effect. When I switch back to the perspective camera, adjusting the parameters will have no effect too.
I try to use stackblitz default 2.1.2 version works, but 3.0.1 version is problematic.

Reproduction

https://stackblitz.com/edit/tresjs-basic-by5qfm?file=package.json

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.

Inspire on https://madewithvuejs.com/

Requested by Jessica Sachs @JessicaSachs

I think it will be a really cool demo to cover:

• Text3D
• GLTF models
• Interactivity with UI Frontend (enter the text)
• Restrict Orbit Control panning
• Download a canvas screenshot with the meme for the user

Hello. First of all I appreciate a lot for your effort to develop and maintain it.
I'm really happy to meet this awesome library.

The Problem on lab.tresjs.org

I'm writing to notify the possibility that there are some wrong settings from server-side.

Today I tried to see the ShowCase page (lab.tresjs.org), but I can't do like the photo below.

It fails to get belows according to console messages.

• https://lab.tresjs.org/
• https://lab.tresjs.org/api/_content/query/luVj25sCnR.1720210146607.json?_params=%7B%22where%22:%5B%7B%22_path%22:%22%2Fexperiments%2Fsimple-editor%22%7D%5D,%22first%22:true,%22sort%22:%5B%7B%22_stem%22:1,%22$numeric%22:true%7D%5D%7D

Specific links are also not working. (2 examples)

• https://lab.tresjs.org/experiments/simple-editor
• https://lab.tresjs.org/experiments/glass-material

Local has no problems.

When I clone and run it at local environment, it works well.

Thank you.

https://cineshader.com/

Problem

Thumbnails have varying aspect ratios, which makes the landing page look a bit messy.

Solution

• crop/remake existing thumbnails so that they're all 16:9
• add a mention in the docs, reminding users to make 16:9 thumbnails

Context

Here's React Spring's demo page:

They ask users to submit 16:9 thumbnails.

<TresCanvas clear-color="#000000">
   <TresPerspectiveCamera
     :position="[0, 0, 5000]"
     :fov="50"
     :aspect="1"
     :near="1"
     :far="10000"
   />
  <TresScene>
     <TresPoints>
       <TresBufferGeometry :position="[vertices, 3]" />
       <TresPointsMaterial :color="0x888888" />
     </TresPoints>
   </TresScene>
</TresCanvas>

No matter how i change aspect, for exampe 0.5 or 2, there is no change in view.

aspect = 0.5

aspect = 1

aspect = 2

Maybe i miss something?

Hello. I appreciate your work for this wonderful library.
As I follow the steps detailed in [https://docs.tresjs.org/advanced/primitive.html](url) using BatchedMesh, it thow an exception as follows: 

My code example is as below:

`<script setup lang="ts">
const geometry2 = new THREE.ConeGeometry();
const geometry3 = new THREE.BoxGeometry();
const mtl3 = new THREE.MeshBasicMaterial({ color: 0xffff00 })
const meshWithMtl2 = new THREE.BatchedMesh(20, 1000, 1000, mtl3)
var geoId = meshWithMtl2.addGeometry(geometry2);
meshWithMtl2.addInstance(geoId)
var geoId2 = meshWithMtl2.addGeometry(geometry3);
meshWithMtl2.addInstance(geoId2)
</script>

Check if demos are broken after @tresjs/core@alpha

• Animations
• Environment Tweaks
• Events
• GLTF Model
• Lights
• Low Poly Planet
• Materials
• Portal Journey
• Manual Post Processing
• Realistic Scene
• Transform Controls
• Tres Donut

Hello. I appreciate your work for this wonderful library.
As I follow the steps detailed in [https://docs.tresjs.org/advanced/primitive.html](url) using BatchedMesh, it thow an exception as follows: 

My code example is as below:
`<script setup lang="ts">
const geometry2 = new THREE.ConeGeometry();
const geometry3 = new THREE.BoxGeometry();
const mtl3 = new THREE.MeshBasicMaterial({ color: 0xffff00 })
const meshWithMtl2 = new THREE.BatchedMesh(20, 1000, 1000, mtl3)
var geoId = meshWithMtl2.addGeometry(geometry2);
meshWithMtl2.addInstance(geoId)
var geoId2 = meshWithMtl2.addGeometry(geometry3);
meshWithMtl2.addInstance(geoId2)
</script>

Hi Alvaro,

First of all thank you very much for all your work in Tresjs. It's great!

I have been playing around with the playground examples and noticed that hot reload doesn't work when updating a shader file in the Basic Shaders example.
vite-plugin-glsl seems to work fine on a separate vite project, so I am not sure if this issue has to do with TresJS or Nuxt or the glsl plugin. I was wondering if you have any idea on what could be causing the screen to go blank when editing shader files. If I find a solution I'll make sure to let you know as well.

Thank you,

Paulo

• array camera code
• infinite tube code
• iTres code
• nuxt-stones code
• lowpoly planet code
• landing code
• potions classroom code
• Particle pumpking code
• realisitc code
• scroll controls
• syncwave

@alvarosabu there are a lot of demos without code examples, and to be honest is quite time-consuming to do it manually.
Would it be better to just send the people directly to the code of the implementation in GitHub? Like in Threejs examples?

Following https://www.youtube.com/watch?v=lcMCVWYpnrI&list=PLWP0narTpO8n9YwsTLVO7-vbIzLELrwwS

Hello. I have encountered with a problem with events of component 'primitive'.

Problem

I initialize a primitive component to bond with an array as below:

`

`
As result, the mesh2 created in OnMounted() can arise the 'pointer-enter' and 'click' events. But mesh1 created by clicking button failed to arise these two events. Eager to get your help.

So there is my code. And my canvas has black background and i wanna change it to transparent but it doesnt work. PLS HELP😿

https://codesandbox.io/s/n60qg

The link "Authoring experiments" from the README is broken.

The Link

Result

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

Open

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

• chore(deps): update dependency @tresjs/leches to v0.15.0-next.3
• chore(deps): update dependency nuxt to v3.12.4
• fix(deps): update dependency @tresjs/post-processing to v0.7.1
• chore(deps): update dependency @unocss/nuxt to ^0.62.0
• fix(deps): update dependency three to ^0.167.0 (three, @types/three)
• chore(deps): update dependency @tresjs/cientos to v4
• chore(deps): update dependency @tresjs/core to v4
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

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

The Manual Post Processing demo doesn't change when changing the various post-processing options.

Description

• Expected: When changing the post-processing dropdown here, the content of the canvas should show the post-processing effect.
• What happens: Nothing happens. The post-processing effect is not shown.

Diagnosis

The demo watches a ref called context. It expects that the ref here <TresCanvas ref="content"> will have a renderer in its value, when its updated:

watchEffect(() => {
  if (context.value) {
    context.value.renderer.setSize(width.value, height.value)
    context.value.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
    effectComposer = new EffectComposer(context.value.renderer)
    effectComposer.addPass(new RenderPass(context.value.scene, context.value.camera))

    onLoop(() => {
      effectComposer.render()
    })
  }
})

Source

... but it doesn't. Here's the browser error message:

TypeError: a.value.renderer is undefined

Checking the Tres documentation for Renderer, it doesn't appear that adding a ref on <TresCanvas /> is a documented way to access the renderer, so I didn't file an issue there.

System Info

Mac M1
Mac OS 13.1
Firefox 117.0.1