Skip to content

Commit

Permalink
fix: attach detach (#749)
Browse files Browse the repository at this point in the history
* test: add insert/remove tests

* feat: add filterInPlace

* refactor: make some LocalState fields non-optional

* test: add LocalState graph tests

* refactor: add prepare() to add __tres field

* refactor: add TODOs

* refactor: maintain parent/objects relationship in __tres

* test: add dispose=null test

* feat: allow "dispose=null" to bail out tree disposal

* refactor: update  comments

* refactor: add todo

* test: add/unskip  tests

* refactor(nodeOps): move helper functions to new file

* test: add primitive tests

* refactor: move nodeOpsUtils to utils

* feat: add pierced attach/detach

* chore: clean up merge

* chore: lint

* docs: add playground demo

* chore: update demos

---------

Co-authored-by: Alvaro Saburido <[email protected]>
  • Loading branch information
andretchen0 and alvarosabu authored Jul 5, 2024
1 parent 45777f1 commit 8c1c668
Show file tree
Hide file tree
Showing 14 changed files with 918 additions and 239 deletions.
47 changes: 47 additions & 0 deletions playground/src/pages/advanced/materialArray/index.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { OrbitControls } from '@tresjs/cientos'
const previewDataUri = 'data:image/png;base64,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'
const i = shallowRef(0)
setInterval(() => {
i.value += 1
i.value %= 6
}, 500)
</script>

<template>
<TresCanvas clear-color="gray">
<TresPerspectiveCamera :position="[5, 5, 5]" :look-at="[1, 2, 3]" />
<OrbitControls />
<TresMesh>
<TresBoxGeometry />
<TresMeshBasicMaterial v-if="i !== 0" color="yellow" attach="material-0" />
<TresMeshBasicMaterial v-if="i !== 1" color="orange" attach="material-1" />
<TresMeshBasicMaterial v-if="i !== 2" color="red" attach="material-2" />
<TresMeshBasicMaterial v-if="i !== 3" color="purple" attach="material-3" />
<TresMeshBasicMaterial v-if="i !== 4" color="blue" attach="material-4" />
<TresMeshBasicMaterial v-if="i !== 5" color="green" attach="material-5" />
</TresMesh>
</TresCanvas>
<OverlayInfo>
<h1>Material array</h1>
<h2>Setup</h2>
<p>
In this scene, there is a Mesh with a BoxGeometry and multiple materials - one for each side of the box. The sides of the box should individually disappear and reappear.
</p>
<h3>"Pierced attach"</h3>
<p>Multiple materials are each added with a "pierced attach": <code>&lt;TresMeshBasicMaterial attach="material-0" /&gt;</code></p>
<p>"material-0" has 2 parts:</p>
<ul>
<li>"material": this tells Tres to use the parent's "material" field</li>
<li>"0": this tells Tres to use the "zeroeth" position on the "material" field</li>
</ul>
<h2>Preview</h2>
<p>The single on-screen box should be animated, with sides disappearing/reappearing as in this image:</p>
<img :src="previewDataUri" />
<h2>Issue</h2>
<a href="https://github.com/Tresjs/tres/issues/496">Allow TresObject3D#material to set Array (#496)</a>
</OverlayInfo>
</template>
36 changes: 0 additions & 36 deletions playground/src/pages/models/RiggedModel.vue

This file was deleted.

File renamed without changes.
Loading

0 comments on commit 8c1c668

Please sign in to comment.