tuo-scene的3维附属DOM对象设计

此方案已经废弃,转为TuoObject2D的方案

tuo-scene将会支持更好的dom对象的应用,以此来增强2D和3D的交互能力。3D对象的附属DOM实现步骤如下:

3D对象嵌入DOM的创建方法

在3D对象的userData中添加如下的结构

userData: {
domCreator: Function
}

domCreator函数接收一个dom元素作为parent,在domCreator中,必须将新创建的dom元素添加到该参数的dom元素中去,并对新创建的dom的样式和回调函数都配置妥当。需要注意的是,dom元素在创建时候的一些数据可以与2D或3D的一些坐标相关联。由其注意,此函数还需要将新创建的dom元素返回。

TuoScene对domCreator的处理

TuoScene在接收到满足以上条件的3D对象时会做以下处理:

  1. 将接收到的domCreator函数放入domCreatorMap中去,此map以3D对象的uuid为key,以domCreator函数为value
  2. 发布'domAdded'消息,此消息的具体结构如下:{type: 'domAdded', payload: {id: uuid}}。消息中payload的id属性为3D对象的uuid
  3. 给3D对象添加'dispose'消息的监听函数,在该监听函数内负责移除domCreatorMap中的相对应数据,并向TuoScene发布'domRemoved'消息。此消息的具体结构如下:{type: 'domRemoved', payload: {id: uuid}}

TuoView对domCreator的处理

对于TuoView而言,主要是处理两个时机。一个是调用domCreator创建dom元素的时机,一个是移除dom元素的时机。

  1. 创建dom元素。TuoView会监听TuoScene的'domAdded'事件,当监听到此事件时,立即给自己的needsAddDomSet中添加消息中的uuid。然后,在下一次的render函数调用时,会检测needsAddDomSet中的uuid,并根据uuid来调用scene中domCreatorMap所保存的domCreator函数来创建dom。并将dom对象保存到domMap中去。
  2. 移除dom元素。相比于创建dom元素,移除就要简单一些。TuoView会监听TuoScene的'domRemoved'事件,当监听到此事件时,立即从domMap中检索到相对应的dom,并从ui和domMap中移除此dom的所有信息。

发表评论

邮箱地址不会被公开。 必填项已用*标注