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