我试图将相机位置移动限制为由3D对象/对象子项定义的特定区域.例如,如果我在海洋上有一个走道对象,我只希望我的用户能够在该走道上向前和向后移动摄像机.类似于Unity中的第一人称控制器导航网格但没有AI方面.
我会喜欢基于AFrame的解决方案,但如果有三个js解决方案,我不介意编写自定义组件.
谢谢!
我在故障上编写了一个演示场景来测试我在a-frame中输出的gltf模型,但是我在控制台中遇到错误:
我的代码
<!DOCTYPE html>
<html>
<head>
<title>Basic Scene - A-Frame</title>
<meta name="description" content="Basic Scene - A-Frame">
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-asset-item id="gltfDemo" src="https://cdn.glitch.com/a3c2afff-dcc6-4918-bb73-5716b35f39b0%2Fexport.gltf?1499844855169"></a-asset-item>
<a-asset-item id="buffer_0.bin" src="https://cdn.glitch.com/a3c2afff-dcc6-4918-bb73-5716b35f39b0%2Fbuffer_0.bin?1499844851189"></a-asset-item>
<a-asset-item id="buffer_1.bin" src="https://cdn.glitch.com/a3c2afff-dcc6-4918-bb73-5716b35f39b0%2Fbuffer_1.bin?1499844853034"></a-asset-item>
</a-assets>
<a-entity gltf-model="#gltfDemo"></a-entity>
<a-sky color="#000"></a-sky>
<a-light type="ambient" color="#445451"></a-light>
<a-plane color="#050" rotation="-90 0 0" height="100" width="100"></a-plane>
<a-camera>
<a-cursor color="#FAFAFA"></a-cursor>
</a-camera>
</a-scene>
</body>
</html>错误:
VM1762:1 Uncaught SyntaxError: Unexpected end of JSON input
at JSON.parse (<anonymous>)
at e.parse (GLTFLoader.js:68)
at GLTFLoader.js:32
at three.js:29160
源文件: Glitch Fiddle包含源文件
我有一种感觉,我错误地将gltf导入故障或以错误的方式使用它.有谁能够帮我？
我正在尝试在Android Chrome上收听点击事件(确切地说,从谷歌纸板中拉出磁铁),但如果设备进入VR模式,这似乎无效.我正在使用三星Galaxy S7进行测试:
JS:
window.addEventListener('click', function (evt) {
console.log("test")
});
在三星内置的Android浏览器中,日志可以在VR模式内外打印.在Android Chrome中,只有在浏览器未处于VR模式时才会显示日志记录.
HTML:
<a-entity camera="userHeight: 1.6" restrict-position look-controls>
<a-entity cursor="fuse: true; fuseTimeout: 500"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat">
</a-entity>
</a-entity>
我正在使用A-Frame ver 0.7.0,但这个问题也可以通过使用本机WebVR API重现.
我认为画布可能正在消耗点击事件,所以我尝试将eventlistener直接添加到Canvas.这也行不通.
这是Chrome中的错误吗？有没有解决方法？我只需要能够听按钮按下.
有没有办法为 A-Frame 中的盒子几何体的每一侧分配不同的纹理，而无需从 6 个独特的平面构建盒子？
<a-box></a-box> <!-- How to apply a cubemap? -->
更具体地说，如何在 A-Frame 中制作立方体贴图？这是three.js中立方体贴图的一个例子：http ://threejs.org/examples/#webgl_materials_cubemap
谢谢！
onclick= function();更新：您可以在 HTML 中使用。
例如：
<a-box onclick="myFunction()"></a-box>
我想用 javascript 从 A 框架元素（例如盒子）获取光标的单击事件，我该怎么做？
所有通过浏览器演示 AR.js AR 功能的示例和代码在网页加载后即可运行。不过，我想为用户提供一个选项，手动启动和停止扫描过程以及隐藏 AR 内容。
基本上，我想仅在用户单击网页上的按钮时加载 a-frame、AR.js 脚本和其他 a-frame html 元素。
请告诉我 AR.js 中是否有任何参数可以传递以表明用户启动相机/扫描/显示我们的内容的意图。
脚本版本：
A-Frame 版本：0.7.1（日期 18-10-2017，提交 #b9a751e）
三个版本：^0.87.0
WebVR Polyfill 版本：^0.9.36
在我的网络应用程序中，想要通过二维码扫描值来实现增强现实。
扫描二维码后，根据二维码值从服务器获取数据，并根据响应显示图像或对象。
我浏览过A-Frame 博客，能够使用 hiro/条形码显示示例对象，但具有静态值。我想通过扫描二维码使其动态。
如何使用 AR.js 和 A-Frame 来实现这一点？
我正在使用aframe-ar，需要将视频流显示在与场景嵌入的同一div中。
我正在尝试使用默认场景：
<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false;'>
<a-marker preset="hiro">
<a-box position='0 0.5 0' material='color: black;'></a-box>
</a-marker>
</a-scene>
渲染的盒子成功嵌入到周围div，但我的网络摄像头的视频流是全屏的，并放置在其他 html 元素后面。
我还尝试明确指定相机，但这没有帮助！
简而言之：我想让视频也嵌入到周围的环境中div。
我怎样才能做到这一点？
当我在 React 中内置的 Aframe 资产管理器中更新新资产时，出现此 notFound 错误。
资产管理器组件的构建如下：
export class Assets extends PureComponent{
render(){
const {
hiResPanoUrl,
onHiResPanoLoaded,
sceneThumbnails = [],
guideThumbnails = [],
videos = [],
sounds = [],
models = [],
panos = [],
images = [],
} = this.props
return (
<a-assets>
{createHighResolutionPanoAsset(hiResPanoUrl, onHiResPanoLoaded)}
{createPanoAssets(panos)}
{createSceneThumbnailsAssets(sceneThumbnails)}
{createGuideThumbnailsAssets(guideThumbnails)}
{createAudioAssets(sounds)}
{createVideoAssets(videos)}
{createModelAssets(models)}
{createImageAssets(images)}
</a-assets>
)
}
健全的资产是这样构建的
function createAudioAssets(sounds) {
return sounds.map(sound => {
const {url, id, preload} = sound
if(!preload)
return <audio key={id} {...{id}} src={url} crossOrigin='anonymous'/>
return <audio …在尝试与 webpack 一起使用时，我遇到了此错误。
我的 webpack 配置是：
const path = require("path");
const webpack = require('webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const nodeFallbacks = require("./nodeFallbacks");
const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const cwd = process.cwd();
const outputPath = path.join(cwd, "build");
module.exports = {
mode: "development",
devtool: "cheap-module-source-map",
context: path.resolve(cwd, "./"),
entry: {
main: "./src/index.js"
},
output: {
path: outputPath,
publicPath: "/",
pathinfo: false,
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".json", ".mjs"],
fallback: {
...nodeFallbacks,
},
},
module: { …aframe ×10
javascript ×4
webvr ×3
ar.js ×2
android ×1
archilogic ×1
dom-events ×1
gltf ×1
reactjs ×1
three.js ×1
webpack ×1