#aframe.io how do I change a-scene - aframe

How do I change a-scene? One scene to another.
<!-- scene 1 -->
<a-scene scale="0.2 0.2 0.2">
<a-assets altspace >
<img id="bg1" src="offbg.jpg">
</a-assets>
<a-sky src="#bg1"></a-sky>
</a-scene>
<!-- scene 2 -->
<a-scene scale="0.2 0.2 0.2">
<a-assets altspace >
<img id="bg2" src="offbg2.jpg">
</a-assets>
<a-sky src="#bg2"></a-sky>
</a-scene>
Thanks in advance.

Guide on swapping out background images with JS: https://aframe.io/docs/0.8.0/guides/building-a-360-image-gallery.html
You can do document.querySelector('a-sky').setAttribute('src', 'newimage.jpg') to change the src.

Related

How to add 2D Overlay Exit Button when User Enters into VR in WebVR?

I am new to Aframe and try to put 2D Overlay menu to exit from VR mode when a user enters into VR Mode.
What I want is exactly the same as given in krpano examples here.
Krpano Example Image
I added a-entity and write code on that. It worked but I want a 2D overlay kind of in webVR.
any help or suggestions are appreciated.
I think there are two ways of doing this:
Create your UI using regular HTML markup and superimpose it on the WebVR canvas.
Create your UI elements in Aframe, but parent them to the camera object so they don't move.
Here's a simple example using both techniques. I've applied pointer-events: none to the HTML elements to stop them getting in the way of mouse interactions with the 3D scene, but you can make your UI items clickable if you like. When you create UI items as 3D elements, they'll respond to the scene lighting, which you may prefer. Getting them to respond to mouse clicks is a lot harder, though.
.uiwrapper {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
text-align: center;
pointer-events: none;
}
.uiblock {
font-family: sans-serif;
font-size: 4vmin;
width: 10em;
height: 1em;
display: inline-block;
color: #fff;
background: rgba(0, 0, 100, 0.5);
padding: 1em 2em;
margin-top: 20vh;
}
.as-console-wrapper {
/* ignore console warnings in snippet view */
display: none !important;
}
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#666"></a-sky>
<a-entity light="type: directional; color: #FFF; intensity: 2" position="1 2 3"></a-entity>
<a-camera position="0 1 0">
<a-plane position="0 0 -.11" width=".1" height=".02" color="rgb(0, 0, 100)" opacity="0.5"></a-plane>
<a-entity position="0 0 -.1" text="color: #fff; width: 0.16; align: center; value: Linked to camera"></a-entity>
</a-camera>
</a-scene>
<div class="uiwrapper">
<div class="uiblock">
HTML overlay
</div>
</div>
</div>

Using Bulma CSS, implement scrollbar-free page that fills the viewport with a central inline SVG that scales to fill the space

This question is about using Bulma css.
I'm looking for a way to size my content so that there are no scrollbars.
At the moment there is just a navbar and an inline SVG.
The goal is for the SVG to be scaled so that it maintains its aspect ratio, and expands so that its largest dimension matches the available width and remaining height of the viewport.
The pure CSS version is basically this answer (and many others like it), but I want to stick with Bulma css classes (v 0.9.1).
It feels like it should be easy, but I'm not getting the result that I want.
I found that putting height="92vh" on the svg element was almost ok, but I don't want to have to continue tuning the height as I add elements to the document.
My document looks like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Tool</title>
</head>
<body height="100vh" class="is-flex is-flex-direction-column">
<nav class="navbar" role="navigation" aria-label="main navigation">
<!-- navbar details elided -->
</nav>
<div class="container is-fluid is-flex-grow-1 is-flex-shrink-1" id="scene_parent">
<!-- inline svg element is added here programmatically -->
</div>
</body>
</html>
The SVG element looks like:
const svg = `
<svg id="picture" height="100%" viewBox="${vb['min-x']} ${vb['min-y']} ${vb.width} ${vb.height}" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0 ${middle}) scale(1 -1) translate(0 ${-middle})">
${polyOne}
${polyTwo}
</g>
</svg>`;
where vb is a calculated viewBox, middle is the horizontal middle of the viewbox, and polyOne and polyTwo are strings representing polygons.
What I thought I could achieve was to have the parent div (#scene_parent) resize itself and then get the svg to choose its height from the parent div.
It doesn't work. The svg is invariably rendered too high, thus scrolling down the page.
I would be grateful if you could show me my mistake.
This worked for me although it's not exhaustively tested with different SVGS's:
<figure class="image is-16by9">
<svg class="has-ratio" width="200" height="50" viewBox="0 0 200 50">
...
</svg>
</figure>
I wrapped the SVG with <figure class="image is-16by9"> and added has-ratio class to the SVG element.
So SVG becomes:
const svg = `
<svg id="picture" class="has-ratio" height="100%" viewBox="${vb['min-x']} ${vb['min-y']} ${vb.width} ${vb.height}" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0 ${middle}) scale(1 -1) translate(0 ${-middle})">
${polyOne}
${polyTwo}
</g>
</svg>`;

SVG Morph element of SVG

Is it possible to do SVG element transformation without using third-party libraries? Small example
.game_block {
position: relative;
width: 100%;
height: 100%;
min-height: 100vh;
}
.btn_gamePlay {
width: 100vh;
height: 100vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: none;
transition: 0.2s all;
}
.st7 {
fill: #70203c;
}
.st8 {
fill: #ef447e;
stroke: #5e112d;
stroke-width: 0.5;
stroke-miterlimit: 10;
}
<div id="fullImage" class="game_block">
<button class="btn_gamePlay" type="button" title="Play">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 240 240">
<path d="M171.5 182s11.5-.2 14.5-7.2 4.7-30 4.7-30l1.1-74.8s-.8-19.8-15.3-25.8-110.8 0-110.8 0S52.3 40 52 89.5s1.8 81.5 1.8 81.5 1 9.5 12.3 10.5 105.4.5 105.4.5z"
fill="#ef457e" stroke="#5e102d" stroke-miterlimit="10" id="za_x5F_btn"/>
<g id="za_hair">
<path class="st18" id="eyebrow"
d="M147 64.5s-5.9.8-7.4 2.5-1.3 2.6-1.3 2.6c2 0 7.5-2.5 10.1-4.1s-1.4-1-1.4-1z"/>
<path id="main_hair"
d="M137.5 57.8s-8.5 14.3-9.8 15.5.4-3.4-.9-3.5-6.3 10.8-6.9 21.3-1.1-3-1.1-3-.5-5.4-2.7 2.1-3.4 20.6-4.9 22.2c-.8.9-1.2.1-1.3-.9-.2-1-.8-1.9-1.7-2.2-.5-.2-.7.1-1.1 1.4-.6 2.3-.1 2.9-2.4 4s-5.1 1.1-6.5 3.9-2.5 1.2-2.4 3.8.8 4.2-1.6 9.8-1.6 6.4-3.4 8.6-3.4 1.4-3.6.3.8-1.4-.4-2.7-3.3-3.5-4.4-1.4-3.7 10.4-3.7 10.4 1.3-4.9.1.4-.1 7.3-1 9.1-1.9 2-2.7 1.4-2.5-5.4-3.4-4.9-2.2 3.1-3.2 6.9-.3 5.5-2.1 6.7-3.3-2.4-4.2-2.6-2.9 3.1-2.9 3.4-4.4 4.9-3.9 12 .9 9.7.1 10-2.8-4.1-3.6-7.8-5-14.2-3.4-21.3c1.5-6.7-1.3-85.2-.7-92.4.8-9.4 1.9-19.4 4.4-21.8 3.5-3.3 4.8-5.3 14-7.9s38.6-10.8 52-9.8 30.9.4 42.6 5.9 18.3 9 18.3 9c4.4 4.4 12.6 1.6 13.6 25.8s.1 96.3-.1 98.3-3.5 19.9-3.5 19.9c-2.9 6-3.3-1.8-3.3-1.8s-.3-22-1.9-25.4-2.8-.4-2.8-.4-1.4.9-2.3-5.9.6-20-.9-23.9-2.6 4.4-2.6 4.4-.5 4.4-1.5 3.1-2-35.3-2.6-36.4-.4-1-2 1.6-1.3-7.9-2-10-2.8.6-3.3-3.4-1-7-3.3-8.1c-.7-.4-1.3-.2-1.7.2-1 .9-2.5.4-3.1-.7-2.5-4.7-6.7-12.6-8-12.5-1.8.1-2.3 0-2.6.6s-1.8-2.3-2-6.1c-.1-1.7-1.3-2.4-2.4-2.7-1.2-.3-2.3-1.1-3.2-2 .1-.3-.1-.5-.1-.5z"
fill="#1a1416" stroke="#171617" stroke-miterlimit="10">
<animate attributeName="d" fill="freeze" dur="2s" calcMode="discrete" begin=fullImage.mouseenter
to="M138.8 200s-.3.8-1.5 2-.9-4.9-2.3-5-3.4-15.8-4-5.3-1-3.8-1-3.8-2.6-3.3-4.8 4.3-2-3.1-3.5-1.5c-.8.9-2.5-2.7-2.5-1.8 1.3 41.2-2.6 14.7-3.5 13-1.8-3.3-.1-9.8-.5-8.5-.6 2.3-2.4 7.6-4.8 8.8s-.6-10.3-2-7.5-2.6 2.2-2.5 4.8-2.4-10.4-4.8-4.8-.9-5.4-2.8-3.3-5-2.8-6.8-6.5c-.3-1 .4 8.5-.8 7.3s-.1-5.8-1.3-3.8-4.3 2-4.3 2-.6-10.4-1.8-5-.4 3.3-.5 5.3c-.3 6.5-3.5 12.5-6.3-5.3-.2-1-1.3-5.5-1.3-4.5 3.1 31.8-4.8-1.8-5.8 2s-1 3.6-2.8 4.8-2.6-2.7-2.5-1.8c1.8 21.3-4.3 4.4-4.3 4.8s-5.3-18.3-4.9-11.2.9 9.7.1 10-2.8-4.1-3.6-7.8-5-14.2-3.4-21.3c1.5-6.7-1.3-85.2-.7-92.4.8-9.4 1.9-19.4 4.4-21.8 3.5-3.3 4.8-5.3 14-7.9s38.6-10.8 52-9.8 30.9.4 42.6 5.9 18.3 9 18.3 9c4.4 4.4 12.6 1.6 13.6 25.8s.1 96.3-.1 98.3-3.5 19.9-3.5 19.9c-2.9 6-3.3-1.8-3.3-1.8-.2 2-9 30.8-8.5 10.3.1-3.7-3-7.5-3-7.5s-1.9 23.3-2.8 16.5.8 7.6-.8 3.8.8-1 .8-1-2.8-25.8-3.8-27-1.6 24.1-2.3 23-3.1-24.1-4.8-21.5-1.5 15.9-2.3 13.8-2.5 9.8-3 5.8-2-8.1-4.3-9.3c-.7-.4-2.8-1-1.5 16.3.1 1.3-1.8 1.2-1.5 2.5 1.8 8.5-1.8 1.6-2.3.5-4.3-11.4.1-3-1.8-12-2.3-10.8-.3 6.9-.3 10.8 3.3-20-.9 12.8.3-12.3-6.9 2.4-4.1 14.1-4.8 7.8.1-5.6-.1-8.9-.5-3.3.2 14.3.7-2.8.7-2.8z">
</animate>
<animate attributeName="d" fill="freeze" dur="2s" calcMode="discrete" begin=fullImage.mouseleave
to="M137.5 57.8s-8.5 14.3-9.8 15.5.4-3.4-.9-3.5-6.3 10.8-6.9 21.3-1.1-3-1.1-3-.5-5.4-2.7 2.1-3.4 20.6-4.9 22.2c-.8.9-1.2.1-1.3-.9-.2-1-.8-1.9-1.7-2.2-.5-.2-.7.1-1.1 1.4-.6 2.3-.1 2.9-2.4 4s-5.1 1.1-6.5 3.9-2.5 1.2-2.4 3.8.8 4.2-1.6 9.8-1.6 6.4-3.4 8.6-3.4 1.4-3.6.3.8-1.4-.4-2.7-3.3-3.5-4.4-1.4-3.7 10.4-3.7 10.4 1.3-4.9.1.4-.1 7.3-1 9.1-1.9 2-2.7 1.4-2.5-5.4-3.4-4.9-2.2 3.1-3.2 6.9-.3 5.5-2.1 6.7-3.3-2.4-4.2-2.6-2.9 3.1-2.9 3.4-4.4 4.9-3.9 12 .9 9.7.1 10-2.8-4.1-3.6-7.8-5-14.2-3.4-21.3c1.5-6.7-1.3-85.2-.7-92.4.8-9.4 1.9-19.4 4.4-21.8 3.5-3.3 4.8-5.3 14-7.9s38.6-10.8 52-9.8 30.9.4 42.6 5.9 18.3 9 18.3 9c4.4 4.4 12.6 1.6 13.6 25.8s.1 96.3-.1 98.3-3.5 19.9-3.5 19.9c-2.9 6-3.3-1.8-3.3-1.8s-.3-22-1.9-25.4-2.8-.4-2.8-.4-1.4.9-2.3-5.9.6-20-.9-23.9-2.6 4.4-2.6 4.4-.5 4.4-1.5 3.1-2-35.3-2.6-36.4-.4-1-2 1.6-1.3-7.9-2-10-2.8.6-3.3-3.4-1-7-3.3-8.1c-.7-.4-1.3-.2-1.7.2-1 .9-2.5.4-3.1-.7-2.5-4.7-6.7-12.6-8-12.5-1.8.1-2.3 0-2.6.6s-1.8-2.3-2-6.1c-.1-1.7-1.3-2.4-2.4-2.7-1.2-.3-2.3-1.1-3.2-2 .1-.3-.1-.5-.1-.5z">
</animate>
</path>
<path id="curl_hair" d="M137.5 57.8s-.8-6.2-10.3-7.2-7.4-2.3-7.4-2.3"
fill="none" stroke="#161516" stroke-miterlimit="10"/>
</g>
</svg>
</button>
</div>
It is necessary to realize that when you hover the cursor over the "full image" wrapper, your hair transforms from the first path to the second. When the cursor came out of the area, everything would go in the reverse order. Is it possible?
Yes. The key is that the 'before' state and the 'after' state of the svg object need to have the same amount of points.
Within your vector editor, start with you before state, lets' call this 'Shape A'. Export the before shape and save the 'points' within this svg code for Shape A. Now, back to the program, move the vector's points around until it matches the 'after' shape you desire, we will call the after state, 'Shape B'.
Once you meet your desired shape, export this svg and pull out the vectors path 'points. This will be your Shape B, (after state).
Now, you should have a copy of the path points for Shape A (the before state) and Shape B (the after state).
Take these points and enter them within the initial path tag as well as within the 'values' for the animate tag. See the template below for an example on how to insert these points within the animate tag and see the snippet code for a more detailed breakdown on where these points are inserted.
<animate dur=”5s” repeatCount=”indefinite” attributeName=”d”
values=”shapeAPoints;shapeBPoints;shapeAPoints”>
After you insert your points, you will then add the fill, calcMode and keySplines as shown in the example. You can play around with these as you wish. Hope this helps! This write up helped me figure it out https://codeburst.io/svg-morphing-the-easy-way-and-the-hard-way-c117a620b65f
Let me know how you make out.
Update: edited snippet to show animation on 'mouseover'. Note the added attribute of begin, with a value of 'thesvg.mouseover'. This takes the element ID ('thesvg') and connects it with the 'mouseover' event. You can give your body an ID and swap the 'thesvg' id with your body 'id' for the same affect. For this snippet, using the Body ID did not work, but I tested this within firefox and it works fine.
#thesvg{
height: 300px;
width: 300px;
}
#thepath{
fill: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<div id="svgcontainer">
<svg id="thesvg" width="100" height="130" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path id="thepath" d="M39.29,39.27,36,45,8,39.27,0,21l8-7L23,5l16.29,9L45,32l-5.71,7.27Z" fill-rule="nonzero" fill="#070707">
<animate id="the-animation" begin="thesvg.mouseover" dur="1s" repeatCount="1" attributeName="d" values=
"M39.29,39.27,36,45,8,39.27,0,21l8-7L23,5l16.29,9L45,32l-5.71,7.27Z;
M39.29,39.27,28,33,8,39.27,14,26,8,14l18,5,13.29-5L34,27l5.29,12.27Z;
M39.29,39.27,36,45,8,39.27,0,21l8-7L23,5l16.29,9L45,32l-5.71,7.27Z;"
fill="freeze"
calcMode="spline"
keySplines="0.4 0 0.2 1; 0.4 0 0.2 1">
</path>
</svg>
</div>
<script src="main.js"></script>
</body>
</html>

Adding bootstrap glyphicons in the text entity of a-frame

Like normal webpage, i wanted to include a glyphicon inside a text entity. For example, in below scene, i have included a text with value "Stop watch" on a plane.
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded>
<a-plane position="0 0 0" rotation="-90 0 0" text="value:Stop watch;align:center;width:5;color:black;"></a-plane>
</a-scene>
</body>
Now, like normal webpage, i wanted to replace this text value with a glyph from bootstrap.
<span class="glyphicon glyphicon-time"></span>
Is it possible?
a-text renders the sets of text from preset font libraries. I'd suggest using the glyphicon as an image.
<a-plane material="src: myimage.png"></a-plane>
You could use the glyphicons, if you had a font in the necessary format, which would have the glyphicons.

SVG: CSS properties are not applied

I have a HTML 5 file containing a SVG element. Also there are some styles defined in a CSS file (imported in the html file correctly), e.g.:
rect.cell-border {
stroke: #000;
stroke-width:1.3px;
}
One element in the SVG looks like this:
<rect class="cell cell-border" width="256" height="256" style="fill-opacity: 0.5;"></rect>
Problem: Besides the inline CSS properties this rect element does not get the properties by cell-border. I have absolutely no idea why. In general the CSS file works, because other (non SVG but pure HTML) elements are styled correctly.
I generate the SVG elements with D3.
It works in this fiddle: http://jsfiddle.net/j0g8rnqu/1/
This means that your css and the svg are correct. There can only be something wrong with your binding of the css file. If you do it the standard way, it should work. Here is the most simple case:
file test.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="svg-test.css">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" overflow="visible">
<rect class="cell cell-border" width="256" height="256" style="fill: #79a;"></rect>
</svg>
</body>
</html>
file svg-test.css
rect.cell-border {
stroke: #000;
stroke-width:1.3px;
}
Note that I added overflow="hidden"to the svg to ensure that the border does not get cropped.
Seems to work for me. The first rect has the class and therefore the stroke, the bottom does not.
rect.cell-border {
stroke: #000;
stroke-width:1.3px;
}
<svg height="258" width="258" viewBox="-1 -1 258 258">
<rect class="cell cell-border" width="256" height="256" style="fill-opacity: 0.5;"></rect>
</svg>
<svg height="258" width="258" viewBox="-1 -1 258 258">
<rect width="256" height="256" style="fill-opacity: 0.5;"></rect>
</svg>
Okay the solution that finally worked was to include the external css file in a different way:
<style>
#import url(css/MatrixVisualization.css)
</style>
Rather than the regular way. Another possibility would be to use embedded css declarations.

Resources