why does this text show up in the middle of the box? I thought that baseline: top would align it to the top of the containing entity.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
</head>
<body>
<a-scene background="color: #FAFAFA">
<a-entity
position="0 2 -3"
geometry="primitive: plane; width: 3; height: 3;"
material="shader: flat; color: red;"
>
<a-entity
position="0 0 0.01"
text="color: black; baseline: top; value: test;"
></a-entity>
</a-entity>
</a-scene>
</body>
</html>
The baseline basically tells the text component whether the Y position refers to the bottom, center, or top of the text itself (i.e. the word "test"), not the parent entity. You would still have to change the text position to move it to the top (in your case set the Y position to 1.5, half the height of the plane). By setting baseline: top you ensure that multi-line text flows downward onto the plane rather than spilling upwards.
You can see the different properties illustrated in this example from the text component documentation and its corresponding code.
Related
I am trying to achieve 2 things
Make the ball bounce from surface
Make camera entity a dynamic body so that when i collide with the OBJ i have imported(mapped as static body) , the camera dosent go through.
As of now, the ball just floats in the air and camera moves through the OBJ model.What am i doing wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- aframe script should be in header and must be before a-scene -->
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/n5ro/aframe-physics-system#v$npm_package_version/dist/aframe-physics-system.min.js"></script>
<meta charset="UTF-8" />
</head>
<body>
<a-scene physics="gravity: -9.8" >
<a-assets>
<img id="textura_pelota" src="https://cdn.glitch.global/7f903c5a-5f2e-4d05-97ea-3af04fbd3e17/pexels-iva-mu%C5%A1ki%C4%87-691710.jpg?v=1657687184405" crossorigin="anonymous"/>
<a-asset-item id="tower-obj" src="https://cdn.glitch.global/8f34032d-6c24-4dec-a227-deea5b507000/building_04.obj?v=1657693862238"></a-asset-item>
<a-asset-item id="tower-mtl" src="https://cdn.glitch.global/8f34032d-6c24-4dec-a227-deea5b507000/building_04.mtl?v=1657694451566"></a-asset-item>
<img id="sky-b" src="https://cdn.glitch.global/8f34032d-6c24-4dec-a227-deea5b507000/sunny.jpg?v=1657695761868" crossorigin="anonymous"/>
</a-assets>
<a-plane
src="#textura_pelota"
position="0 0.01 0"
rotation="-90 0 0"
height="100"
width="100"
repeat="200 200"
roughness="0.8"
static-body
></a-plane>
<a-sphere color ="black" radius="0.5" position = "40 3 40" dynamic-body>
</a-sphere>
<a-obj-model src="#tower-obj" mtl="#tower-mtl" scale ="7 7 7" material="wireframe:true" static-body></a-obj-model>
<a-entity camera look-controls wasd-controls position="40 1.6 40" dynamic-body>
<a-entity geometry="primitive: plane; height: 0.2; width: 0.2"
material="color: gray; opacity: 0.5" ></a-entity>
</a-entity>
<a-sky src="#sky-b" radius = "100" position ="0 0 0"></a-sky>
</a-scene>
</body>
</html>
<script src="https://cdn.jsdelivr.net/gh/n5ro/aframe-physics-system#v$npm_package_version/dist/aframe-physics-system.min.js"></script>
<meta charset="UTF-8" />
yeah that script is failing to fetch from github. you're better off downloading the file directly in the source files and saving it in your directory etc.
https://github.com/n5ro/aframe-physics-system/tree/master/dist
Minified:
https://github.com/n5ro/aframe-physics-system/blob/master/dist/aframe-physics-system.min.js
all my tries on different ides did not work. instead, they fro-...........ze
here's my code.
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
<style>
</style>
</head>
<body>
<a-scene>
<a-entity>
<a-sphere
position="6 1 5"
depth="6"
height="556"
width="5"
animation="
property: roatate;
from: 5 0 0;
to: 0 360 0;
dur: 2000;
easing: nonlinear;
loop: true"
color="blue">
</a-sphere>
</a-entity>
</a-scene>
</body>
</html>
here's the collaboration link
if you find anything i will be there.
There are few issues with your code:
mainly the typo roatate instead of rotation
animation="property: roatate;...
the <a-sphere> does not have attributes like depth, height, and width. Only radius. You can probably use scale for changing its shape.
there is no nonlinear type of easing. For the full list of available easing refer to this documentation page
easing: nonlinear;
Find the working example below
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
<style>
</style>
</head>
<body>
<a-scene>
<a-entity>
<a-sphere
scale="1 2 3"
position="6 1 5"
animation="
property: rotation;
from: 5 0 0;
to: 0 360 0;
dur: 2000;
easing: linear;
loop: true"
color="blue">
</a-sphere>
</a-entity>
</a-scene>
</body>
</html>
I finally have given up as I can't get AR.JS to run with a simple NFT marker that should display a Video or a PNG image over it. If I run it with a GLTF Model it works without problems. I tried changing the scale and position to see if it is somehow behind the marker etc. but that doesn't help in any way.
The console doesn't throw me any errors as well.
Could anybody throw me a short fix as I tried a lot of different stuff but nothing gets displayed.
Link to page with marker https://natrium83.github.io
Link to 3D example https://natrium83.github.io/ar3d/
Link to Picture example https://natrium83.github.io/arbild/
Link to Video example https://natrium83.github.io/arvideo/
Here is the code for the image:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Image based tracking AR.js demo</title>
<!-- import aframe and then ar.js with image tracking / location based features -->
<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>
<!-- style for the loader -->
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
</head>
<body style="margin : 0px; overflow: hidden;">
<!-- minimal loader shown until image descriptors are loaded. Loading may take a while according to the device computational power -->
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<!-- a-frame scene -->
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;">
<!-- a-nft is the anchor that defines an Image Tracking entity -->
<!-- on 'url' use the path to the Image Descriptors created before. -->
<!-- the path should end with the name without the extension e.g. if file is trex.fset' the path should end with trex -->
<a-nft
type="nft"
url="https://natrium83.github.io/ar3d/assets/marker_image"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5">
<!-- as a child of the a-nft entity, you can define the content to show. here's a GLTF model entity -->
<a-entity>
<a-image src="https://natrium83.github.io/arbild/assets/bild.png"
scale="5 5 5"
position="100 100 0"
crossorigin
></a-image>
</a-entity>
</a-nft>
<!-- static camera that moves according to the device movemenents -->
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
'''
The problem might be the size of the media. Despite the documentation saying '1' = 1 meter, I had to set the size to height='160' width='120' to get mine working. Hope it works for you as well.
I just saw this thread! I have kinda the same problem with image tracking. But I have tried with the marker-based something as follow to play video beside a marker:
<!DOCTYPE html>
<html>
<title>#</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<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.js"></script>
<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v4.1.2/dist/aframe-extras.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
AFRAME.registerComponent('vidhandler', {
init: function() {
this.toggle = false;
this.vid = document.querySelector("#vid");
this.vid.pause();
},
tick: function() {
if (this.el.object3D.visible == true) {
if (!this.toggle) {
this.toggle = true;
this.vid.play();
}
} else {
this.toggle = false;
this.vid.pause();
}
}
});
function refrespage() {
location.reload();
}
function playvid() {
vid.play();
}
</script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded artoolkit='sourceType: webcam; detectionMode: mono; maxDetectionRate: 60; canvasWidth: 200; canvasHeight: 200'>
<a-assets>
<video preload="auto" id="vid" autoplay loop="true" src="foo.mp4" crossorigin webkit-playsinline playsinline controls>
<source src="foo.mp4">
</video>
</a-assets>
<a-marker id="memarker"
type="pattern"
preset="hiro"
smooth="true"
smoothCount="10"
smoothTolerance="0.01"
smoothThreshold="5" vidhandler>
<a-plane scale = '10 10 0' position='-4.5 0.1 -5.5' rotation="-90 0 0" material='transparent:true;src:#vid' controls></a-plane>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
Still working on image-tracking though. I'd post an update if I got something.
Side note: this might not work on ios devices
I am trying to apply different images to the various sides of a cylinder. I have tried using the cubemap method as described here but it is not working. Should this work at all? Or is there another way to add multiple images to this shape? It would be good to understand how to add different images to different sides of various shapes, or is this only possible with cubes?
Here is what I am trying;
<html>
<head>
<title>example</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-template-component#^3.1.1/dist/aframe-template-component.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-cubemap id="wheel">
<img src="https://www.nickritchie.co.uk/samples/tyre.png">
<img src="https://www.nickritchie.co.uk/samples/tyre.png">
<img src="https://www.nickritchie.co.uk/samples/wheel.jpg">
<img src="https://www.nickritchie.co.uk/samples/wheel.jpg">
<img src="https://www.nickritchie.co.uk/samples/tyre.png">
<img src="https://www.nickritchie.co.uk/samples/tyre.png">
</a-cubemap>
<script id="example" type="text/html">
<a-entity
geometry="primitive: cylinder; radius: 0.25; height: 2"
position="0 1 -4"
rotation="0 0 90"
material="envMap: #wheel">
</a-entity>
</script>
</a-assets>
<a-entity
template="src: #example">
</a-entity>
<a-plane
position="0 0 -4"
rotation="-90 0 0"
width="4"
height="4"
shadow
color="yellow">
</a-plane>
<a-sky
color="grey">
</a-sky>
<a-camera>
</a-camera>
</a-scene>
</body>
</html>
The errors are coming from three.js, I can post here if it would help
Thanks for any help
Try https://github.com/bryik/aframe-cubemap-component
<a-entity cubemap="folder: https://www.nickritchie.co.uk/samples/"></a-entity>
I'm trying to animate the fog color in A-Frame by doing this:
<a-scene antialias="true" fog="type: exponential; color: #444; density: 0.1">
<a-animation attribute="fog.color" from="#444" to="#000" dur="2000"></a-animation>
</a-scene>
But it doesn't seem to work. I can animate the density works fine this way, but the color just changes in a flash.
Might be a bug. Maybe try the animation component. https://github.com/ngokevin/kframe/tree/master/components/animation/
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-animation-component/dist/aframe-animation-component.min.js"></script>
</head>
<body>
<a-scene fog="color: #444" animation__fog="property: fog.color; to: #000; dur: 2000">
</a-scene>
</body>