使用小组件 > 3D > 3D 图像
  
3D 图像
这个小组件有什么功能?
3D 图像小组件允许您在 AR 体验的 3D 工作区中插入 3D 图像。支持的文件格式包括:
.png
.jpg, .jpeg
.svg
.gif
.bmp
何时会用到这个小组件?
想要向用户显示 3D 图形内容或图片时,会用到图像。例如,如果您要向维修技师描述空气过滤器有多脏,加入一张脏空气过滤器的图像可能更容易让对方清楚了解。
这个小组件中是否有专用的属性、服务、事件或操作?
若要查看小组件常用的属性、服务和事件的列表,请参阅小组件的通用属性、服务和事件
下表列出了该小组件的专用属性。
属性
JavaScript
类型
说明
资源
src
string
3D 图像所用的资源。
若要加入图像,您可以执行以下操作之一:
单击字段旁边的 可添加新的图像文件。
输入图像 URL 或将其直接复制粘贴到字段中。
从下拉菜单中选择图像。
高度
height
number
以米为单位的 3D 图像高度。最小值为 0.04 米。
宽度
width
number
以米为单位的 3D 图像宽度。最小值为 0.04 米。
class
string
分配给小组件的类。
目前支持以下 CSS 属性:
background-color—设置图像的填充颜色
border-color—设置图像的边框颜色
border-style—设置图像的边框样式
border-radius—设置图像的边框圆角
border-width—设置图像的边框宽度
border—将 border-colorborder-styleborder-width 结合在一起
padding—在图像外部填充
例如,在“项目”窗格中的“样式”下面,单击“应用程序”,然后在编辑器中输入以下内容:
.my-image {
border-color: black;
border-style: solid;
border-radius: 5px;
border-width: 3px;
background-color: white
padding: 25px 15px 25px 40px;
}
* 
指定的颜色必须是 CSS 颜色。如果不清楚有效的 CSS 颜色,可在互联网上搜索“CSS 颜色”相关信息。
然后,在 3D 图像的“类”字段中,输入 my-image。这是指“样式” > “应用程序”中添加的内容。
比例
scale
string
3D 图像的比例。
X 坐标
x
number
图像在 X 轴上的位置。
Y 坐标
y
number
图像在 Y 轴上的位置。
Z 坐标
z
number
图像在 Z 轴上的位置。
X 旋转
rz
number
图像绕着 X 轴旋转的角度。
Y 旋转
ry
number
图像围绕 Y 轴旋转的角度。
Z 旋转
rz
number
图像围绕 Z 轴旋转的角度。
Billboard
billboard
boolean
使小组件围绕其中心旋转,以便其始终面向观看者。它与屏幕对齐。
遮蔽
occlude
boolean
如果选中此项,则小组件的几何体会消失,但同时在 3D 场景中也会遮蔽任何其他增强。
因此,背景或照相机的数据反馈会出现被遮蔽的小组件应该显示的位置上。此功能可用于隐藏周围的 3D 几何体来强调某些增强。
始终置顶
decal
boolean
无论 3D 场景的深度如何,小组件几何体均会叠加在场景中的任何其他增强上。如果设置为“是”,则不会被其他增强遮蔽。
不透明度 (1 不透明 - 0 透明)
opacity
number
介于 0 和 1 之间的数字,用于控制对象的透明度级别。0 = 完全透明,1 = 完全不透明。
枢轴
pivot
boolean
确定图像的枢轴点:
左上方
正上
右上方
左中
正中
右中
左下方
正下
右下方
小组件的显示效果
以下是小组件的显示效果示例!
使用时的必要步骤
显示效果
1. “3D 图像”小组件拖放到工作区中。
2. (可选)在“详细信息”窗格中选中“Billboard”的复选框。
3. “资源”字段中,选择现有图像、添加新图像或输入所需显示图像的 URL。
4. 将图像放置在工作区的所需位置上。
使用 CSS 设置小组件样式
您可以使用 CSS 设置小组件样式!下面是您可以创建和应用的 CSS 类的示例:
* 
请注意,最好为您的类指定唯一名称,以避免与其他类或预装属性发生冲突。
CSS 示例
显示效果
.ptc-3DImage {
padding: 10px;
border: 10px solid black;
border-radius: 50px;
background: green;
}
有关实现 CSS 类的详细信息,请参阅应用程序样式