tag:blogger.com,1999:blog-91928754306358873152023-11-15T05:16:41.710-08:00VRamblingAndyhttp://www.blogger.com/profile/01397046866991392094noreply@blogger.comBlogger4125tag:blogger.com,1999:blog-9192875430635887315.post-54042361536161712332016-01-17T04:58:00.001-08:002016-01-17T05:42:52.892-08:00Welcome to VRambling<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Welcome to VRambling - The world's first fully 3D web browser for Google Cardboard.</span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">The reason you should use this browser over older, traditional browsers are:</span><br />
<ul style="text-align: left;">
<li><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">This browser includes a list of all of the VR websites out there on the internet that I could find. I do the work so you don't have to!</span></li>
<li><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">You do not have to take the phone out of the cardboard to switch between websites and turn on VR mode.</span></li>
<li><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">The magnet button or NFC button can be used to follow links or activate things inside websites.</span></li>
<li><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">You have back and home commands that can move you through pages like a proper browser</span></li>
</ul>
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Here is how you control the browser:</span><br />
<ul style="text-align: left;">
<li><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Look at something for the red selection box</span></li>
<li><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Pull the magnet sensor or press NFC button to select</span></li>
<li><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Tilt your head to the left for 2 seconds to go back</span></li>
<li><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Tilt your head to the right for 2 seconds to go home</span></li>
</ul>
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Unfortunately, people are not making their web pages compatible with jumping straight to VR so there may be some weirdness for a few seconds after clicking on a link. I've got an idea of how to make this nicer, but haven't had the time to fix it yet.</span><br />
<br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">There
aren't many sites out there that support Cardboard or VR, so write your
own and submit it to this app for inclusion on the list!</span><br />
<br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">Do you
know HTML, CSS and Javascript? Now you can be a VR developer! It's super
easy to write VR websites, just check out the "hello world" and
tutorials below.</span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><a href="https://docs.google.com/forms/d/1vfLTR3VUc8IMiHha6ER3fvh_FZmZSF2ALKnSlvkaCnY/viewform?usp=send_form">Add a VR link to VRambling</a></span><br />
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><a href="https://docs.google.com/forms/d/1nJID9P9HnpR29WsvRFQ9TAg0Sk7oSkHo0odCHDzYKM8/viewform?usp=send_form">Feedback for VRambling</a></span></div>
Andyhttp://www.blogger.com/profile/01397046866991392094noreply@blogger.com0tag:blogger.com,1999:blog-9192875430635887315.post-50583221956780464322015-12-31T12:51:00.000-08:002016-01-17T05:37:44.893-08:00Hello World in GLAM<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;">First, you will need to get a copy of the glam JS library. <a href="https://raw.githubusercontent.com/tparisi/glam/master/build/glam.min.js" target="_blank">Here is where I found mine.</a> </span><br />
<br />
<span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;">Next you will need to create a "viewport", import the library and add a container with a glam scene.</span><br />
<br />
<span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;">If you are working with cardboard, you will need to import the renderer and the controller. If you just want to look at the 3D scene on a webpage, you can comment these lines out. Be warned, though - sometimes the cardboard orientation can be different than that of the browser. </span><br />
<br />
<span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;">Here is hello world in GLAM working on a cardboard device:</span><br />
<br />
<pre style="background-color: white; color: black; font-size: 9pt;"><span style="font-family: "Courier New",Courier,monospace;"><<span style="color: navy; font-weight: bold;">html</span>>
<<span style="color: navy; font-weight: bold;">head</span>>
<<span style="color: navy; font-weight: bold;">meta </span><span style="color: blue; font-weight: bold;">name=</span><span style="color: green; font-weight: bold;">"viewport" </span><span style="color: blue; font-weight: bold;">content=</span><span style="color: green; font-weight: bold;">"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"</span>>
<<span style="color: navy; font-weight: bold;">script </span><span style="color: blue; font-weight: bold;">src=</span><span style="color: green; font-weight: bold;">"glam.min.js" </span>></<span style="color: navy; font-weight: bold;">script</span>>
<<span style="color: navy; font-weight: bold;">style</span>>
#helloText {
diffuse-color:cornflowerblue;
}
</<span style="color: navy; font-weight: bold;">style</span>>
</<span style="color: navy; font-weight: bold;">head</span>>
<<span style="color: navy; font-weight: bold;">body</span>>
<<span style="color: navy; font-weight: bold;">div </span><span style="color: blue; font-weight: bold;">id=</span><span style="color: green; font-weight: bold;">"container" </span><span style="color: blue; font-weight: bold;">style=</span><span style="color: green; font-weight: bold;">"</span>width: 100%; height: 100%; position: absolute;<span style="color: green; font-weight: bold;">"</span>>
<<span style="color: navy; font-weight: bold;">glam</span>>
<<span style="color: navy; font-weight: bold;">scene</span>>
<<span style="color: navy; font-weight: bold;">renderer </span><span style="color: blue; font-weight: bold;">type=</span><span style="color: green; font-weight: bold;">"cardboard"</span>></<span style="color: navy; font-weight: bold;">renderer</span>>
<<span style="color: navy; font-weight: bold;">controller </span><span style="color: blue; font-weight: bold;">type=</span><span style="color: green; font-weight: bold;">"deviceOrientation"</span>></<span style="color: navy; font-weight: bold;">controller</span>>
<<span style="color: navy; font-weight: bold;">group </span><span style="color: blue; font-weight: bold;">z=</span><span style="color: green; font-weight: bold;">"-3"</span>>
<<span style="color: navy; font-weight: bold;">text </span><span style="color: blue; font-weight: bold;">id=</span><span style="color: green; font-weight: bold;">"helloText" </span><span style="color: blue; font-weight: bold;">value=</span><span style="color: green; font-weight: bold;">"hello, world"</span>></<span style="color: navy; font-weight: bold;">text</span>>
</<span style="color: navy; font-weight: bold;">group</span>>
</<span style="color: navy; font-weight: bold;">scene</span>>
</<span style="color: navy; font-weight: bold;">glam</span>>
</<span style="color: navy; font-weight: bold;">div</span>>
</<span style="color: navy; font-weight: bold;">body</span>>
</<span style="color: navy; font-weight: bold;">html</span>></span></pre>
<br />
<a href="http://vrambling.com/helloworld.html"><span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;">http://vrambling.com/helloworld.html</span></a><br />
<br />
<span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;">Background reading:</span><br />
<br />
<a href="http://tparisi.github.io/glam/docs/#Manual/Key_Concepts/Key_concepts"><span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;">http://tparisi.github.io/glam/docs/#Manual/Key_Concepts/Key_concepts</span></a></div>
Andyhttp://www.blogger.com/profile/01397046866991392094noreply@blogger.com0tag:blogger.com,1999:blog-9192875430635887315.post-29016278787898170252015-12-31T12:15:00.000-08:002016-01-17T05:38:30.225-08:00Adding a link to another VR page<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;">The power of HTML is hyperlinking, and although it is not nearly as simple as typing <a href=""/>, it isn't very hard to do. This is GLAM's best feature.</span><br />
<br />
<span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;">First, let's start off with some simple cubes.</span><br />
<br />
<pre style="background-color: white; color: black; font-size: 9pt;"><span style="font-family: "Courier New",Courier,monospace;"><<span style="color: navy; font-weight: bold;">html</span>>
<<span style="color: navy; font-weight: bold;">head</span>>
<<span style="color: navy; font-weight: bold;">meta </span><span style="color: blue; font-weight: bold;">name=</span><span style="color: green; font-weight: bold;">"viewport" </span><span style="color: blue; font-weight: bold;">content=</span><span style="color: green; font-weight: bold;">"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"</span>>
<<span style="color: navy; font-weight: bold;">script </span><span style="color: blue; font-weight: bold;">src=</span><span style="color: green; font-weight: bold;">"glam.min.js" </span>></<span style="color: navy; font-weight: bold;">script</span>>
<<span style="color: navy; font-weight: bold;">style</span>>
body{
margin: 0px;
background-color: #ffffff;
}
#redCube {
diffuse-color:red;
}
#blueCube {
diffuse-color:blue;
}
#greenCube {
diffuse-color:green;
}
</<span style="color: navy; font-weight: bold;">style</span>>
</<span style="color: navy; font-weight: bold;">head</span>>
<<span style="color: navy; font-weight: bold;">body</span>>
<<span style="color: navy; font-weight: bold;">div </span><span style="color: blue; font-weight: bold;">id=</span><span style="color: green; font-weight: bold;">"container" </span><span style="color: blue; font-weight: bold;">style=</span><span style="color: green; font-weight: bold;">"</span>width: 100%; height: 100%; position: absolute;<span style="color: green; font-weight: bold;">"</span>>
<<span style="color: navy; font-weight: bold;">glam</span>>
<<span style="color: navy; font-weight: bold;">scene</span>>
<<span style="color: navy; font-weight: bold;">renderer </span><span style="color: blue; font-weight: bold;">type=</span><span style="color: green; font-weight: bold;">"cardboard"</span>></<span style="color: navy; font-weight: bold;">renderer</span>>
<<span style="color: navy; font-weight: bold;">controller </span><span style="color: blue; font-weight: bold;">type=</span><span style="color: green; font-weight: bold;">"deviceOrientation"</span>></<span style="color: navy; font-weight: bold;">controller</span>>
<<span style="color: navy; font-weight: bold;">box </span><span style="color: blue; font-weight: bold;">id=</span><span style="color: green; font-weight: bold;">"redCube" </span><span style="color: blue; font-weight: bold;">z=</span><span style="color: green; font-weight: bold;">"-9" </span><span style="color: blue; font-weight: bold;">rx=</span><span style="color: green; font-weight: bold;">"45deg"</span>></<span style="color: navy; font-weight: bold;">box</span>>
<<span style="color: navy; font-weight: bold;">box </span><span style="color: blue; font-weight: bold;">id=</span><span style="color: green; font-weight: bold;">"blueCube" </span><span style="color: blue; font-weight: bold;">x=</span><span style="color: green; font-weight: bold;">"-9" </span><span style="color: blue; font-weight: bold;">rx=</span><span style="color: green; font-weight: bold;">"45deg"</span>></<span style="color: navy; font-weight: bold;">box</span>>
<<span style="color: navy; font-weight: bold;">box </span><span style="color: blue; font-weight: bold;">id=</span><span style="color: green; font-weight: bold;">"greenCube" </span><span style="color: blue; font-weight: bold;">x=</span><span style="color: green; font-weight: bold;">"+9" </span><span style="color: blue; font-weight: bold;">rx=</span><span style="color: green; font-weight: bold;">"45deg"</span>></<span style="color: navy; font-weight: bold;">box</span>>
</<span style="color: navy; font-weight: bold;">scene</span>>
</<span style="color: navy; font-weight: bold;">glam</span>>
</<span style="color: navy; font-weight: bold;">div</span>>
</<span style="color: navy; font-weight: bold;">body</span>>
</<span style="color: navy; font-weight: bold;">html</span>></span></pre>
<br />
<span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;">What we want to do here is add a javascript event listener to the red box. The first step is to add an event listener on load, so that we call the script after all the page elements have loaded.</span><br />
<br />
<pre style="background-color: white; color: black; font-size: 9pt;"><span style="font-family: "Courier New",Courier,monospace;">window.addEventListener('load', function(){
glam.ready();
scene = document.getElementsByTagName('scene')[0];
addLinkListener()
}, false);</span></pre>
<br />
<span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;">Then we create the addLinkListener() method, which will set up the events on the redCube object. GLAM has two events, "viewover" and "viewout" which are called when the object is in the centre of the view. We will use this to put the object into a selectedLink variable whenever it is looked at inside cardboard.</span><br />
<br />
<pre style="background-color: white; color: black; font-size: 9pt;"><span style="font-family: "Courier New",Courier,monospace;">var selectedLink = null;
function addLinkListener() {
redCube = document.getElementById('redCube');
console.log('redCube: ' + redCube);
redCube.href = 'http://vrambling.com/helloworld.html'
redCube.addEventListener("viewover", function(event) {
console.log('redCube viewover');
selectedLink = redCube;
});
redCube.addEventListener("viewout", function(event) {
console.log('redCube viewout');
selectedLink = null;
});
}</span></pre>
<br />
<span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;">I have added console.log statements for debugging purposes. Best to remove them after all of your testing is finished. As you can see, we assign an "href" property to the object which we will use to navigate.</span><br />
<br />
<span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;">Finally, we will add a touchstart event to the window to detect the cardboard touch event. </span><br />
<br />
<pre style="background-color: white; color: black; font-size: 9pt;"><span style="font-family: "Courier New",Courier,monospace;">var canvas = glam.Graphics.instance.renderer.domElement;
canvas.addEventListener("touchstart", function(event) {
console.log('click on window, selected link: ' + selectedLink);
if (selectedLink != null && selectedLink.href != null) {
window.location.href = selectedLink.href;
}
});</span></pre>
<pre style="background-color: white; color: black; font-family: 'Menlo'; font-size: 9.0pt;"> </pre>
<span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;">Here is the finished code, with a working link on the red box:</span><br />
<br />
<pre style="background-color: white; color: black; font-size: 9pt;"><span style="font-family: "Courier New",Courier,monospace;"><<span style="color: navy; font-weight: bold;">html</span>>
<<span style="color: navy; font-weight: bold;">head</span>>
<<span style="color: navy; font-weight: bold;">meta </span><span style="color: blue; font-weight: bold;">name=</span><span style="color: green; font-weight: bold;">"viewport" </span><span style="color: blue; font-weight: bold;">content=</span><span style="color: green; font-weight: bold;">"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"</span>>
<<span style="color: navy; font-weight: bold;">script </span><span style="color: blue; font-weight: bold;">src=</span><span style="color: green; font-weight: bold;">"glam.min.js" </span>></<span style="color: navy; font-weight: bold;">script</span>>
<<span style="color: navy; font-weight: bold;">style</span>>
body{
margin: 0px;
background-color: #ffffff;
}
#redCube {
diffuse-color:red;
}
#blueCube {
diffuse-color:blue;
}
#greenCube {
diffuse-color:green;
}
</<span style="color: navy; font-weight: bold;">style</span>>
<<span style="color: navy; font-weight: bold;">script</span>>
var selectedLink = null;
window.addEventListener('load', function(){
glam.ready();
scene = document.getElementsByTagName('scene')[0];
var canvas = glam.Graphics.instance.renderer.domElement;
canvas.addEventListener("touchstart", function(event) {
console.log('click on window, selected link: ' + selectedLink);
if (selectedLink != null && selectedLink.href != null) {
window.location.href = selectedLink.href;
}
});
addLinkListener()
}, false);
function addLinkListener() {
redCube = document.getElementById('redCube');
console.log('redCube: ' + redCube);
redCube.href = 'http://vrambling.com/helloworld.html'
redCube.addEventListener("viewover", function(event) {
console.log('redCube viewover');
selectedLink = redCube;
});
redCube.addEventListener("viewout", function(event) {
console.log('redCube viewout');
selectedLink = null;
});
}
</<span style="color: navy; font-weight: bold;">script</span>>
</<span style="color: navy; font-weight: bold;">head</span>>
<<span style="color: navy; font-weight: bold;">body</span>>
<<span style="color: navy; font-weight: bold;">div </span><span style="color: blue; font-weight: bold;">id=</span><span style="color: green; font-weight: bold;">"container" </span><span style="color: blue; font-weight: bold;">style=</span><span style="color: green; font-weight: bold;">"</span>width: 100%; height: 100%; position: absolute;<span style="color: green; font-weight: bold;">"</span>>
<<span style="color: navy; font-weight: bold;">glam</span>>
<<span style="color: navy; font-weight: bold;">scene</span>>
<<span style="color: navy; font-weight: bold;">renderer </span><span style="color: blue; font-weight: bold;">type=</span><span style="color: green; font-weight: bold;">"cardboard"</span>></<span style="color: navy; font-weight: bold;">renderer</span>>
<<span style="color: navy; font-weight: bold;">controller </span><span style="color: blue; font-weight: bold;">type=</span><span style="color: green; font-weight: bold;">"deviceOrientation"</span>></<span style="color: navy; font-weight: bold;">controller</span>>
<<span style="color: navy; font-weight: bold;">box </span><span style="color: blue; font-weight: bold;">id=</span><span style="color: green; font-weight: bold;">"redCube" </span><span style="color: blue; font-weight: bold;">z=</span><span style="color: green; font-weight: bold;">"-9" </span><span style="color: blue; font-weight: bold;">rx=</span><span style="color: green; font-weight: bold;">"45deg"</span>></<span style="color: navy; font-weight: bold;">box</span>>
<<span style="color: navy; font-weight: bold;">box </span><span style="color: blue; font-weight: bold;">id=</span><span style="color: green; font-weight: bold;">"blueCube" </span><span style="color: blue; font-weight: bold;">x=</span><span style="color: green; font-weight: bold;">"-9" </span><span style="color: blue; font-weight: bold;">rx=</span><span style="color: green; font-weight: bold;">"45deg"</span>></<span style="color: navy; font-weight: bold;">box</span>>
<<span style="color: navy; font-weight: bold;">box </span><span style="color: blue; font-weight: bold;">id=</span><span style="color: green; font-weight: bold;">"greenCube" </span><span style="color: blue; font-weight: bold;">x=</span><span style="color: green; font-weight: bold;">"+9" </span><span style="color: blue; font-weight: bold;">rx=</span><span style="color: green; font-weight: bold;">"45deg"</span>></<span style="color: navy; font-weight: bold;">box</span>>
</<span style="color: navy; font-weight: bold;">scene</span>>
</<span style="color: navy; font-weight: bold;">glam</span>>
</<span style="color: navy; font-weight: bold;">div</span>>
</<span style="color: navy; font-weight: bold;">body</span>>
</<span style="color: navy; font-weight: bold;">html</span>></span></pre>
<pre style="background-color: white; color: black; font-family: 'Menlo'; font-size: 9.0pt;"> </pre>
<pre style="background-color: white; color: black; font-family: 'Menlo'; font-size: 9.0pt;"> </pre>
<pre style="background-color: white; color: black; font-family: 'Menlo'; font-size: 9.0pt;"> </pre>
</div>
Andyhttp://www.blogger.com/profile/01397046866991392094noreply@blogger.com0tag:blogger.com,1999:blog-9192875430635887315.post-77241353074555029802015-12-31T12:00:00.000-08:002016-01-17T05:39:46.314-08:00Importing models<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;">Although it's possible to make nice scenes with spheres and cubes, most of the rooms you will create will involve objects created in 3D modelling programs. These can be imported with a simple statement. </span><br />
<br />
<pre style="background-color: white; color: black; font-size: 9pt;"><span style="font-family: "Courier New",Courier,monospace;"><<span style="background-color: #e4e4ff; color: navy; font-weight: bold;">import</span><span style="color: navy; font-weight: bold;"> </span><span style="color: blue; font-weight: bold;">id=</span><span style="color: green; font-weight: bold;">"chair" </span><span style="color: blue; font-weight: bold;">src=</span><span style="color: green; font-weight: bold;">"chair.dae" </span><span style="color: blue; font-weight: bold;">rx=</span><span style="color: green; font-weight: bold;">"270deg"</span>></<span style="background-color: #e4e4ff; color: navy; font-weight: bold;">import</span>></span></pre>
<br />
<span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;">This presumes you have a DAE file sitting on your web server with the object you need. Here is one that I used for this example:</span><br />
<span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;"><br /></span>
<a href="http://www.3dvia.com/models/9A414190A2B48698/ikea-po-ng"><span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;">http://www.3dvia.com/models/9A414190A2B48698/ikea-po-ng</span></a><br />
<span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;">I needed to rename the file and include the texture for it to work.</span><br />
<span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;">Here is the complete code. Notice the y value on the group - this is to simulate the user standing over the chair:</span><br />
<span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;"><br /></span>
<br />
<pre style="background-color: white; color: black; font-size: 9pt;"><span style="font-family: "Courier New",Courier,monospace;"><<span style="color: navy; font-weight: bold;">html</span>>
<<span style="color: navy; font-weight: bold;">head</span>>
<<span style="color: navy; font-weight: bold;">meta </span><span style="color: blue; font-weight: bold;">name=</span><span style="color: green; font-weight: bold;">"viewport" </span><span style="color: blue; font-weight: bold;">content=</span><span style="color: green; font-weight: bold;">"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"</span>>
<<span style="color: navy; font-weight: bold;">script </span><span style="color: blue; font-weight: bold;">src=</span><span style="color: green; font-weight: bold;">"glam.min.js" </span>></<span style="color: navy; font-weight: bold;">script</span>>
</<span style="color: navy; font-weight: bold;">head</span>>
<<span style="color: navy; font-weight: bold;">body</span>>
<<span style="color: navy; font-weight: bold;">div </span><span style="color: blue; font-weight: bold;">id=</span><span style="color: green; font-weight: bold;">"container" </span><span style="color: blue; font-weight: bold;">style=</span><span style="color: green; font-weight: bold;">"</span>width: 100%; height: 100%; position: absolute;<span style="color: green; font-weight: bold;">"</span>>
<<span style="color: navy; font-weight: bold;">glam</span>>
<<span style="color: navy; font-weight: bold;">scene</span>>
<<span style="color: navy; font-weight: bold;">renderer </span><span style="color: blue; font-weight: bold;">type=</span><span style="color: green; font-weight: bold;">"cardboard"</span>></<span style="color: navy; font-weight: bold;">renderer</span>>
<<span style="color: navy; font-weight: bold;">controller </span><span style="color: blue; font-weight: bold;">type=</span><span style="color: green; font-weight: bold;">"deviceOrientation"</span>></<span style="color: navy; font-weight: bold;">controller</span>>
<<span style="color: navy; font-weight: bold;">group </span><span style="color: blue; font-weight: bold;">z=</span><span style="color: green; font-weight: bold;">"-3" </span><span style="color: blue; font-weight: bold;">y=</span><span style="color: green; font-weight: bold;">"-2"</span>>
<<span style="color: navy; font-weight: bold;">import </span><span style="color: blue; font-weight: bold;">id=</span><span style="color: green; font-weight: bold;">"chair" </span><span style="color: blue; font-weight: bold;">src=</span><span style="color: green; font-weight: bold;">"chair.dae" </span><span style="color: blue; font-weight: bold;">rx=</span><span style="color: green; font-weight: bold;">"270deg"</span>></<span style="color: navy; font-weight: bold;">import</span>>
</<span style="color: navy; font-weight: bold;">group</span>>
</<span style="color: navy; font-weight: bold;">scene</span>>
</<span style="color: navy; font-weight: bold;">glam</span>>
</<span style="color: navy; font-weight: bold;">div</span>>
</<span style="color: navy; font-weight: bold;">body</span>>
</<span style="color: navy; font-weight: bold;">html</span>></span></pre>
<br /></div>
Andyhttp://www.blogger.com/profile/01397046866991392094noreply@blogger.com0