模型查看器不加载本地文件“不允许加载本地资源”

Question

我正在使用谷歌的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中显示它，对吗？

任何帮助都将不胜感激。

Answer 1

如果您将它放在@/assets/models/Astronaut.glb文件夹中，则为src。

但是对于静态资产，最好把它放在public文件夹中，比如public/models/Astronaut.glb，然后在组件中称为/models/Astronaut.glb。