Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Ejercicio1 Paso Paso

    Cargado por

    JhonKevinMamaniPecho
    5 vistas2 páginas
    El documento describe cómo crear una escena 3D básica en A-Frame y realizar varias modificaciones a sus componentes. Se comienza con una esfera, cubo, cilindro y plano, y se cambia el color del cielo y la opacidad de la esfera. Luego se agrega una textura al cubo, una imagen de fondo, y una animación de rotación. Finalmente, se incluye lluvia mediante un componente externo y se reemplaza el fondo por un video.

    Descripción original:

    Título original

    ejercicio1_paso_paso

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    El documento describe cómo crear una escena 3D básica en A-Frame y realizar varias modificaciones a sus componentes. Se comienza con una esfera, cubo, cilindro y plano, y se cambia el color del cielo y la opacidad de la esfera. Luego se agrega una textura al cubo, una imagen de fondo, y una animación de rotación. Finalmente, se incluye lluvia mediante un componente externo y se reemplaza el fondo por un video.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    5 vistas2 páginas

    Ejercicio1 Paso Paso

    Cargado por

    JhonKevinMamaniPecho
    El documento describe cómo crear una escena 3D básica en A-Frame y realizar varias modificaciones a sus componentes. Se comienza con una esfera, cubo, cilindro y plano, y se cambia el color del cielo y la opacidad de la esfera. Luego se agrega una textura al cubo, una imagen de fondo, y una animación de rotación. Finalmente, se incluye lluvia mediante un componente externo y se reemplaza el fondo por un video.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 2

    A-FRAME:

    Ejercicio1.html:

    <html>
    <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    </head>
    <body>
    <a-scene>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF205E"></a-sphere>
    <a-box position="-1 0.5 -3" rotation="0 45 0" width="1" height="1" depth="1" color="#FFC650"></a-box>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#4CC3D9"></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-scene>
    </body>
    </html>

    Cambiar el cielo: sky a verde:


    1. <a-sky color="green"></a-sky>
    -Podemos movernos:
    Mover la caja a la derecha y flotar (position :X Y)
    1. <a-box position="1 1.5 -3" rotation="0 45 0" width="1" height="1" depth="1" color="#FFC650"></a-box>
    -Cambiamos con puro html.
    Podemos cambiar la opacidad a la esfera (sphere), con el componente: opacity (tiene valor de 0 a 1):
    1. <a-sphere position="0 1.25 -5" radius="1.25" color="#EF205E" opacity=".3"></a-box>
    Podemos cambiar el ancho de la caja (box)(se mide en METROS):
    1. <a-box position="1 1.5 -3" rotation="0 45 0" width="2" height="1" depth="1" color="#FFC650"></a-box>
    Podemos cambiar por ejemplo el color de la caja por una textura (imagen), utilizando la propiedad: src
    1. <a-box position="1 1.5 -3" rotation="0 45 0" width="2" height="1" depth="1"
    src="https://cdn.glitch.com/5b5aafb3-2f29-4383-9789-e78468f2a779%2Funac.png?v=1605934817556" ></a-
    box>
    Cambiamos ahora el cielo, pero en vez de un fondo de color, agregamos una imagen:
    2. <a-sky src="https://cdn.glitch.com/5b5aafb3-2f29-4383-9789-e78468f2a779%2Fpano.jpg?
    v=1605927830909"></a-sky>
    Ahora, procedemos a realizar una rotación del cubo, para eso agregamos en el cubo (box): desde la posición 0 0 0 hasta
    0 90 0, valores de x,y,z, que sea de manera alternada (izq-derecha),de manera infinita (loop).
    3. <a-box position="1 1.5 -3" rotation="0 45 0" width="1" height="1" depth="1" color="#FFC650"
    animation="property: rotation; from: 0 0 0; to: 0 90 0; dir:alternate; loop: true">
    Agregar un COMPONENTE externo (creado por la comunidad), llamado RAIN (lluvia). Para eso agregar el javascript.
    4. <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://rawgit.com/takahirox/aframe-rain/master/build/aframe-rain.min.js"></script>
    </head>
    Y además agregar la palabra: RAIN en el tag <a-scene rain>, quedando el código hasta el momento:
    <html>
    <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://rawgit.com/takahirox/aframe-rain/master/build/aframe-rain.min.js"></script>
    </head>
    <body>
    <a-scene rain>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF205E" opacity=".3"></a-sphere>
    <a-box position="1 1.5 -3" rotation="0 45 0" width="1" height="1" depth="1" src="https://cdn.glitch.com/5b5aafb3-
    2f29-4383-9789-e78468f2a779%2Funac.png?v=1605934817556" animation="property: rotation; from: 0 0 0; to: 0 90 0;
    dir:alternate; loop: true">
    </a-box>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#4CC3D9"></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
    <a-sky src="https://cdn.glitch.com/5b5aafb3-2f29-4383-9789-e78468f2a779%2Fpano.jpg?v=1605927830909"></a-
    sky>
    </a-scene>
    </body>
    </html>

    Ejercicio2:

    <html>
    <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    </head>
    <body>
    <a-scene>
    <a-sphere
    position="0 1.25 -5"
    radius="1.25"
    color="#EF205E"
    ></a-sphere>
    <a-sky src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg"></a-sky>
    </a-scene>
    </body>
    </html>

    Cambios:
    Ahora modificamos el fondo de la sphera un video para hacerlo mas real:
    <a-sky src="https://ucarecdn.com/fadab25d-0b3a-45f7-8ef5-85318e92a261/"></a-sky>

    Ahora queda asi:


    <html>
    <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    </head>
    <body>
    <a-scene>
    <a-sphere
    position="0 1.25 -5"
    radius="1.25"
    color="#EF205E"
    ></a-sphere>
    <a-sky src="https://ucarecdn.com/fadab25d-0b3a-45f7-8ef5-85318e92a261/"></a-sky>
    </a-scene>
    </body>
    </html>

    También podría gustarte