发布时间：2020-2-28 19:02:31
为了利于客户更加了解PUI3DCreator的功能，本篇将以UIPower智慧园区项目为例，对PUI3DCreator这款工具做更加全面的介绍。
之前 《3D可视化开发工具PUI3DCreator的操作方法》 这篇文章中，简单的提到过组件，但是并没有详细介绍过它。组件好比一个个预先准备好的零部件，组件可以有自己的属性和方法。属性是组件数据的简单访问者，方法则是组件的一些简单而可见的功能。使用组件可以实现拖放式编程、快速的属性处理以及真正的面向对象的设计。
PUI3DCreator中组件是用JavaScript语言编写的，组件推荐写在独立的js文件中，使用时直接通过script标签引入到工具库代码的下方。
1.基本内置组件介绍
PUI3DCreator中的组件分为内置组件与自定义组件。自定义组件的编写方法链接：http://www.uipower.com/news/PUI3DCreator.html；
内置组件用于开发人员完成基本的3D场景搭建和效果呈现。比如geomery组件与material组件，用于在实体中构建3D对象，gltf-model组件用于导入外部模型，这也是该次园区项目搭建的基础。就以项目中的代码解释下组件。
PUI3DCreator通过<pui3d-entity>元素表示实体,组件将以属性的形式插入，组成它的样式、功能、行为。每个实体都有位置(position)、缩放比例(scale)、旋转角度(rotation)三个属性，可以直接用PUI3DCreator来修改属性值，调整模型对象。
实体内的属性名就是组件名，所以命名时注意用英文，而且不能有大写字母。属性值就是组件内的参数值，可以通过修改参数值得到不同的展示效果。就拿gltf-mode组件举例，选中，模型物体，修改路径，模型自动变更。
2.关于对象的操作方法
PUI3DCreator支持js的dom操作，比如整个场景可以通过以下语句获得：
var sceneEl = document.querySelector('a-scene');
sceneEl.object3D调用.object3D方法，可以直接获得threeJS对象。工具中直接点中物体获得该对象，既可以进行相关的拉伸、平移等基础操作，也可对其进行组件附加的高级应用。
设置与去除事件监听，可以通过以下形式操作:
实体.addEventListener(“事件名”,function(){});
实体.removeEventListener(“事件名”,function(){});
触发事件操作：
实体.emit(“事件名”);
工具的基类中具有添加与删除的部分相关方法：
实体.getObject3D('mesh');
实体.getObject3D('light');
实体.setObject3D('light', new THREE.PointLight());
实体.removeObject3D('light');
实体.setAttribute(“组件名”);
实体.getAttribute(“组件名”);
3.对象的动效设置
PUI3DCreator中自带有animation组件（基于tween动画库编写）。 开发人员也可运用TWEENMax.js、anime.js等等动画库通过.object3D方法进行对象操作。
<pui3d-entity rotation="0 0 0" animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></pui3d-entity>
组件编写时，开发人员需要按照一定的规范，组件本身就具有灵活性和复用性，写法上不可只满足单个项目要求。事件的监听上注意好事件的排序，监听触发完后注意使用remove方法去除监听。PUI3DCreator具有可视化添加组件和效果调试的功能，所以要利用该特点进行相关调试。后续我们将陆续推出更多功能，优化工具效果，提高我们的产品质量，为3D开发人员的工作提供更多便利。
