此方案已经废弃,转为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对象时会做以下处理:
- 将接收到的domCreator函数放入domCreatorMap中去,此map以3D对象的uuid为key,以domCreator函数为value
- 发布'domAdded'消息,此消息的具体结构如下:{type: 'domAdded', payload: {id: uuid}}。消息中payload的id属性为3D对象的uuid
- 给3D对象添加'dispose'消息的监听函数,在该监听函数内负责移除domCreatorMap中的相对应数据,并向TuoScene发布'domRemoved'消息。此消息的具体结构如下:{type: 'domRemoved', payload: {id: uuid}}
TuoView对domCreator的处理
对于TuoView而言,主要是处理两个时机。一个是调用domCreator创建dom元素的时机,一个是移除dom元素的时机。
- 创建dom元素。TuoView会监听TuoScene的'domAdded'事件,当监听到此事件时,立即给自己的needsAddDomSet中添加消息中的uuid。然后,在下一次的render函数调用时,会检测needsAddDomSet中的uuid,并根据uuid来调用scene中domCreatorMap所保存的domCreator函数来创建dom。并将dom对象保存到domMap中去。
- 移除dom元素。相比于创建dom元素,移除就要简单一些。TuoView会监听TuoScene的'domRemoved'事件,当监听到此事件时,立即从domMap中检索到相对应的dom,并从ui和domMap中移除此dom的所有信息。