Feb 6 In-Class Exercise Thread .
Hi Everyone,
Post your solutions to the Feb 6 In-Class Exercise to this thread.
Best,
Chris
Hi!
So these are the interesting parts:
<a-link class="link" href="index.html" title="Run counter-clockwise" on="click" position="-2 3 -4"></a-link> <a-link class="link" href="index.html" title="Run clockwise" on="click" position="2 3 -4"></a-link> <!-- Camera + cursor. --> <a-entity camera position="0 4 0" look-controls> ... </a-entity>
<a-link class="link" href="https://www.cs.sjsu.edu/~pollett/185c.1.19s/first_aframe.html" title="First Aframe" on="click" position="1.5 -1 -4"></a-link>
<a-link class="link" href="https://www.cs.sjsu.edu/~pollett/185c.1.19s/first_aframe.html" title="Hello page" on="click" position="-1.5 -1 -4"></a-link>
<!-- Camera + cursor. --> <a-entity camera look-controls> <a-cursor id="cursor" animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150" animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500" event-set__1="_event: mouseenter; color: springgreen" event-set__2="_event: mouseleave; color: black " fuse="true" raycaster="objects: .link"> </a-cursor> </a-entity>
<nowiki> <!DOCTYPE html> <html> <head> <title>Sky Camera Controls</title> <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> </head> <body> <a-scene> <a-assets> <img id="city" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg"> <img id="city-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg"> </a-assets>; <!-- 360-degree image. --> <a-sky id="image-360" radius="10" src="#city"></a-sky> <!-- Image links. --> <a-link class="link" href="hello.html" title="Hello Page" on="click" position="0 -1 -4"></a-link> <a-link class="link" href="bye.html" title="Goodbye!" on="click" position="0 5 6"></a-link> <!-- Camera + cursor. --> <a-entity camera="active: true" look-controls position="0 20 0"> <a-cursor id="cursor" animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 2 2 2; dur: 150" animation__fusing="property: fusing; startEvents: fusing; from: 2 2 2; to: 0.1 0.1 0.1; dur: 1500" event-set__1="_event: mouseenter; color: springgreen" event-set__2="_event: mouseleave; color: black " fuse="true" raycaster="objects: .link"> </a-cursor> </a-entity> </a-scene> </body> </html> </nowiki>
<a-link class="link" href="https://www.google.com/" title="Google" on="click" position="0 -1 -4"></a-link> <a-link class="link" href="https://one.sjsu.edu/" title="SJSU" on="click" position="2 2 2"></a-link>
. . .
<a-entity camera="active: true" look-controls wasd-controls position="0 5 5" data-aframe-default-camera> <a-cursor id="cursor" animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150" animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 2500" event-set__1="_event: mouseenter; color: red" event-set__2="_event: mouseleave; color: blue " fuse="true" raycaster="objects: .link"> </a-cursor> </a-entity>
<html> <head> <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script> </head> <body> <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="#ECECEC"></a-sky>
<a-link class="link" href="index.html" title="hello" on="click" position="-2 3 -4"></a-link>
<a-link class="link" href="index.html" title="bye" on="click" position="2 3 -4"></a-link>
<a-entity camera="active: true" look-controls position="0 2 0">
<a-cursor raycaster="objects: .link"></a-cursor>
</a-entity>
</a-scene></body> </html>
these would go in the body <a-link class="link" href="cool_recipes.html" title="Chick out these cool recipes" on="click" position="0 -11 -4"></a-link> <a-link class="link" href="wow.html" title="Please do not click this it would be illegal to do so." on="click" position="0 -1 -99"></a-link> <a-entity camera="active: true" look-controls position="3 10 20"></a-entity>
<!DOCTYPE html> <html> <head> <title>Sky Camera Controls</title> <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> </head> <body> <a-scene> <a-assets> <img id="city" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg"> <img id="city-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg"> </a-assets>; <!-- 360-degree image. --> <a-sky id="image-360" radius="10" src="#city"></a-sky> <!-- Image links. --> <a-link class="link" href="hello.html" title="Hello Page" on="click" position="0 5 -4"></a-link> <a-link class="link" href="bye.html" title="Bye Page" on="click" position="0 8 -4"></a-link> <!-- Camera + cursor. --> <a-entity camera look-controls> <a-cursor id="cursor" animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150" animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500" event-set__1="_event: mouseenter; color: springgreen" event-set__2="_event: mouseleave; color: black " fuse="true" raycaster="objects: .link"> </a-cursor> </a-entity> </a-scene> </body> </html>
<!DOCTYPE html> <html> <head> <title>Sky Camera Controls</title> <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> </head> <body> <a-scene> <a-assets> <img id="city" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg"> <img id="city-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg"> </a-assets>; <!-- 360-degree image. --> <a-sky id="image-360" radius="10" src="#city"></a-sky> <!-- Image links. --> <a-link class="link" href="hello.html" title="Hello Page" on="click" position="0 -1 -4"></a-link> <a-link class="link" href="index.html" title="Click Here!" on="click" position="0 -1 4"></a-link> <a-link class="link" href="index.html" title="Don't Click Here!" on="click" position="0 1 -4"></a-link> <!-- Camera + cursor. --> <a-entity camera look-controls position="0 5 0"> <a-cursor id="cursor" animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150" animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500" fuse="true" raycaster="objects: .link"> </a-cursor> </a-entity> </a-scene> </body> </html>