I want in an aframe game continuous moving to the viewport of the camera. I used the code from here:
In my desktop browser (not vr mode) it works pretty well, but when I am switching to the vr-mode the moving doesn't work...
Here is an exampe of what i have:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>360° Image Browser</title>
<script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-extras.ocean#3.13.1/dist/aframe-extras.ocean.min.js"></script>
</head>
<body>
<a-scene>
<!-- sky + ocean -->
<a-sky radius="100" src="http://2.bp.blogspot.com/-ELqPrSgPbGU/Vcnw54n7Q1I/AAAAAAAAGdk/rcfkvjlMNqI/s1600/PANO_360Test09.jpg"
position="0 -6 0 "></a-sky>
<a-ocean width="200" depth="200" density="200" position="0 0 0"></a-ocean>
<!-- camera + cursor. -->
<a-camera id="camera" position="0 20 80" fly wasd-controls-enabled="false" look>
<a-cursor id="cursor" color="black"></a-cursor>
</a-camera>
</a-scene>
<script>
// document.querySelector("a-scene").enterVR();
AFRAME.registerComponent("fly", {
schema: {
stepFactor: { type: "number", default: 0.1 },
isFlying: { type: "boolean", default: true }
},
tick: function () {
if (this.data.isFlying) {
this.el.components.camera.camera.parent.position.add(
this.el.components.camera.camera
.getWorldDirection()
.multiplyScalar(this.data.stepFactor)
);
}
}
});
</script>
</body>
</html>
you can turn on the vr mode in the script by removing the commit
Anyone an idea?
I'm not entirely sure what happens when you switch to VR mode (in regards to the camera element), but trying setAttribute seems to make it work:
https://glitch.com/edit/#!/a-frame-move-camera
tick: function () {
if (this.data.isFlying) {
let newP = this.el.components.camera.camera.parent.position.add(this.el.components.camera.camera.getWorldDirection().multiplyScalar(this.data.stepFactor));
this.el.setAttribute('position', newP)
}
}
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/tizzle/aframe-orbit-controls-component/v0.1.14/dist/aframe-orbit-controls-component.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id='earthcontainer' style='position:relative; display:flex; width: 100%; justify-content:center ;'>
<a-scene device-orientation-permission-ui='enabled: false' embedded='true' foo loading-screen='enabled:false' renderer='antialias: true; colorManagement: true; sortObjects: true; physicallyCorrectLights: true; maxCanvasWidth: 1920; maxCanvasHeight: 1920;'
style='position:absolute; height: 400px; width: 400px; margin: 0 auto;' vr-mode-ui='enabled: false'>
<a-assets>
<a-asset-item id='earth' src='https://raw.githubusercontent.com/yashrajbharti/kml-images/main/sceneearth/scene.gltf' />
<a-asset-item id='hologram' src='https://raw.githubusercontent.com/yashrajbharti/kml-images/main/scene/scene.gltf' />
</a-assets>
<a-entity camera='fov: 80; zoom: 1;' id='camera' mouse-cursor='' orbit-controls=' enableZoom: false; autoRotate: true; target: #target; enableDamping: true; dampingFactor: 0.125; rotateSpeed:0.25; minDistance:3; maxDistance:100; '
position='0 0 0'>
</a-entity>
<a-entity animation-mixer='loop: repeat' cursor='fuse: true; fuseTimeout: 500' gltf-model='#earth' id='target' position='0 0 -27.6' scale='0.4 0.4 0.4' the-target='true' />
<!-- <a-entity animation-mixer='loop: repeat' gltf-model='#hologram' id='target' position='0 0 -7.6' scale='2.4 2.4 2.4'/>-->
</a-scene>
</div>
<button class="cybr-btn">
Buttons<span aria-hidden>_</span>
<span aria-hidden class="cybr-btn__glitch">Buttons_</span>
</button>
<script>
AFRAME.registerComponent('foo', {
init: function() {
const modelList = ['earth', 'hologram']
const scaleList = ['0.4 0.4 0.4', '2.4 2.4 2.4']
const positionList = ['0 0 -27.6', '0 0 -7.6']
const model = document.getElementById("target")
const changeButton = document.querySelector(".cybr-btn")
let idx = 1 // Start with the 2nd model as 1st is already in the scene on page load
const changeModel = () => {
model.removeAttribute("gltf-model")
// Switch to next model in the list
model.setAttribute("gltf-model", `#${modelList[idx]}`)
// Change Position and Scale
model.setAttribute('position', `${positionList[idx]}`)
model.setAttribute('scale', `${scaleList[idx]}`)
idx = (idx + 1) % modelList.length
}
changeButton.onclick = changeModel
}
})
</script>
</body>
</html>
Using this solution I am able to change models in Aframe with the click of a button. Problem comes when I want to change the scale and position parameters as well.
The code to reproduce the error is added below. It results in an unexpected way of scaling and position of the glTF models.
I think I understand why this problem arise. It's because it is scaling and positioning the a-entity whichever is available, before or after the glTF parameter gets modified. Only thing is how to I solve this. I was also trying the .then{value=>} promise but it didn't help the case.
I'm trying to create a entity in my Aframe's scene that once clicked bring me in another of my random pages.
I'm a newbie, so my code is a patchwork that sometimes works and other times doesn't. I used this addon (https://github.com/silverslade/aframe_blender_exporter) to translate my 3d Blender scene in an "Aframe" page. It worked very well and this is my result with added javascript lines
<head>
<title>WebXR Application</title>
<link rel="icon" type="image/png" href="index/favicon.ico"/>
<meta name="description" content="3D Application">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras#v6.1.0/dist/aframe-extras.min.js"></script>
<script type="text/javascript" src="index/js/webxr.js"></script>
<script type="text/javascript" src="index/js/joystick.js"></script>
<script type="text/javascript" src="index/js/camera-cube-env.js"></script>
<script>
AFRAME.registerComponent('navigate-on-click', {
schema: {
url: {default: ''}
},
init: function () {
var data = this.data;
var el = this.el;
el.addEventListener('click', function () {
window.location.href = data.url;
});
}
});
</script>
<script>
var urls = [
"http://www.findyourface.it/AuroraReinhard/AuroraReinhard.html",
'http://www.findyourface.it//NikideSaintPhalle/NikideSaintPhalle.html',
'http://www.findyourface.it/AmeliaEarthart/AmeliaEarthart.html'
];
function goSomewhere() {
var url = urls[Math.floor(Math.random()*urls.length)];
window.location = url; // redirect
}
</script>
<link rel="stylesheet" type="text/css" href="index/style.css">
</head>
<body onload="init();">
<a-scene shadow="type: basic; autoUpdate: false;">
<!-- Assets -->
<a-assets>
<a-asset-item id="Plane" src="./index/assets/Plane.gltf"></a-asset-item>
<a-asset-item id="segnalefreccia" src="./index/assets/segnalefreccia.gltf"></a-asset-item>
<img id="sky" src="./index/resources/sky.jpg">
<img id="icon-play" src="./index/resources/play.png">
<img id="icon-pause" src="./index/resources/pause.psng">
<img id="icon-play-skip-back" src="./index/resources/play-skip-back.png">
<img id="icon-mute" src="./index/resources/mute.png">
<img id="icon-volume-low" src="./index/resources/volume-low.png">
<img id="icon-volume-high" src="./index/resources/volume-high.png">
</a-assets>
<!-- Entities -->
<a-entity id="#Plane" gltf-model="#Plane" scale="1 1 1" position="0.0 0.0 -0.0" visible="true" shadow="cast: false" ></a-entity>
<a-entity animation-mixer id="#segnalefreccia" gltf-model="#segnalefreccia" scale="0.25 0.25 0.25" position="0.0 0.0 -10.0" visible="true" shadow="cast: false" onClick="goSomewhere(); return false;" ></a-entity>
<!-- Camera -->
<a-entity id="player"
position="0 -0.2 0"
movement-controls="speed: 0.10000000149011612;">
<a-entity id="camera"
camera="near: 0.001"
position="0 1.7000000476837158 0"
look-controls="pointerLockEnabled: true">
<a-entity id="cursor" cursor="fuse: false;" animation__click="property: scale; startEvents: click; easing: easeInCubic; dur: 50; from: 0.1 0.1 0.1; to: 1 1 1"
position="0 0 -0.1"
geometry="primitive: circle; radius: 0.001;"
material="color: #CCC; shader: flat;"
>
</a-entity>
</a-entity>
<a-entity id="leftHand" oculus-touch-controls="hand: left" vive-controls="hand: left"></a-entity>
<a-entity id="rightHand" laser-controls oculus-touch-controls="hand: right" vive-controls="hand: right" ></a-entity>
</a-entity>
<!-- Lights -->
<a-entity light="intensity: 10; shadowBias: -0.001; shadowCameraFar: 501.02; shadowCameraBottom: 12; shadowCameraFov: 101.79; shadowCameraNear: 0; shadowCameraTop: -5; shadowCameraRight: 10; shadowCameraLeft: -10; shadowRadius: 2; angle: 180; decay: 1.3; type: spot; distance: 4.41; penumbra: 0.01" position="0 3.53829 -9.8453"></a-entity>
<!-- Sky -->
<a-sky color="#000000"></a-sky>
</a-scene>
</body>
The first time you open the scene you have to click on it a lot of times but it eventually works, but in the following pages it stops working altogether. I think it’s because this is a Frankenstein monster of a code, but I didn't find a better way to make it.
Thank you for helping!
I am just starting with Ar.js. I have a problem where the objects appearing on screen have lost their shapes a bit. First I have this simple A-Frame example which shows a sphere which is perfectly round:
<!DOCTYPE>
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere>
</a-scene>
</body>
</html>
But when I use this following code of Ar.js, the same sphere looks like a oval now:
<!doctype html>
<html>
<head>
<link rel="canonical" href="https://inspiredlabs.github.io/ar.js/markerless.html" />
<!-- location based aframe v0.9.2 -->
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script><!-- debug -->
<script>
const log = console.log;
window.onload = () => {
let scene = document.querySelector('a-scene'); /* Apply to whole scene */
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
let gps = document.createAttribute('gps-entity-place'),
arjs = document.createAttribute('arjs'),
arjs.value = 'sourceType: webcam; sourceWidth: 640; sourceHeight: 480; trackingMethod: best; debugUIEnabled: false;';
gps.value = `latitude: ${position.coords.latitude}; longitude: ${position.coords.longitude}`;
log(gps.value);
scene.setAttributeNode(gps); /* Apply to whole scene */
scene.setAttributeNode(arjs);
});
}
};
</script>
</head>
<a-scene device-orientation-permission-ui="enabled: true" vr-mode-ui="enabled: false">
<a-entity id="wrapper" position="0 -4 -5 " look-at="[camera]">
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
</a-entity><!-- /wrapper -->
<a-camera camera="fov: 60;" gps-camera rotation-reader></a-camera>
</a-scene>
</body>
</html>
I am having trouble figuring it out. Can anyone help me out here please?
Your sphere is perfectly fine. Shapes get distorted when they're close to the screen edges due to the perspective of the camera but that's absolutely normal. If you retry your first example, get further from the sphere and move it somewhere in a corner you'll see the same distortion you see in the second example. It will seem more natural with a background sky cause the whole view will get distorted in the corners. Nothing to worry about anyway!
I Want To Show A Preloading Screen Till All Assets Loads And Renders.
I Tried Using Assets Event loaded but its not working . When We Augment 3d Model , Image and video , So These Assets Are Almost 50-60mb . So it takes time to load the assets and augment . The video when we augment for 4-8 seconds the black screen comes and plays,if the network is slow (In inspect Network Tab Select 3G Slow We Test).
Please Edit My Code in Glitch
<!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('************* Vid Paused');
}
}
});
</script>
</head>
<body>
<a-scene vr-mode-ui="enabled: false" artoolkit='sourceType: webcam; detectionMode: mono; maxDetectionRate: 90;' arjs='debugUIEnabled: false;detectionMode: mono_and_matrix; matrixCodeType: 3x3;'>
<!-- ALL ASSETS -->
<a-assets>
<!-- 3D MODEL -->
<a-entity id="model" src="https://cdn.glitch.com/c3106e6c-98cb-40e4-b0c1-85257680d25a%2Fygark.glb?v=1564472468760" crossorigin="anonymous" rotation="-90 0 -90">
</a-entity>
<!-- VIDEO -->
<video preload="auto" id="vid" response-type="arraybuffer" loop="false" crossorigin webkit-playsinline playsinline controls>
<source src="https://cdn.glitch.com/c3106e6c-98cb-40e4-b0c1-85257680d25a%2Fvid.mp4?v=1564472320471" type="video/mp4">
</video>
<!-- IMAGE -->
<img id="img" src="https://cdn.glitch.com/c3106e6c-98cb-40e4-b0c1-85257680d25a%2Fsun.png?v=1564472507237">
</a-assets>
<!-- ALL ASSETS -->
<a-marker type="pattern" preset="hiro" vidhandler>
<a-entity position="0 0 0">
<a-video width="2" height="2" rotation="-90 0 0" material='transparent:true;shader:flat;side:double;src:#vid'></a-video>
</a-entity>
<a-image width="2" height="2" material='transparent:true;shader:flat;side:double;src:#img' position="2 0 0" rotation="-90 0 0"></a-image>
<a-entity position="-1.5 0 0" gltf-model="#model" material='transparent:true;shader:flat;side:double;metelness:2' rotation="0 0 0" scale="0.5 0.5 0.5" shadow="receive: false" >
</a-entity>
</a-marker>
<a-entity camera>
<a-entity cursor="rayOrigin: mouse;fuse: false;"></a-entity>
</a-entity>
</a-scene>
</body>
</html>
Asset loaded event is not working . Please Edit My Code in Glitch
Thanks In Advance
There are a couple different options.
Aframe has a built in loading screen that is enabled within the <a-scene> declaration
<a-scene loading-screen="dotsColor: red; backgroundColor: black"></a-scene>
Another option is to follow the steps in the response from Noam Almosnino
Use a component like, Aframe Preloader
Note: I am not associated with this component and have not tested it. Please see the demo page for some examples
Update
Based on your comment (below) I would recommend #2 (above)
create a listener for the scene's loaded event
document.addEventListener('DOMContentLoaded', function() {
var scene = document.querySelector('a-scene');
scene.addEventListener('loaded', function (e) {
// hide splash screen
});
});
When We Load A Big 3D Model Or Big A Video, It Takes Time To Load The Assets(Resources) And Render The Resources,So I Want To Show A Loading Screen Or Loading Gif File or a Loading A-Box - Till The Whole Assets Loading And Rendering Is Done,On The Screen Or On The Pattern.Please Go Through My GLITCH , Its Working But It Will Take 10-15 Sec to load and render.
I tried To Add Asset Loading Manager But It didn't Worked . I Tried All The Ways But It Didn't Worked
<!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>
</head>
<body>
<a-scene vr-mode-ui="enabled: false" artoolkit='sourceType: webcam; detectionMode: mono; maxDetectionRate: 90;' arjs='debugUIEnabled: false;detectionMode: mono_and_matrix; matrixCodeType: 3x3;'>
<a-assets>
<a-entity src="https://cdn.glitch.com/a5ca03d3-3024-44dc-9256-0b75c4247613%2Fscene.gltf?v=1563255364433" id="model"></a-entity>
</a-assets>
<a-marker preset="hiro">
<a-entity gltf-model="#model" material='transparent:true;shader:flat;side:double;metelness:2' scale="0.04 0.04 0.04" ></a-entity>
</a-marker>
<a-entity camera></a-entity>
<a-entity shadow="cast: true"></a-entity>
</a-scene>
<script>
// Workaround for an AR.js bug (https://github.com/jeromeetienne/AR.js/issues/410)
const sceneEl = document.querySelector('a-scene');
sceneEl.addEventListener('loaded', () => {
sceneEl.camera = new THREE.PerspectiveCamera();
scene.add( camera );
});
</script>
</body>
</html>
After Showing The HIRO Pattern Its Takes 10-15 Seconds (Depending Upon The Internet Speed) To Load And Render . I Want To Show Some Preloader Or Loading Screen Or Some Gif Loading Image To Display Till The Object (Assets) Loads Completely And Render And Disappear Once The Rendering And Loading Is Done......
Thanks In Advance
For models, you can use the model-loaded event:
<a-marker preset="hiro">
<a-entity id='loadingEl'></a-entity>
<a-entity gltf-model="#model"></a-entity>
</a-marker>
The #loadingEl could have a primitive box with a "loading" image, and when the model is loaded, you remove (the entity or its visibility):
AFRAME.registerComponent('foo', {
init: function() {
this.el.addEventListener('model-loaded', e => {
document.querySelector("#loadingEl").remove()
})
}
})
Glitch here.
The <a-assets> system have a loaded event emitted, you could use it for videos as well.
This is a fix for Aryan's glitch, use the Hiro marker and your 3d model - Glitch
<!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('loader', {
init: function() {
let loader = document.querySelector("#loadingEl")
this.el.addEventListener('model-loaded', e => {
console.log('loaded')
loader.setAttribute("visible", "false")
})
}
})
</script>
</head>
<body>
<a-scene vr-mode-ui="enabled: false" artoolkit='sourceType: webcam; detectionMode: mono; maxDetectionRate: 90;' arjs='debugUIEnabled: false;detectionMode: mono_and_matrix; matrixCodeType: 3x3;'>
<a-assets>
<a-entity src="https://cdn.glitch.com/a5ca03d3-3024-44dc-9256-0b75c4247613%2Fscene.gltf" id="model"></a-entity>
</a-assets>
<a-marker preset="hiro">
<a-box id="loadingEl"></a-box>
<a-entity gltf-model="#model" material='transparent:true;shader:flat;side:double;metelness:2' scale="0.04 0.04 0.04" loader></a-entity>
</a-marker>
<a-entity camera></a-entity>
<a-entity shadow="cast: true"></a-entity>
</a-scene>
<script>
// Workaround for an AR.js bug (https://github.com/jeromeetienne/AR.js/issues/410)
const sceneEl = document.querySelector('a-scene');
sceneEl.addEventListener('loaded', () => {
sceneEl.camera = new THREE.PerspectiveCamera();
scene.add( camera );
});
</script>
</body>
</html>