How to hide marker of another side #2683

ekaterina4952 · 2022-12-27T08:38:00Z

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

How to hide marker of another side #2683

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

How to hide marker of another side #2683

Uh oh!

ekaterina4952 Dec 27, 2022

Replies: 0 comments

ekaterina4952
Dec 27, 2022