问题标签 [model-viewer]

我目前正在开发一个 Shopify 网站，其中包含动画 3D 模型，效果非常好，但动画变得非常重复。我试图创建一个可以切换暂停/播放动画的按钮，但我做不到。Shopify 分发 modelviewer.dev技术。我遵循了他们的文档，但没有运气。你可以帮帮我吗？

带有 3D 模型动画的页面示例： https ://sportstraining.pt/collections/soccer/products/wheeled-board-soccer

模型查看器文档： https ://modelviewer.dev/docs/index.html#entrydocs-animation-properties-paused

JS代码

我为 webAR 使用 Google 模型查看器，但是在网络浏览器的 3D 视图中，3D 对象在光线和反射下看起来很好，当我更改为 AR 模式时，对象显示没有任何反射。所以金属或玻璃看起来不正确。任何人都知道如何解决这个问题？

我有一些 GLB 文件，我可以轻松地在浏览器中渲染并使其具有交互性（我基本上可以旋转它）

显然，这是一个外部托管的示例 GLB 文件，但我有自己的更简单 GLB 文件的集合。

有谁知道不仅可以与 GLB 交互，而且可以检索有关您单击的对象部分的数据并将其传递给客户端的方法？例如，如果我有一个简单的正方形渲染，有没有一种方法，如果我点击它的一部分，我可以获得一个“警报”javascript命令，其中包含我点击的坐标，或者我点击的形状，还是节点的名称（基本上是原始 GLTF JSON 格式的任何数据）？

我制作了一个静态网页应用程序，我一直在慢慢地将其转换为 React（MERN 堆栈）以使其更具动态性/因此我不必配置每个 HTML 文档。这是一个使用谷歌模型查看器的产品配置器。

我对使用全栈工作流程还很陌生，但到目前为止发现它很有趣！但是，我无法理解如何将我的一些 vanilla JS 转换为在 React 中工作。当用户单击按钮时，此特定脚本将更改源/3D 模型。下面是我目前在静态网页上工作的代码片段。

这是数据库的样子：

“product.size”是从 MongoDB 中提取的，我想知道是否可以将模型交换为：“product.src”、“product.src2”、“product.src3”（也在DB 已经）我假设我需要使用 useState 来切换源，但我不确定。任何帮助将不胜感激！如果您想查看我正在尝试完成的静态网页，如果有帮助，您可以在此处查看。

以下是产品在 redux 中的导出方式：

我正在尝试将 @google/model-viewer Web 组件添加到我的 Angular 应用程序中。

它尝试加载，但随后不断给我以下错误：

任何人都可以简单地使用他们可以分享的角度？（有点惊讶没有图书馆）

我在模型查看器标签中链接了一个动画 .glb 文件。访问链接时，海报将显示几秒钟，然后模型动画将播放，其下方有一个按钮，可在 AR 空间中查看。按下按钮时，模型出现在空间中，但动画不再播放。有没有人有什么建议？我在https://gltf-viewer.donmccurdy.com/上查看了模型，那里没有任何错误。我还尝试为基本的搅拌机立方体设置动画，但仍然遇到同样的问题。

这是代码的链接：https ://glitch.com/edit/#!/speckled-therapeutic-gum 注意：您必须在手机上查看才能看到问题。

谢谢！

AR Quick View 的 AR Quick View 按钮在某些 iOS 设备上无法按下。至于 iPhone 12 Pro，在 iOS 15 上使用标准 iOS 二维码阅读器读取时无法按下 AR Quick View 按钮，但在 iOS 14 上的 iPhone 12 Pro 上可以按下 AR Quick View 按钮。在其他设备上，从 Safari 启动时可以按 AR Quick View 按钮，但从标准 QR 码阅读器访问时不能按 AR Quick View 按钮。此外，在某些 iOS 设备上，无法按下 AR 快速查看按钮。该问题似乎也发生在https://konabeer.jp/beach-diorama-ar/之外。有什么办法可以避免这个 AR 快速查看按钮无法按下？如果我能获得更多信息而不仅仅是这个问题的解决方案，那将非常有帮助。

作为我们自己验证的结果，在 iOS 15 上以及从控制中心导入二维码时，AR 快速查看按钮已停用。如果您知道任何已知的错误或解决方法，或者如果有任何信息站点提供有关此问题的信息，我将不胜感激。

在此处输入图像描述

我在加载模型查看器屏幕时遇到问题。这不应该是微不足道的。这是我的 main.dart ，我尝试加载 InfoPage();

按下此图块后应加载

但是每当我 pess 并且它带我到 '/viewer' 时，VS 代码都会弹出 focus_manager.dart 的这一部分

那是信息页：

我已经按照颤振的指示安装了所有的包和依赖项。调试控制台什么也没显示...请帮助我！

这是新的！2021 年 12 月 8 日更新 我收到此错误：

d

我开始在我的 Angular 项目中使用 google 的 ModelViewer 1.9.2 来渲染 3d 模型。目前可能进行表面检测以增强对象。最初我在应用程序资产中使用 3d 模型来增强，效果很好，我能够增强。现在我想从 s3 存储桶中获取文件并将 url 传递给模型查看器。这就是我卡住的地方。公共 URL 和私有签名 URL 都不允许我增加 3d 对象

这是我的 component.html

这是我的 component.ts 文件

当我将签名的 URL 传递给 modelViewer 时，我正在调用一个内置的 s3 服务，该服务将允许我使用凭据访问私有存储桶并返回一个签名的 URL，以便我可以将其传递给模型查看器

我已经为 s3 存储桶（公共和私有）启用了 CORS 策略，这是我应用的 CORS 策略

在这两种情况下，我都能看到模型查看器——模型预览。但“在 AR 中查看”按钮未启用。我没有 CORS 访问问题。我正在使用的设备是支持 Android ARCore 的设备。当我从本地应用程序资产传递相同的文件时，我可以看到“在 AR 中查看”按钮，因此我确信附加到 Angular 应用程序的模型查看器插件没有任何问题。

当我将公共或签名的 url 传递给模型查看器时，问题就出现了。如果我在此过程中遗漏了什么，请建议我。

如何在requirejs中加载这个js文件？

我的 requirejs-config.js 文件=？

并将此文件加载到我的 phtml 文件中

显示此错误 => Uncaught SyntaxError: Unexpected token 'export'

任何人请帮我解决这个问题。

提前致谢