TGL

Based on Three.js. Project for WebGL

Install

yarn add troila-gl

Use

initial

import { App } from "troila-gl"

const app = new App({ appId: 'id', domain: 'server address' })

| Params | Type | Description | Optional | | -- | -- | -- | -- | | appId | string | 项目 id | true | domain | string | 服务端域名 | true | container | HTMLElement | 容器 Dom | false

Property

| Prop | Type | Default | Description | | -------------- | -------- | ---------- | ---- | | skyBox | menu | null | 天空盒 | fog | { color: string, density: number } | null | 雾化 | level | SceneLevel | SceneLevel | 层级实例 | widget | {Panel} | - | 创建锚点可选的组件

Method

on( type , func )

• type {string} 事件类型
• func {Function} 响应事件
• returns {Function} 移除响应事件

| Type| Event Function Params | Description | | -- | -- | -- | -- | | onLoad | undefined |
| click | BaseObject | 行为对象
| dblclick | BaseObject | 行为对象
| mousemove | BaseObject | 行为对象
| mouseon | BaseObject | 行为对象
| mouseoff | BaseObject | 行为对象

app.on('onLoad', () => {
    
})
app.on('click', (obj) => {
    
})

query(str)

查询 id 为 001 的对象集合 app.query('#001') 查询 name 为 car01 的对象集合 app.query('car01') 查询 type 为 Thing 的对象集合 app.query('.Thing') 根据正则表达式匹配 name 中包含 'car' 的子物体 app.query(/car/)

• str {string | RegExp} 查询规则
• returns {BaseObject[]} 查询结果

createUIAnchor({ element, parent, localPosition?, pivot?, pivotPixel?, node?})

将界面元素的 dom 节点挂接在 3D 场景中某个位置或物体上

@param element - 界面的dom元素
@param parent - 界面的父物体（位置跟随父物体更新）
@param localPosition - 相对父物体的偏移系数
@param pivot - 界面的轴心，以百分比表示界面轴心位置, [0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
@param pivotPixel - 相对于Element轴心点的偏移像素值
@param node - 适用于非BaseObject的节点挂载
已经提供了 widget.Panel，Panel的优点是 统一的样式 和 响应数据更改自动更新界面. 系统化的样式建议直接使用 Panel
@returns 界面元素实例

const element = document.createElement('div')
element.textContent = 'div'
app.createUIAnchor({ element, parent: baseObject })

widget

• Panel

基础展示面板

const element = document.createElement('div')
element.textContent = 'div'
const panel = new app.widget.Panel({ width: '100px', height: '100px' })
panel.container.style.backgroundColor = '#999999'
panel.appendChild(element)
app.createUIAnchor({ element: panel.domElement, parent: baseObject })

Panel

| Prop | Type | Default | Description | | -------------- | -------- | ---------- | ---- | | domElement | HTMLElement | div | dom

addString( object, property )

• object {Object} 数据对象
• property {String} 要绑定的某属性值的属性名称
• returns {PanelString}

const dataObj = {
  '气温':'21℃'
}
const ctrl = panel.addString(dataObj, '气温')

添加字符串组件

appendChild( node )

• node {HTMLElement} 添加到Child的HTML

panel.appendChild(document.createElement('div'))

添加HTML

SceneLevel

Method

change( target )

• target {BaseObject} 跳转到的目标对象

切换层级行为

back()

回退层级行为

popToTop()

返回顶层

rollback()

回滚层级

level property

| Prop | Type | Default | Description | | -------------- | -------- | ---------- | ---- | | current | BaseObject | null | null | 当前层级 | root | BaseObject | RootLevel | 根结点

BaseObject

Method

toScreenPosition ( )

• returns { x: number; y: number; } 相对于container的2d坐标

on ( event , func )

• event {EventType} 事件类型
• func {Function} 响应事件
• returns {Function} 移除响应事件

off ( event , func? )

• event {EventType} 事件类型
• func {Function} 响应事件，不传时清除事件下的所有响应

Property

| Prop | Type | Default | Description | | -------------- | -------- | ---------- | ---- | | visible | boolean | true | 显示 | selected | boolean | false | 选中 | style | BaseStyle | BaseStyle | 样式

BaseStyle Property

| Prop | Type | Default | Description | | -------------- | -------- | ---------- | ---- | | opacity | number | 1.0 | 透明度