Closed xinzi1990 closed 1 week ago
import "@google/model-viewer";
<model-viewer // 指定3D模型的URL。这是model-viewer加载和显示3D模型所必需的 src='https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb' // 可能会用到:指定在iOS设备上使用的3D模型的URL。由于iOS和Android在AR技术实现上的差异,有时需要为iOS设备提供单独的模型文件 ios-src='https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb' // 指定一个海报图像,当模型未加载或无法显示时显示此图像 // poster='xxx.webp' // 提供模型的替代文本描述,这有助于改善网页的可访问性 alt="A 3D model of something" // 使模型自动旋转。这有助于用户从多个角度查看模型 auto-rotate // 设置模型阴影的强度。通过调整此参数,可以改善模型的立体感和真实感 shadow-intensity="1" // 启用相机控制。这允许用户通过拖动鼠标或触摸屏幕来移动、旋转和缩放模型 camera-controls />
提示:类型“JSX.IntrinsicElements”上不存在属性“model-viewer”
global.d.ts declare namespace JSX { // eslint-disable-next-line @typescript-eslint/naming-convention interface IntrinsicElements { 'model-viewer': any; } }
import "@google/model-viewer";
<model-viewer // 指定3D模型的URL。这是model-viewer加载和显示3D模型所必需的 src='https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb' // 可能会用到:指定在iOS设备上使用的3D模型的URL。由于iOS和Android在AR技术实现上的差异,有时需要为iOS设备提供单独的模型文件 ios-src='https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb' // 指定一个海报图像,当模型未加载或无法显示时显示此图像 // poster='xxx.webp' // 提供模型的替代文本描述,这有助于改善网页的可访问性 alt="A 3D model of something" // 使模型自动旋转。这有助于用户从多个角度查看模型 auto-rotate // 设置模型阴影的强度。通过调整此参数,可以改善模型的立体感和真实感 shadow-intensity="1" // 启用相机控制。这允许用户通过拖动鼠标或触摸屏幕来移动、旋转和缩放模型 camera-controls />
提示:类型“JSX.IntrinsicElements”上不存在属性“model-viewer”
global.d.ts declare namespace JSX { // eslint-disable-next-line @typescript-eslint/naming-convention interface IntrinsicElements { 'model-viewer': any; } }