Adding 3d objects into scene on gesture

[JakeJustLearning]

I am trying to add a box into a scene every time I tap. I tried having a useState and a useCallback/useEffect that updated when the array set by state changed. However the state does not ever seem to change the array set by the state always stays empty.

is there a specific way to insert jsx 3dobjects into the canvas's dom.

[Fasani]

Hello, I think you would have to share your code for an answer to that.

In theory, you would add a new item to an array and .map() over the array in JSX the same as would for a regular list in React.

[drcmda]

is there a specific way to insert jsx 3dobjects into the canvas's dom

same as in react, view is a reflection of state:

const [items, set] = useState([])
...
set(state => [...state, newItem])
...
return items.map((item, index) => <mesh key={index} {...item} />)

you never add or remove children imperatively if that's what you are trying.

[JakeJustLearning]

Please see below, that is what I am doing but it does not work

[JakeJustLearning]

My code can be seen in the following components:

ARScene component
and the interactive box component
and the hit test component

I am currently doing this strategy but not getting it to work. Does it have to do with the having to do it within the component?

[Fasani]

Chuck it on https://codesandbox.io/

[JakeJustLearning]

I will try but are you not able to access the git?

[Fasani]

FYI:
https://codesandbox.io/s/github

Becomes:
https://codesandbox.io/s/github/JakeJustLearning/verse

[JakeJustLearning]

Here is a codesandbox of the files https://codesandbox.io/s/wandering-bush-8h4jj?file=/interactiveBox.component.js