We are trying add a marker as dynamically in model. The marker is a html. But this marker shows in all side even though model is rotated. We hope to hide if model shows other side that has nothing marker.
https://user-images.githubusercontent.com/87656984/209636203-4fdf0b48-7472-4a38-9324-110d7d7e513d.png https://user-images.githubusercontent.com/87656984/209636301-bfe21705-017f-4324-bafd-9a33aadf25b5.png
Thanks in advance
<Canvas dpr={[1, 2]}>
<ambientLight intensity={0.4}/>
{markerList.map((lump, index) => (
<>
<Marker
key={index}
name='Marker'
position={[lump.posX, lump.posY, lump.posZ]}
/>
</>
))}
<DogModel/>
<mesh
onDoubleClick={e => {
}}
scale={[2, 200, 2.8]}
position={[-0.9, 4, 0]}
visible={true}
>
<boxGeometry/>
<meshPhongMaterial color='royalblue' transparent opacity={0}/>
</mesh>
<PerspectiveCamera
makeDefault
ref={camera}
position={[200, 0, 0]}
zoom={window.innerWidth > 640 ? 15 : 10}
fov={40}
/>
<OrbitControls
ref={orbit}
target={[0, 1, 0]}
enableRotate={true}
minDistance={7}
maxDistance={100}
minPolarAngle={0}
maxPolarAngle={Math.PI / 1.75}
touches={{
ONE: THREE.TOUCH.ROTATE,
TWO: THREE.TOUCH.DOLLY_PAN
}}
/>
<Environment files="/old_depot_2k.hdr" ground={{height: '100%', radius: 130}}/>
</Canvas>
marker code is below
<mesh name={name}>
<Html sprite position={[position[0], position[1], position[2]]}>
<div
id={'marker'}
style={{display: status ? 'block' : 'none'}}
>
<Button.Ripple
onPointerUp={setButtonAction}
color='primary'
className='btn-icon rounded-circle'>
<span className='TextWhite'>
<Plus size={16}/>
</span>
</Button.Ripple>
</div>
</Html>
</mesh>
