usePrimitive

Used for reactive loading of Primitive. It automatically destroys or reloads the Primitive instance when the data changes.

Usage

<script setup lang="ts">
import * as Cesium from 'cesium';
import { usePrimitive } from 'vesium';
import { watchEffect } from 'vue';

const billboardCollection = usePrimitive(() => {
  const rotationMatrix = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(0)));
  const modelMatrix = Cesium.Matrix4.multiply(Cesium.Matrix4.IDENTITY, rotationMatrix, new Cesium.Matrix4());
  return new Cesium.BillboardCollection({ modelMatrix });
});

watchEffect((onCleanup) => {
  const label = billboardCollection.value?.add(
    new Cesium.Billboard({
      position: Cesium.Cartesian3.fromDegrees(-80, 20),
      image: '/favicon.svg',
      width: 50,
      height: 50,
    }, billboardCollection.value),
  );
  onCleanup(() => {
    try {
      label && !billboardCollection.value?.isDestroyed() && billboardCollection.value?.remove(label);
    }
    catch (error) {
      console.error(error);
    }
  });
});
</script>

<template>
</template>

// Overload 1: Load a single instance
const primitive = usePrimitive(primitive);
const primitive = usePrimitive(new Cesium.Cesium3DTileset());

// Overload 2: Load an array of instances
const primitives = usePrimitive([primitive1, primitive2]);

const isActive = ref(true);
const isLoading = ref(true);

// Options
const primitive = usePrimitive(primitive, {
  collection, // Primitive collection
  isActive, // Whether to activate
  evaluating: isLoading // Loading status reference
});

Type Definitions

import type { PrimitiveCollection } from 'cesium';
import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
import type { MaybeRefOrAsyncGetter } from '../toPromiseValue';
export interface UsePrimitiveOptions {
    /**
     * The collection of Primitive to be added
     * - `ground` : `useViewer().scene.groundPrimitives`
     * @default useViewer().scene.primitives
     */
    collection?: PrimitiveCollection | 'ground';
    /**
     * default value of `isActive`
     * @default true
     */
    isActive?: MaybeRefOrGetter<boolean>;
    /**
     * Ref passed to receive the updated of async evaluation
     */
    evaluating?: Ref<boolean>;
}
/**
 * Add `Primitive` to the `PrimitiveCollection`, automatically update when the data changes, and destroy the side effects caused by the previous `Primitive`.
 *
 * overLoaded1: Parameter supports passing in a single value.
 */
export declare function usePrimitive<T = any>(primitive?: MaybeRefOrAsyncGetter<T | undefined>, options?: UsePrimitiveOptions): ComputedRef<T | undefined>;
/**
 * Add `Primitive` to the `PrimitiveCollection`, automatically update when the data changes, and destroy the side effects caused by the previous `Primitive`.
 *
 * overLoaded2: Parameter supports passing in an array.
 */
export declare function usePrimitive<T = any>(primitives?: MaybeRefOrAsyncGetter<Array<T | undefined>>, options?: UsePrimitiveOptions): ComputedRef<T[] | undefined>;