Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cant reach the model with GLTFModel #594

Open
5 tasks done
rasc-br opened this issue Feb 7, 2025 · 1 comment
Open
5 tasks done

Cant reach the model with GLTFModel #594

rasc-br opened this issue Feb 7, 2025 · 1 comment

Comments

@rasc-br
Copy link

rasc-br commented Feb 7, 2025

Describe the bug

I've been using the GLTFModel component to load my models.
Unfortunately, I can't programmatically modify or even access them.
The documentation provides this example:

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

const modelRef = shallowRef<THREE.Object3D>()

watch(modelRef, (model) => {
  // Do something with the model
  model.position.set(0, 0, 0)
})
</script>

Unfortunately, the object I receive in return is not a 3D Model. I don't even know what it is.
It looks like a ref without a .value, and I can't access any value.

It's something like this:

{
    "dep": {
        "version": 1,
        "sc": 0
    },
    "__v_isRef": true,
    "__v_isShallow": false,
    "_rawValue": {
        "instance": {
            "metadata": {
                "version": 4.6,
                "type": "Object",
                "generator": "Object3D.toJSON"
            },
            "geometries": [

I found a better approach, but unfortunately, it produces the same results. Instead of using watch, I’m now using the @resolve event from Suspense, which wraps the GLTFModel.

How can we programmatically modify the object when using the GLTFModel component?

Reproduction

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

Steps to reproduce

  1. Wait to load up
  2. Check the console logs

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
    Memory: 2.57 GB / 15.68 GB
  Binaries:
    Node: 18.20.4 - C:\Program Files\nodejs\node.EXE
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (132.0.2957.127)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @tresjs/cientos: ^4.1.0 => 4.1.0
    @tresjs/core: ^4.3.2 => 4.3.2
    vite: ^6.0.11 => 6.0.11

Used Package Manager

npm

Code of Conduct

@JaimeTorrealba
Copy link
Member

Hi, I don't understand this one. I check your repro link and is there, I think there is another issue because is under value.value nested.

As a suggestion you can apply affine transformations (rotation, translation, scale) directly on the model instead of creating an extra group layer, will be a layer less when access to it

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants