2019-02-06
Feb 6 In-Class Exercise Thread.
Hi Everyone,
Post your solutions to the Feb 6 In-Class Exercise to this thread.
Best,
Chris
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>
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>
<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>
Sky Camera Controls
;
<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>
<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>
<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>
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 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>
2019-02-11
<!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>
<!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>
(c) 2025 Yioop - PHP Search Engine