Scribd
Upload
20 views

WebXR - Week 12

The document describes how to create basic HTML tags and elements like the <html>, <head>, and <body> tags. It also covers how to add headings, paragraphs, images, and divisions to a webpage. The document then explains how to build 3D scenes and objects for virtual reality using the A-Frame library, including how to add 3D shapes, textures, lighting, and basic animations. Key topics include the <a-scene>, <a-box>, <a-sphere>, and <a-sky> tags for constructing 3D VR environments and objects with A-Frame.

Uploaded by

shiven.chourasia09
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

WebXR - Week 12

The document describes how to create basic HTML tags and elements like the <html>, <head>, and <body> tags. It also covers how to add headings, paragraphs, images, and divisions to a webpage. The document then explains how to build 3D scenes and objects for virtual reality using the A-Frame library, including how to add 3D shapes, textures, lighting, and basic animations. Key topics include the <a-scene>, <a-box>, <a-sphere>, and <a-sky> tags for constructing 3D VR environments and objects with A-Frame.

Uploaded by

shiven.chourasia09
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

WebXR

https://codepen.io

Basic HTML Tags


❖ HTML Tag
➢ <html>
➢ </html>
❖ Head Tag
➢ <head>
➢ </head>
❖ Body Tag
➢ <body>
➢ </body>
❖ Title of the webpage (inside head tag)
➢ <title>
➢ </title>
❖ Headings (inside body tag)
➢ <h1>
➢ </h1>
❖ Paragraphs (inside body tag)
➢ <p>
➢ </p>
❖ Insert image in webpage
➢ <img src = “Link of image” width = “500px” height = “200px”>
❖ Division tag, to create divisions of web page
➢ <div style = “float: right;”>
➢ </div>
❖ Create 2D Objects
➢ <div style = “height: 50px; width: 50PX; background-color: red; margin-top:
10px”>
➢ </div>
➢ <div style = “height: 50px; width: 50PX; background-color: blue; margin-top:
10px””>
➢ </div>
➢ <div style = “height: 50px; width: 50PX; background-color: green; margin-top:
10px””>
➢ </div>

A Frame for 3D objects


❖ Add A frame script inside head tag
➢ <script src="https://aframe.io/releases/1.3.0/aframe.min.js">
➢ </script>
❖ Add A - Scene tag inside body tag
➢ <a-scene>
➢ </a-scene>
❖ Add 3D object inside a-scene tag
➢ <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>
❖ Creating an entity to create 3D object inside it
➢ <a-entity>
➢ </a-entity>
❖ Apply texture to 3D object
➢ <a-sphere position="0 1.25 -5" radius="1.25" src = “Image URL”>
➢ </a-sphere>
❖ Change skybox image
➢ <a-sky color="#ECECEC">
➢ </a-sky>
Animations

Property Description Default Values

Value

property Property to animate. Can be a component name, a


dot-delimited property of a component (e.g.,
material.color), or a plain attribute.

isRawPropert Flag to animate an arbitrary object property outside of false


y A-Frame components for better performance. If set to true,
for example, we can set property to like
components.material.material.opacity. If
property starts with components or object3D, this will
be inferred to true.
from Initial value at start of animation. If not specified, the current null
property value of the entity will be used (will be sampled on
each animation start). It is best to specify a from value when
possible for stability.

to Target value at end of animation. null

type Right now only supports color for tweening ‘’


isRawProperty color XYZ/RGB vector values.

delay How long (milliseconds) to wait before starting. 0

dir Which dir to go from from to to. normal alternate,


reverse

dur How long (milliseconds) each cycle of the animation is. 1000

easing Easing function of animation. To ease in, ease out, ease in easeInQuad See easings
and out.

elasticity How much to bounce (higher is stronger). 400

loop How many times the animation should repeat. If the value is 0
true, the animation will repeat infinitely.

round Whether to round values. false


startEvents Comma-separated list of events to listen to trigger a restart null
and play. Animation will not autoplay if specified.
startEvents will restart the animation, use pauseEvents
to resume it. If there are other animation components on the
entity animating the same property, those animations will be
automatically paused to not conflict.

pauseEvents Comma-separated list of events to listen to trigger pause. null


Can be resumed with resumeEvents.

resumeEvents Comma-separated list of events to listen to trigger resume null


after pausing.

autoplay Whether or not the animation should autoplay. Should be true


specified if the animation is defined for the
animation-timeline component.

enabled If disabled, animation will stop and startEvents will not trigger true
animation start.

Multiple Animations

The component’s base name is animation. We can attach multiple animations to one
entity by name-spacing the component with double underscores (__):

<a-entity animation="property: rotation"

animation__2="property: position"

animation__color="property: material.color"></a-entity>
Easings

Easings define the accelerations and speed throughout the cycle of the animation.

easeIn easeOut easeInOut Others

easeInQuad easeOutQuad easeInOutQuad linear

easeInCubic easeOutCubic easeInOutCubic

easeInQuart easeOutQuart easeInOutQuart

easeInQuint easeOutQuint easeInOutQuint

easeInSine easeOutSine easeInOutSine

easeInExpo easeOutExpo easeInOutExpo

easeInCirc easeOutCirc easeInOutCirc

easeInBack easeOutBack easeInOutBack

easeInElastic easeOutElastic easeInOutElastic

Events
Property Description

animationbegin Animation began. Event detail contains name of animation.

animationcomplete Animation completed. Event detail contains name of animation.

animationcomplete__ Animation completed if animation has an ID (e.g., animation__click).

Members

Accessed as el.components.animation.<MEMBER>.

Member Description

animation anime.js object.

config Config passed to anime.js.

❖ JS script for animation (Inside head tag)


➢ <script
src="https://unpkg.com/aframe-environment-component/dist/afram
e-environment-component.min.js"></script>
❖ Adding property for animation inside a-entity tag
➢ <script
src="https://unpkg.com/aframe-environment-component/dist/aframe-environment
-component.min.js"></script>

Creating Solar System


❖ Template for planets
➢ <!Planet Name>
➢ <a-entity>
➢ <a-sphere radius = "2" scr = "Source of texture of planet"></a-sphere>
➢ </a-entity>
❖

You might also like