I am using aframe to create an experience for Oculus Go. I have a simple "world" and I am able to move around it using the Oculus Go controller. However, I don't seem to be able to set the initial camera position or reset the camera location at any point. The initial problem means that my viewpoint is always close to the ground.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pailou Gate</title>
<meta name="description" content="Pailou Gate">
<script src="../aframe/dist/aframe-master.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v4.1.2/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene background="color: #9cf" antialias="true">
<a-assets>
<a-asset-item id="pl" src="pl.dae"></a-asset-item>
</a-assets>
<a-entity wasd-controls mouse-controls look-controls movement-controls="fly: false" position="0 0 0">
<a-entity camera position="0 4 0"></a-entity>
<a-entity oculus-go-controls></a-entity>
<a-entity laser-controls="hand: right"></a-entity>
</a-entity>
<a-light position="0 0.5 1" intensity="0.8"></a-light>
<a-light type="point" position="20 30 -40" intensity="0.9" light="castShadow: true;"></a-light>
<a-collada-model src="#pl" position="0 0.4 0" rotation="0 0 0" scale="1 1 1" shadow="cast: true; receive: false"></a-collada-model>
<a-circle rotation="-90 0 0" radius="40" color="#393" position="0 -0.1 0" shadow="receive: true" roughness="1"></a-circle>
<a-torus radius="40" arc="360" color="#6c6" rotation="-90 0 0"></a-torus>
</a-scene>
</body>
</html>
I think the relevant bit is the entity surrounding the camera and the camera itself. Notice that I do set the camera high, but this seems to be ignored.
Any thoughts?
Sean
Set the position and movement controls on the camera rig (parent entity of the camera) and look-controls on the camera:
<a-entity wasd-controls position="0 4 0">
<a-entity camera look-controls></a-entity>
</a-entity>
Related
Below is the code I use:
I use glb file and it should start animation from the beginning when marker is activated, but It start from the middle of the animation.
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<a-scene vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
embedded arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false;">
<a-assets>
<a-asset-item id="dja" src="./arfile2.glb"></a-asset-item>
</a-assets>
<a-nft type='nft' url='./demo/marker/djarum'
smooth='true' smoothCount='10' smoothTolerance='0.01' smoothThreshold='5'>
<a-entity gltf-model='#dja'
scale="90 90 90"
position="100 -200 0"
rotation="-90 0 0"
animation-mixer >
</a-entity>
</a-nft>
<a-entity camera>
</a-entity>
</a-scene>
<!--<a-scene>
<a-assets>
<a-asset-item id="tree" src="./tesla/scene.gltf"></a-asset-item>
</a-assets>
<a-entity gltf-model="#tree" scale="0.6 0.6 0.6" position="0 0.15 -3"></a-entity>
</a-scene>-->
The animation-mixer starts the animation when the model is loaded, not when it's visible.
You can wait until the image is detected, and then attach the animation-mixer:
const model = document.querySelector("[gltf]")
const nft = document.querySelector("a-nft");
nft.addEventListener("markerFound", () => {
model.setAttribute("animation-mixer", "")
})
I am working on a scene with multiple cameras set at distinct predefined positions and rotations. I noticed when I look around using the mouse (or in VR mode), the camera rotation is linked between cameras. So I thought this could be avoided by using the attribute active: false but both cameras still rotate together. Below is an example scene where both cameras are at the same position and feature an <a-box> in their field of view, notice that when you look around the scene box cubes (children of two separate cameras) move in unison. Is there a way to prevent the inactive camera from following the rotation of the active camera so that the blue cube (with the inactive camera) would stay stationary?
Also, there are no console errors related to A-Frame in this script. Your assistance is greatly appreciated, many thanks in advance for your time.
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-camera active="true" look-controls>
<a-box color="red" position="-2 0 -10"></a-box>
</a-camera>
<a-camera active="false" look-controls>
<a-box color="blue" position="2 0 -10"></a-box>
</a-camera>
<a-plane color="gray" rotation="-90 0 0" width="20" height="20"></a-plane>
</a-scene>
</body>
</html>
A viable solution for this is to enable and disable the look-controls on the cameras when switching between them. This can be done in JavaScript with : newCameraElement.setAttribute('look-controls', 'enabled', true); and oldCameraElement.setAttribute('look-controls', 'enabled', false); Here's a revised version of the question's example that initially disables the other camera's look-controls to provide the desired behaviour of having distinct cameras:
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-camera active="true" look-controls>
<a-box color="red" position="-2 0 -10"></a-box>
</a-camera>
<a-camera active="false" look-controls="enabled: false">
<a-box color="blue" position="2 0 -10"></a-box>
</a-camera>
<a-plane color="gray" rotation="-90 0 0" width="20" height="20"></a-plane>
</a-scene>
</body>
</html>
I am getting this error using A-frame VR v0.9.2 "Uncaught DOMException: Failed to execute 'setAttribute' on Element: 0 is not a valid attribute name." when trying to set an invisible entity as visible using Kevin Ngo's aabb-collider component.
<!DOCTYPE html>
<html>
<head>
<script src=".../aframe-v0.9.2.min.js"></script>
<script src=".../aframe-extras.min.js"></script>
<script src=".../aframe-event-set-component.js"></script>
<script src="...aframe-aabb-collider-component.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-asset-item
id="modelo"
response-type="arraybuffer"
src=".../model.glb">
</a-asset-item>
</a-assets>
<a-entity
id="3Dmodelo"
gltf-model="#modelo"
scale="1 1 1"
position="-16.7 0 -7.8"
visible="false">
</a-entity>
<a-entity
id="rig"
position="-5.481 -0.15 13"
rotation="0 0 0"
movement-controls="speed: 0.08"
aabb-collider="objects: a-box">
<a-entity
camera
geometry="primitive: box"
position="0 1.6 0"
look-controls="pointerLockEnabled: false">
</a-entity>
</a-entity>
<a-box id="testeColisao" color="red" position="-5 1 10" event-set__hitstart="modeloVisivel()"></a-box>
</a-scene>
<script type="text/javascript">
function modeloVisivel(){
document.getElementById('3Dmodelo').setAttribute('visible','true')
}
</script>
</body>
</html>
Can anyone help me please as i am struggling with the resolution of this issue. If anyone knows a better aproach for the intended please share.
Thank you.
change event-set__hitstart attribute to
event-set__hitstart="_target: #blackSofa; visible: false"
Here is event-set component's documentation https://github.com/supermedium/superframe/tree/master/components/event-set
According to it you can't set function names
I Am unable to retrieve the text from the textarea as I just want to scale a box by typing the x-factor as the input. But the input is not being retrieved for some reason. Please help!...here is the code:
<html>
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-textarea-component/dist/aframe-textarea-component.min.js"></script>
</head>
<body>
<a-scene>
<a-sky color="#6EBAA7"></a-sky>
<a-box id="redbox" position="3 2.5 -2" color="red"></a-box>
<a-entity position="0 1 -2" id="inputText" textarea="backgroundColor:white; color:black; cols:5; rows:1;value:2;"></a-entity>
<a-input postion="0 2 -2"></a-input>
<a-text id="outputText" position="0 2 -2" value="Hello"></a-text>
<a-camera position="0 1 1">
<a-cursor color="yellow"></a-cursor>
</a-camera>
<a-entity id="select-button" geometry="primitive: box" material="color:red" position="0 0 -2"></a>
</a-scene>
<script>
var box = document.querySelector('#redbox')
var printText = document.querySelector('#inputText');
document.querySelector('#select-button').addEventListener('click',function(){
box.setAttribute("scale",
{
x : parseInt(printText.getAttribute('textarea').value),
y : 1.5,
z : 1.5
}
);
});
</script>
</body>
</html>
Edit: I tried changing the code in javascript as follows:
parseInt(printText.getAttribute('textarea').text
It still does not work!!
The textarea component does not expose the value directly but you can do:
document.querySelector('#inputText').components.textarea.textarea.value
The latest version (0.3.0) of aframe-textarea-component now includes a getText() method which you can use to get the current text.
document.querySelector('#inputText').components.textarea.getText();
I am loading an Aframe object in the wavefront format, but the texture remains invisible, that means the object appears all black:
<!doctype html>
<head>
<meta charset="utf-8">
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-asset-item id="test-obj" src="test.obj"></a-asset-item>
<a-asset-item id="test-mtl" src="test.mtl"></a-asset-item>
</a-assets>
<a-entity position="1.75 0 1.2" rotation="0 28 0">
<a-camera near="0.1" user-height="0"></a-camera>
</a-entity>
<a-obj-model src="#test-obj" mtl="#test-mtl" scale="0.1 0.1 0.1"></a-obj-model>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
How can I make the texture of this model visible?
Here's a solution that may work if the object was created in Magica Voxel or a similar editor.
Open your .mtl file in a text editor, look for the line that starts with map_Kd. Just after it is the name of another file such as "test.png".
That file must also be in the same directory as your .mtl and .obj files, so make sure you include it. It's the texture map that maps colors to locations on the object.
More information about the Wavefront .mtl file format can be found here:
https://people.cs.clemson.edu/~dhouse/courses/405/docs/brief-mtl-file-format.html