Tresjs / tres

Declarative ThreeJS using Vue Components
https://tresjs.org
MIT License
2.27k stars 107 forks source link

Support inline method in geometries ( EJ: toNonIndexed , setFromPoints) #230

Open JaimeTorrealba opened 1 year ago

JaimeTorrealba commented 1 year ago

Is your feature request related to a problem? Please describe. Currently, the toNonIndexed method doesn't work

Describe the solution you'd like I would like to manipulate the vertex by nonIndexed geometries

Suggested solution add a new prop to all geometries Ej:

Additional context This is useful is you want to manipulate the vertex individually, in the vertex shader

alvarosabu commented 1 year ago

@JaimeTorrealba the core is different than cientos. Here all the components are generated on the custom renderer based on THREE instance constructor meaning that all the methods and props available here should work https://threejs.org/docs/index.html#api/en/core/BufferGeometry.toNonIndexed

<BufferGeometry :to-non-indexed="callback" />

Another solution would be to pass a template ref to the buffer geometry

<script lang="ts">
const bufferRef = shallowRef()

watchEffect(() => bufferRef.value.toNonIndexed())
</script>
<BufferGeometry ref="bufferRef" />
JaimeTorrealba commented 1 year ago

Unfortunately, this method as a prop doesn't work image

And if I try to use in the watch just not take because the geometry is already created image

I could make it work using a workaround

image

But is not the desire

alvarosabu commented 1 year ago

Screenshot 2023-04-25 at 09 17 24

The method itself is successfully called on the nodeOps see the attachment above. I'm still confused about what would be the desired result. Could you elaborate more?

JaimeTorrealba commented 1 year ago

with no indexed image

I left you the difference with and without using toNonIndexed() method, this is using for creating some interesting effect like https://serene-mousse-562782.netlify.app/destroyObject

If the geometries are indexed, the effect just don't work properly (also particles effects to)

The main thing is that if I try to accomplish this with tresJs prop toNonIndexed, the geometry is still indexed

alvarosabu commented 11 months ago

@JaimeTorrealba should this be optional or mandator? And couldn't this method be called using templateRefs?

JaimeTorrealba commented 9 months ago

As we discuss methods inline like const lineGeometry = new BufferGeometry().setFromPoints(points) will not work on the template

<TresBufferGeometry :set-from-points="points" /> // this doesn't work

So we have to create on the script tag. Which is not ideal