trois icon indicating copy to clipboard operation
trois copied to clipboard

Missing Parent (Scene, Group...)

Open stephanedemotte opened this issue 3 years ago • 7 comments

Hello, thanks for this lib !

I'm trying to use different component for my app, but got this error (Missing Parent (Scene, Group...)

App.vue

  <Renderer class="App__canvas" resize="window" :orbit-ctrl="{ enableDamping: true }">
    <Camera :position="{ z: 10 }" />
    <Scene>
      <Test />
    </Scene>
  </Renderer>

Test.vue

<template>
  <Group>
    <PointLight :position="{ y: 50, z: 50 }" />
    <Sphere>
      <LambertMaterial color="red" />
    </Sphere>
  </Group>
</template>

<script setup>
import { Group, PointLight, Sphere, LambertMaterial } from 'troisjs'
</script>

Don't understand how we can use component inside a Renderer.

If i use Scene instead of Group in Test.vue it work.. But a scene inside a scene is not a good practice ?

Thank !

stephanedemotte avatar Jun 20 '21 19:06 stephanedemotte

Thanks, you code looks ok, I will look at this asap

klevron avatar Jun 22 '21 16:06 klevron

I tried and it works, but I didn't use script setup syntax

klevron avatar Jun 22 '21 16:06 klevron

Very weird when i don't use script setup it work too... Could be cool to make work with script setup i will look at it.

thank !

stephanedemotte avatar Jun 23 '21 16:06 stephanedemotte

I can make it work with script setup

Object.js -> getParent function

import { getCurrentInstance } from 'vue'

...

      // let parent = this.$parent;
      const instance = getCurrentInstance()
      let parent = instance.parent.ctx

It work good, but not with GltfModel....

If you have an idea i take :)

stephanedemotte avatar Jun 24 '21 00:06 stephanedemotte

@klevron I can make it work with this ! On GltfModel too !

import { getCurrentInstance } from 'vue'
...
    getParent() {
      let parent = this.$parent;

// my 2 cents
      const instance = getCurrentInstance()
      if(instance && instance.parent)
        parent = instance.parent.ctx
//

      while (parent) {
        if (parent.add)
          return parent;

        parent = parent.$parent;
      }
      return void 0;
    },

I suck in Typescript, maybe you can add this fix ? I've worked directly in trois.module.js :)

Thank you !

stephanedemotte avatar Jun 24 '21 01:06 stephanedemotte

@klevron any chance to add this fix for script setup user ?

stephanedemotte avatar Jun 27 '21 13:06 stephanedemotte

I will publish a new version with the fix in a few days, thanks for the help 👍

klevron avatar Jul 01 '21 20:07 klevron