troila-gl

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	透明度