问题描述
我将 Google 的 ModelViewer 用于 WebAR 项目。
我有一个 vue.js 项目,我有一个组件正在加载具有 <model-viewer>
属性的模型。我正在尝试将模型查看器的 src
属性设置为我的项目文件夹中 .glb 模型的绝对路径。 (注意:我必须使用绝对路径,否则不会加载也不会显示任何错误)
这是vue组件中的HTML代码:
<model-viewer
src="*path-to-project*/src/assets/models/Astronaut.glb"
alt="A 3D model of an astronaut"
ar
ar-modes="webxr scene-viewer quick-look"
ar-placement="floor"
environment-image="neutral"
auto-rotate
camera-controls
></model-viewer>
不允许加载本地资源:file:///path-to-project/src/assets/models/Astronaut.glb
从官方网站示例中提供的 URL 加载工作正常。我确定可以加载本地文件并在 ModelViewer 中显示它,对吗?
任何帮助将不胜感激。
解决方法
@/assets/models/Astronaut.glb
如果您在 src
文件夹中有它
但是对于静态资源,最好将它放在 public
文件夹中,例如 public/models/Astronaut.glb
,然后在您的组件中调用它/models/Astronaut.glb