Renderable组件

Renderable是所有渲染组件的基类，例如，模型（Model）、标签（Marker）、雷达波（Radar）等。

属性

🌏 position 渲染组件本地位置设置&获取

🌏 worldPosition 获取渲染组件世界位置，只读

🌏 scale 渲染组件本地缩放设置&获取

🌏 worldScale 获取渲染组件世界缩放，只读

🌏 rotation 渲染组件本地旋转角（单位：弧度）设置&获取

🌏 quaternion 渲染组件本地旋转四元数设置&获取

🌏 worldQuaternion 获取渲染组件世界旋转四元数，只读

🌏 visible 渲染组件可见性控制

🌏 bounds 获取渲染组件外包范围，只读

🌏 object3D 获取渲染组件对应的“Object3D”对象，只读

接口

公有接口

🌏 localToWorld 本地坐标转世界坐标

🌏 worldToLocal 世界坐标转本地坐标

🌏 setTransform 设置渲染组件的方位信息（位置、旋转、缩放）

🌏 setHighlight 设置渲染组件是否高亮

提示

该方法为空方法，子类可以根据实际需求决定是否继承实现。

🌏 setStencil 设置渲染组件模板参数

提示

该方法为空方法，子类可以根据实际需求决定是否继承实现。

🌏 replaceMaterial 替换渲染组件材质

提示

该方法为空方法，子类可以根据实际需求决定是否继承实现。

🌏 recoverMaterial 恢复渲染组件材质

提示

该方法为空方法，子类可以根据实际需求决定是否继承实现。

🌏 raycast 射线查询

注意

该方法为抽象（abstract）方法，子类必须继承实现！！！

保护接口

🌏 _onEnable 启用渲染组件

🌏 _onDisable 禁用渲染组件

🌏 _updateMatrixWorld 更新渲染组件世界矩阵

🌏 _updateBounds 更新渲染组件外包范围

🌏 _destroy 销毁渲染组件

注意

该方法为抽象（abstract）方法，子类必须继承，用于实现渲染对象及渲染数据的销毁释放！！！

扩展

通过扩展渲染组件可以为实体添加不同的渲染效果，如何扩展渲染组件，详见教程"如何开发一个渲染组件"。在扩展渲染组件时有以下几点需要注意：

1️⃣ Renderable的raycast和_destroy是抽象方法，扩展时必须重载。其它方法可以根据实际需求选择性重载。

2️⃣ Renderable的保护属性 _object3D 用于记录渲染对象，扩展时需要将渲染对象赋值给 _object3D 或挂接到 _object3D 上。而 _object3D 需要挂接到实体上才能够进行渲染。

注意

_object3D 挂接到实体上后需要手动调用_updateMatrixWorld和_updateBounds方法以确保世界矩阵和外包范围同步更新！！！

3️⃣ Renderable的保护属性 _renderOrder 记录渲染顺序，需要赋给渲染对象。

注意

1️⃣ _renderOrder需要赋给渲染对象而不是 _object3D。

2️⃣ _renderOrder的值越大渲染越靠后，默认值为RenderOrder.Default（即50）。

import { Intersection, Mesh, Raycaster } from 'three';
import { Entity, Renderable } from '@tx3d/core';

/**
 * 扩展渲染组件（只包含一个Mesh）
 */
class ExtendRenderable extends Renderable {

    constructor( entity: Entity, parameters: any = {} ) {

        super( entity, parameters );

        this._render( parameters );

    }

    // public functions

    /**
     * 重载raycaster方法
     */ 
    raycaster( raycaster: Raycaster ): Intersection {

        // TODO:待实现
        return null;

    }

    // private functions

    /**
     * 渲染组件
     */ 
    private _render( parameters: any ): void {

        // TODO:构建Geometry和Material
        ......

        // 构建渲染对象
        this._object3D = new Mesh( geometry, material );
        
        // 设置渲染顺序
        this._object3D.renderOrder = this._renderOrder;

        // 添加到场景
        this.entity.transform.addObject3D( this._object3D );

        // 更新世界矩阵
        this._updateMatrixWorld();

        // 更新外包范围
        this._updateBounds();

    }

    // protected functions

    /**
     * 重载_destroy方法
     */
    protected _destroy(): void {

        // 释放渲染资源
        this._object3D.geometry.dispose();
        this._object3D.material.dispose();

    } 

}

或者

import { Group, Intersection, Mesh, Raycaster } from 'three';
import { Entity, Renderable } from '@tx3d/core';

/**
 * 扩展渲染组件（包含多个Mesh）
 */
class ExtendRenderable extends Renderable {

    constructor( entity: Entity, parameters: any = {} ) {

        super( entity, parameters );

        this._render( parameters );

    }

    // public functions

    /**
     * 重载raycaster方法
     */ 
    raycaster( raycaster: Raycaster ): Intersection {

        // TODO:待实现
        return null;

    }

    // private functions

    /**
     * 渲染组件
     */ 
    private _render( parameters: any ): void {

        // 构建渲染组
        this._object3D = new Group();

        // TODO:构建Geometry和Material
        ......

        // 构建渲染对象0
        const mesh0 = new Mesh( geometry0, material0 );
        
        // 设置渲染顺序
        mesh0.renderOrder = this._renderOrder;

        // 创建渲染对象1
        const mesh1 = new Mesh( geometry1, material1 );

        // 设置渲染顺序
        mesh1.renderOrder = this._renderOrder;

        // 添加到渲染组中
        this._object3D.add( mesh0 );
        this._object3D.add( mesh1 );

        // 添加到场景
        this.entity.transform.addObject3D( this._object3D );

        // 更新世界矩阵
        this._updateMatrixWorld();

        // 更新外包范围
        this._updateBounds();

    }

    // protected functions

    /**
     * 重载_destroy方法
     */
    protected _destroy(): void {

        // 释放渲染资源
        const children = this._object3D.children;
        for ( let i = 0, il = children.length; i < il; i++ ) {

            children[ i ].geometry.dispose();
            children[ i ].material.dispose();

        }

        this._object3D.children.length = 0;

    } 

}