Billboards

[alienatorZ]

Is there an example for how to create billboards similar to billboards in Cesium?

Thanks!

[alienatorZ]

Ok, I think that I figured that out by using the LabelLayer example. Now my question is: How do I move a label in real time? Imagine a label representing a persons position. How is the best way to update the position?

[jailln]

I would advise to use threejs directly to do so instead of LabelLayer that has been designed to display text labels with static positions.
With threejs, you can use a THREE.Points object and add a texture in the PointsMaterial's map attribute (that is the image of your billboard). You can get inspiration from the following threejs example: https://threejs.org/examples/?q=bill#webgl_points_billboards
Once you created your THREE.Points object, you can add it to itowns scene with view.scene.add(points);.
To update your billboards positions, you then only have to modify the THREE.Points geometry which stores the points positions.
Let us know if that works out.

[jailln]

I think it's because you're adding a Coordinates object as a buffer attribute in the line geometry.setAttribute( 'position', cameraTargetPosition ); instead of a BufferAttribute.

Try something like this instead: (I haven't tested it so you might need some adaptations)

const posArr = cameraTargetPosition.toVector3().toArray();
const posTypedArr = new Float32Array(posArr);
const posAttrib = new THREE.BufferAttribute(posTypedArr, 3);
geometry.setAttribute( 'position', posAttrib );

[alienatorZ]

Thank you. It eliminated the zooming error but I still cannot see anything on the map.

[alienatorZ]

This is my complete function:

import * as THREE from 'three';
export function CreateSVGObj(view){
let material;
const sprite = new THREE.TextureLoader().load( 'icon.png' );
var cameraTargetPosition = view.controls.getLookAtCoordinate();
cameraTargetPosition.altitude += 30;
const geometry = new THREE.BufferGeometry();
const posArr = cameraTargetPosition.toVector3().toArray();
const posTypedArr = new Float32Array(posArr);
const posAttrib = new THREE.BufferAttribute(posTypedArr, 3);
geometry.setAttribute( 'position', posAttrib );
material = new THREE.PointsMaterial( { size: 135, sizeAttenuation: false, map: sprite, alphaTest: 0.5, transparent: false } );
material.color.setHSL( 1.0, 0.3, 0.7 );
const particles = new THREE.Points( geometry, material );
view.scene.add( particles );
view.notifyChange(view.camera.camera3D, true);
}

[jailln]

Ok it's because var cameraTargetPosition = view.controls.getLookAtCoordinate(); returns coordinates in EPSG:4326 (lat,long, alt) and you need to place the point in the coordinates of the view so you need an intermediary coordinates conversions in the view crs before setting the point position: var posGeo = cameraTargetPosition.as(view.referenceCrs);

[alienatorZ]

That worked!

[alienatorZ]

Thank you!