The virtual reality

images virtual box

In this post we analyze the virtual reality and specifically of the Web Framework A-FRAME. We use A-FRAME for inserting image into web pages. To do this we can use resources already created or create new with special library. In below window there is an example.

Read more
Now, the library available
insert into html page the script :

https://aframe.io/releases/0.6.1/aframe.min.js

Then you must insert the others library for create new images or for use old images :

https://unpkg.com/aframe-animation-component@3.2.1/dist/aframe-animation-component.min.js https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js https://unpkg.com/aframe-gradient-sky@1.0.4/dist/gradientsky.min.js https://unpkg.com/aframe-extras.ocean@%5E3.5.x/dist/aframe-extras.ocean.js

If you want use images already available, you must insert the following code : comandi vr We can also include 360 degree photos. Below there is an example: Furthermore, with the javascript library Three.Js we can create any object. The frame below, for example, is been created with Three.js and it moves with the scroll of the mouse. Click on the following button for change the images into the frame.
Now, we see how create static or animated images with Three.js. First of all, we have need to define into an script the objects SCENE, CAMERA and RENDERER.
The SCENE object identifies the space where will be insert the others objects, while the object CAMERA defines how to view the images and the object RENDERER defines how publicat the images created. Naturally, for every object, there will be others parameter to insert how we'll see in the later examples. Others objects to define are GEOMETRY (as box and spheres or the geometry figures), MATERIAL (complement object as, for example , color parameter) and MESH. This MESH takes object GEOMETRY and apply to it the object MATERIAL. Then we must take the object created with MESH and we catch it with SCENE with the command Camera.position.z = 5 attention to assign a different position at the objects, otherwise everyone has the coordinate (0,0,0). Now we must do the RENDERER for viewing into the video the object created or, if we need an animation, we can insert it simultaneously. Animate for create an animation and RENDERER. RENDER(scene, camera) for view created object without animation. In the image below we see the html code used. javascript command
This is the result of the same code in javascript.