Annotation组件

使用Annotation组件可以将HTMLElement添加到实体上。

import { Annotation, Entity, HorizontalOrigin, VerticalOrigin } from '@tx3d/core';

// 构建HTMLElement
const domElement = document.createElement( 'div' );
domElement.className = 'annotation';
domElement.innerHTML = '<p><strong>变压器</strong></p>' + 
                       '<p>变压器（Transformer）是利用电磁感应的原理来改变交流电压的装置，主要构件是初级线圈、次级线圈和铁芯（磁芯）。</p>';

// 创建一个空实体
const entity = engine.createEntity();

// 添加Annotation组件
const annotation = entity.addComponent( Annotation, {

    domElement: domElement,
    verticalOrigin: VerticalOrigin.TOP,
    horizontalOrigin: HorizontalOrigin.LEFT,

} );

提示

Annotation组件初始化参数，详见AnnotationParameters。

属性

🌏 position 位置（Local）

// 获取位置
const position = annotation.position;

// 设置位置
annotation.position = [ 0.0, 1.5, 0.0 ];

🌏 offset 水平&垂直方向偏移量，单位：像素。

// 获取水平&垂直方向偏移量
const offset = annotation.offset;

// 设置水平&垂直方向偏移量
annotation.offset = [ 10, 0 ];

🌏 horizontalOrigin 水平方向原点

// 获取水平方向原点
const horizontalOrigin = annotation.horizontalOrigin;

// 设置水平方向原点
annotation.horizontalOrigin = HorizontalOrigin.CENTER;

提示

水平方向原点，详见HorizontalOrigin。

🌏 verticalOrigin 垂直方向原点

// 获取垂直方向原点
const verticalOrigin = annotation.verticalOrigin;

// 设置垂直方向原点
annotation.verticalOrigin = VerticalOrigin.BOTTOM;

提示

垂直方向原点，详见VerticalOrigin。

🌏 visible 可见性控制

// 获取可见性
const visible = annotation.visible;

// 设置可见性
annotation.visible = false;

🌏 visibleRange 可视区间设置

// 获取可视区间
const visibleRange = annotation.visibleRange;

// 设置可视区间
annotation.visibleRange = [ 0.0, 1500.0 ];

🌏 enableFrameUpdate 帧更新控制

// 获取是否启用帧更新
const enableFrameUpdate = annotation.enableFrameUpdate;

// 设置是否启用帧更新
annotation.enableFrameUpdate = true;

提示

如果需要Annotation跟随运动，需要开启帧更新。

🌏 autoCulling 自动遮挡剔除控制

// 获取是否自动遮挡剔除
const autoCulling = annotation.autoCulling;

// 设置是否自动遮挡剔除
annotation.autoCulling = false;

🌏 weight 自动遮挡剔除权重

// 获取自动遮挡剔除权重
const weight = annotation.weight;

// 设置自动遮挡剔除权重
annotation.weight = 1.0;