How to hide marker of another side #1197

ekaterina4952 · 2022-12-27T08:40:14Z

ekaterina4952
Dec 27, 2022

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.

<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>

Thanks in advance

Answered by isaac-mason

Dec 27, 2022

You can use the occlude prop on <Html /> for simple raycast occlusion.

See this drei storybook: https://drei.pmnd.rs/?path=/story/misc-html--html-raycast-occluder-st

View full answer

isaac-mason · 2022-12-27T14:01:29Z

isaac-mason
Dec 27, 2022
Maintainer

You can use the occlude prop on <Html /> for simple raycast occlusion.

See this drei storybook: https://drei.pmnd.rs/?path=/story/misc-html--html-raycast-occluder-st

5 replies

ekaterina4952 Dec 28, 2022
Author

Thanks for your reply. But I still have same problem.
If occlude = true, I don't see any markers. If false, It is same before.

isaac-mason Dec 28, 2022
Maintainer

@ekaterina4952 if you're able to share a codesandbox I'm happy to take a look.

ekaterina4952 Dec 29, 2022
Author

The occlude doesnt works anymore in sandbox.
https://codesandbox.io/s/blissful-solomon-q41y1h?file=/src/App.js

isaac-mason Dec 30, 2022
Maintainer

Fixed your codesandbox - https://codesandbox.io/s/onocclude-kzy05t

There were 2 issues:

The marker was positioned inside the model, so it was always occluded. I moved the marker outside of the model.
When only an occlude prop is provided, the children passed to <Html /> are hidden by changing the opacity. When an onOcclude prop is passed in, this default is overridden and it's up to you to animate/handle the transition. I removed the onOcclude handler that was just doing a console.log

ekaterina4952 Dec 30, 2022
Author

Thanks for your help

isaac-mason · 2022-12-27T14:01:59Z

isaac-mason
Dec 27, 2022
Maintainer

Better support for occlusion is coming soon too! See #1168

1 reply

ekaterina4952 Dec 28, 2022
Author

It is same before even if I use occlude = 'raycast' and occlude = 'blending'

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to hide marker of another side #1197

{{title}}

Replies: 2 comments 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

How to hide marker of another side #1197

ekaterina4952 Dec 27, 2022

Replies: 2 comments · 6 replies

isaac-mason Dec 27, 2022 Maintainer

ekaterina4952 Dec 28, 2022 Author

isaac-mason Dec 28, 2022 Maintainer

ekaterina4952 Dec 29, 2022 Author

isaac-mason Dec 30, 2022 Maintainer

ekaterina4952 Dec 30, 2022 Author

isaac-mason Dec 27, 2022 Maintainer

ekaterina4952 Dec 28, 2022 Author

ekaterina4952
Dec 27, 2022

Replies: 2 comments 6 replies

isaac-mason
Dec 27, 2022
Maintainer

ekaterina4952 Dec 28, 2022
Author

isaac-mason Dec 28, 2022
Maintainer

ekaterina4952 Dec 29, 2022
Author

isaac-mason Dec 30, 2022
Maintainer

ekaterina4952 Dec 30, 2022
Author

isaac-mason
Dec 27, 2022
Maintainer

ekaterina4952 Dec 28, 2022
Author