aframe - GLTF 不使用 ar.js 显示
问题描述
我目前正在测试 AR.js 以使用手机在增强现实中显示 3D 模型。我的网络编码技能非常新手,所以我正在整理不同的教程来获得我想要的东西。我相信我刚刚确定了正确显示 gltf 文件所需的内容,但似乎存在一些小问题,因为模型不会显示(我已经确认它是使用 gltf 查看器的有效文件)。该代码也可以很好地显示一个简单的 a-box,但是一旦我将其注释掉并添加 gltf 模型的行,它就会掉下来。
非常感激任何的帮助!
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/2.2.1/aframe/build/aframe-ar.js"></script>
</head>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: true;'>
<a-marker preset="hiro">
<!--<a-box position='0 0.5 0' material='color: yellow;'></a-box>-->
<a-entity gltf-model="url(https://tests.offtopicproductions.com/ywca.gltf)"></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
解决方案
您可以浏览新的AR.js 文档,其中有一个带有 gltf 模型的示例以及在线实时版本。在您提供的示例中,您应该进行此更改
由此:
<a-entity
gltf-model="url(https://tests.offtopicproductions.com/ywca.gltf)"></a-entity>
至:
<a-entity gltf-model="https://arjs-cors-proxy.herokuapp.com/https://tests.offtopicproductions.com/ywca.gltf"></a-entity>
您应该添加:
https://arjs-cors-proxy.herokuapp.com/
如果资源不在同一主机中,以避免 CORS 问题。AR.js 位于一个新的 github org https://github.com/AR-js-org下,所有资源(库和文档)现在都在这里。
推荐阅读
- c++ - 线程安全堆栈 C++ 中的潜在死锁
- javascript - TypeScript 中的以下条件有什么区别?
- node.js - 使用 JOI 库验证电子邮件
- mysql - 从 MySQL 表中选择达到或超过指定时间的所有记录
- javascript - 如何防止使用 window.location 以角度不断刷新页面
- javascript - 在 WebGL 中的两个着色器之间使用相同的统一变量
- gnuplot - 我的脚本 gnuplot 4.6 上的开始日期和结束日期有问题
- javascript - React 路由器/挂钩的问题
- javascript - 为 IE 添加样式相对位置,为其他浏览器添加绝对位置
- reactjs - 数量更改后小计未更新