您好我刚开始使用A-Frame.io并且发现该网站非常有用.但是,如果我查看对象,则没有关于如何使链接工作的文档.
https://aframe.io/examples/showcase/cursor/
在上面的例子中,如果使用鼠标中键将光标悬停在立方体上,它会改变形状.
有没有办法在触发该多维数据集时使Web链接正常工作.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cursor</title>
<meta name="description" content="Cursor — A-Frame">
<script src="../../dist/aframe.js"></script>
</head>
<body>
<a-scene>
<a-entity position="0 1.8 4">
<a-camera id="camera">
<a-cursor color="#4CC3D9"></a-cursor>
</a-camera>
</a-entity>
<a-box id="orange-cube" position="0 3.5 -2" rotation="30 30 0" width="2" depth="2" height="2" color="#F16745" roughness="0.8">
<a-event name="mouseenter" scale="3 1 1" color="#FFC65D"></a-event>
<a-event name="mouseenter" target="#shadow" scale="3 2 2"></a-event>
<a-event name="mouseleave" scale="1 1 1" color="#F16745"></a-event>
<a-event name="mouseleave" target="#shadow" scale="2 2 2"></a-event>
</a-box>
<a-image id="shadow" position="0 0 -2" src="../_images/radial-shadow-2.png" opacity="0.5" rotation="-90 0 0" scale="2 …我正在构建一个监视(in tick)其实体位置的组件,当满足某些条件时,它会从场景中删除该实体.我怎样才能删除部分？
例如:
AFRAME.registerComponent('remove-on-tick', {
tick: function () {
if (condition) {
// Remove entity.
}
}
});
onclick= function();更新：您可以在 HTML 中使用。
例如：
<a-box onclick="myFunction()"></a-box>
我想用 javascript 从 A 框架元素（例如盒子）获取光标的单击事件，我该怎么做？
在Aurelia框架应用程序中导入aframe a-scene作为模板时,我目前面临一个问题.
我试图在相关的stackoverflow问题上找到帮助,但没有一个将点连接在一起:因为AFrame基于Three.js,这是我能找到的最相似的问题,但它没有被回答(https://github.com /mrdoob/three.js/issues/3091).
我在我的home.html文件中集成了AFrame场景,如下所示:
<template>
<a-scene>
<a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
<a-sky color="#000000"></a-sky>
<a-entity position="0 0 3.8">
<a-camera></a-camera>
</a-entity>
</a-scene>
</template>
从我的home.js导入aframe,否则场景不呈现:
import 'aframe';
现在似乎这个导入覆盖了一些引导滚动功能,但我无法理解为什么.
注意:Google Material design lite和aurelia材质插件(https://github.com/genadis/aurelia-mdl)也发生了一些意想不到的行为,在这种情况下,AFrame场景被缩放,但页面滚动仍然有效.
这里是完整代码的github项目:https://github.com/dnhyde/aframe-aurelia.git
所有通过浏览器演示 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 …我想显示一个预加载屏幕，直到所有资产加载和渲染。
我尝试使用Assets事件加载，但无法正常工作。当我们增强3D模型，图像和视频时，这些资产将近50-60mb。因此，加载资产和扩充需要时间。如果网络很慢，当我们增加视频4-8秒时，黑屏就会出现并播放（在检查“网络”选项卡中，选择“我们测试3G慢”）。请用小故障编辑我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript" src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.2/aframe/build/aframe-ar.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v6.0.0/dist/aframe-extras.min.js"></script>
<script src="https://unpkg.com/aframe-animation-component@5.1.2/dist/aframe-animation-component.min.js"></script>
<script>
AFRAME.registerComponent("vidhandler", {
init: function () {
// Set up initial state and variables.
this.toggle = false;
this.vid = document.querySelector("#vid");
this.vid.pause();
console.log('************* Vid Paused');
},
tick: function () {
if (this.el.object3D.visible == true) {
if (!this.toggle) {
this.toggle = true;
this.vid.play();
console.log('************* Vid Play');
}
} else {
this.toggle = false;
this.vid.pause();
//console.log('************* …在尝试与 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 ×6
ar.js ×3
aurelia ×1
dom-events ×1
html ×1
jsartoolkit ×1
reactjs ×1
webpack ×1
webvr ×1