How to add labels/annotations to 3d ThreeJS model world

hello my zapp works of our world whit on/off map
but I like much more labeling
how to di that on a ZIM gltf?

i found this articles with globe example bit not made in ZIM

with sandbox example in html
https://codesandbox.io/p/sandbox/6oei7

who can help
on this https://zimjs.com/three I found the mercury planet with circle and tip label annotation but not working in a ZIM Texture Active yet

thanks

Put it on the texture at https://imgur.com/ZHsDcc4

Otherwise, make a TextGeometry() and mesh it to a material. Then place the meshes around the world using mesh.position.x, mesh.position.y, mesh.position.z and mesh.rotation.y etc. Would be a pain. All this is not ZIM.

can you check this example how it can be integrated in ZIM : because it is a html code label
https://codesandbox.io/p/sandbox/6oei7

markers code

import * as THREE from 'three'
import { useState, useRef } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { useGLTF, Html, OrbitControls, Environment, ContactShadows } from '@react-three/drei'
import { FaMapMarkerAlt } from 'react-icons/fa'

function Model(props) {
  /*
  Auto-generated by: https://github.com/pmndrs/gltfjsx
  author: JasperTobias (https://sketchfab.com/JasperTobias)
  license: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
  source: https://sketchfab.com/3d-models/lowpoly-earth-ce0cce9b528b47c7984bf0b2b600d705
  title: LowPoly Earth
  */
  const { nodes, materials } = useGLTF('/earth.gltf')
  return (
    <group rotation={[-Math.PI / 2, 0, Math.PI]} {...props} dispose={null}>
      <mesh geometry={nodes['URF-Height_Lampd_Ice_0'].geometry} material={materials.Lampd_Ice} />
      <mesh geometry={nodes['URF-Height_watr_0'].geometry} material={materials.watr} material-roughness={0} />
      <mesh geometry={nodes['URF-Height_Lampd_0'].geometry} material={materials.Lampd} material-color="lightgreen">
        <Marker rotation={[0, Math.PI / 2, 0]} position={[0, 1.3, 0]}>
          {/* Anything in here is regular HTML, these markers are from font-awesome */}
          <FaMapMarkerAlt style={{ color: 'orange' }} />
        </Marker>
        <group position={[0, 0, 1.3]} rotation={[0, 0, Math.PI]}>
          <Marker rotation={[0, Math.PI / 2, Math.PI / 2]}>
            <div style={{ position: 'absolute', fontSize: 10, letterSpacing: -0.5, left: 17.5 }}>north</div>
            <FaMapMarkerAlt style={{ color: 'indianred' }} />
          </Marker>
        </group>
      </mesh>
    </group>
  )
}

// Let's make the marker into a component so that we can abstract some shared logic
function Marker({ children, ...props }) {
  const ref = useRef()
  // This holds the local occluded state
  const [isOccluded, setOccluded] = useState()
  const [isInRange, setInRange] = useState()
  const isVisible = isInRange && !isOccluded
  // Test distance
  const vec = new THREE.Vector3()
  useFrame((state) => {
    const range = state.camera.position.distanceTo(ref.current.getWorldPosition(vec)) <= 10
    if (range !== isInRange) setInRange(range)
  })
  return (
    <group ref={ref}>
      <Html
        // 3D-transform contents
        transform
        // Hide contents "behind" other meshes
        occlude
        // Tells us when contents are occluded (or not)
        onOcclude={setOccluded}
        // We just interpolate the visible state into css opacity and transforms
        style={{ transition: 'all 0.2s', opacity: isVisible ? 1 : 0, transform: `scale(${isVisible ? 1 : 0.25})` }}
        {...props}>
        {children}
      </Html>
    </group>
  )
}

export default function Viewer() {
  return (
    <Canvas camera={{ position: [5, 0, 0], fov: 50 }}>
      <ambientLight intensity={0.5} />
      <Model position={[0, 0.25, 0]} />
      <Environment preset="city" />
      <ContactShadows frames={1} scale={5} position={[0, -1, 0]} far={1} blur={5} opacity={0.5} color="#204080" />
      <OrbitControls />
    </Canvas>
  )
}

Work it out.

I found a solution via this article https://discourse.threejs.org/t/how-to-create-sketchfab-like-annotations-with-three-js/12595

to this website https://manu.ninja/webgl-three-js-annotations/

with a codepen example

so how to make it possible into a ZIM file now?
any suggestions?
because it is pure THREEjs and html above, it turns perfectly
can be cool to have it in ZIM request 019 to make it easy implementing it
thanks to have a look
note: nice to know text is always readable (under the codepen example)


he did the same idea as sketchlab does to annoate https://sketchfab.com/blogs/community/want-your-models-to-tell-a-story-meet-our-new-annotations-feature/

I tried it and looks like this
I get it fixed onto a location ontop of the cube in ZIM
and also with to possibility to show and hide the annotation
from https://zimjs.com/015/textureactive5.html
look like this


and not centered aove the number


so cool it works with zooming out

what do you think, cool?
GreetZ

look I did it!! not yet with ZIM panel.. but how amazing! labels around the globe!!

so we can point out where all ZIM coders are!
problem was when rotation and animation the annotation was not turning, I fixed that issue watch my solution, annotation becomes greyed out but fixed to the position of the label!
the zapp

cool - maybe move it away from the cube a little so it does not cut through it.

I think this is what React/Fibre people are doing - adding 2D annotations to 3D. Would be handy to have an easy way with the TextureActive system... will give it some thought for 019.

1 Like

An ortho and non-ortho version of annotations:

https://zimjs.com/015/annotation.html

https://zimjs.com/015/annotation2.html

1 Like