How to make a 360 photo using aframe-react?

[CasperHK]

How to use <Entity /> to show a 360 image? Is there any example? I have no idea by just looking into the document : https://aframe.io/docs/0.2.0/guide/

[ngokevin]

You could just use a normal <a-sky> DOM element.

If you're interested, here's how <a-sky> is composed: https://github.com/aframevr/aframe/blob/master/src/extras/primitives/primitives/a-sky.js

[CasperHK]

But if I want to use aframe-react lib to implement <a-sky>? How can I make it? Or, I better use aframe lib directly?

[HelrenPDM]

Hi Casper,

create a component that takes an input property of the image source (either a URL, or if you use the asset management system (https://aframe.io/docs/0.2.0/core/asset-management-system.html) an element selector).

In the componentrender function, you return an aframe-react Entity with a spherical geometry. Very basic would look like:

++++

import React from 'react'; import { Entity } from 'aframe-react';

const { Component, PropTypes, } = React;

export class SkySample extends Component { render() { return ( <Entity geometry={{ primitive: 'sphere', radius: 5000 }} material={{ src: this.props.src }} scale={"1 1 -1"} /> ); } }

SkySample.propTypes = { src: PropTypes.string.isRequired, };

export default SkySample;

++++

Whatever you additionally want to define, you can find in the documents. Like setting transparency to play with opacity and animations to fade it in and out.

hth,

Stephan

Am 11/07/16 um 14:02 schrieb Casper LI:

But if I want to use in |aframe-react| lib. How can I make it? Or, I better use |aframe| lib directly?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/ngokevin/aframe-react/issues/29#issuecomment-231715064, or mute the thread https://github.com/notifications/unsubscribe/ADx4uX8-dIi1kVDlRCtbjxBW4CumnI7Hks5qUjDbgaJpZM4JJAhZ.

_Stephan