Drei Instance all instances in same position?

Questions
,
1

I used Instances to make rendering multiple tiles in my game more efficient, but the tiles are all in the same space together and not spread out to their designated positions. Even though I have tried adding the position property to the group holding all the instances inside the Tile function, as well as adding the position to each Tile element before being mapped over the canvas, they won’t separate.

Here is what its placement looks like in another element:

    import {Instances, Tile} from './Tile';
    ...
    let tileDisplay = [];
    currentLayout.map(tile => {
        tileDisplay.push(
            <Tile 
                key={tile['key']} 
                id={tile['id']} 
                symbol={tile['symbol']}
                symbolColor={tile['symbolColor']}
                position={tile['position']} 
            />
        )
    })
    ...
    return (
                <Canvas>
                    ...
                    <Instances frames={1}>
                        {
                            tileDisplay.map(tile => tile)
                        }
                    </Instances>
                </Canvas>
    )

And here is how I set it up in Tile.jsx:

import { SVGLoader } from 'three/addons/loaders/SVGLoader.js';

import { TextureLoader } from 'three/src/loaders/TextureLoader';

import { useLoader } from '@react-three/fiber'

import * as THREE from 'three'

import React, { useRef, useMemo, createContext, useContext } from 'react'
import { useGLTF, useTexture, Merged } from '@react-three/drei'

const context = createContext()

export function Instances({children}) {
	const { nodes } = useGLTF('/3D_Assets/Tile-transformed.glb')

	const instances = useMemo(
	  () => ({
		TileFront: nodes.Tile_Front,
		TileFrontRim: nodes.Tile_Front_Rim,
		TileBody: nodes.Tile_Body,
		TileBack: nodes.Tile_Back,
		TileBackRim: nodes.Tile_Back_Rim,
	  }),
	  [nodes]
	)

    return (
		<group dispose={null}>
			<Merged meshes={instances}>
				{(instances) => <context.Provider value={instances} children={children} />}
			</Merged>
		</group>
    )
}

export function Tile({symbol, symbolColor, position}) {

	const instances = useContext(context)

	return (
		<group dispose={null} position={position}>
			<instances.TileFront />
			<instances.TileFrontRim />
			<instances.TileBody />
			<instances.TileBack />
			<instances.TileBackRim />
		</group>
	)
}

useGLTF.preload('/3D_Assets/Tile-transformed.glb')

Aaaaaand here is the codesandbox!

If you have any idea as to what might be going wrong, please let me know.

Thank you!

2

Turns out I needed to add the individual x, y and z properties as arguments for position:

    import {Instances, Tile} from './Tile';
    ...
    currentLayout.map(tile => {
        tileDisplay.push(
            <Tile 
                key={tile['key']} 
                id={tile['id']} 
                tileId={tile['id']} 
                symbol={tile['symbol']}
                symbolColor={tile['symbolColor']}
                position={[tile['position'].x, tile['position'].y, tile['position'].z,]}
                currentTile={currentTile} 
                handleClick={handleClick}
            />
        )
    })
    ...
    return (
                <Canvas>
                    ...
                    <Instances frames={1}>
                        {
                            tileDisplay.map(tile => tile)
                        }
                    </Instances>
                </Canvas>
    )

But I also had to keep the position property on the group in the Tile function:

export function Tile({position}) {
        ...
	return (
		<group 
			dispose={null} 
			position={position}
		>
                <instances.TileFront />
				<instances.TileFrontRim />
				<instances.TileBody />
				<instances.TileBack />
				<instances.TileBackRim color={hovered ? '#5248C1' : '#FFFED0'} />
		</group>
	)
}
3

that means it’s not going to updates matrices, or only for one frame. remove the flag, you would use that only for static instances, which would save you the runtime cost of threejs having to calculate object3d matrices via updateMatrix()/updateWorldMatrix().

ps, lots of drei components have the “frames” prop, allows them to carry out actions once and use the fixed result afterwards without expense.

4

Thank you for explaining this part, beforehand I thought I understood it.