How to make a 360 photo using aframe-react? about aframe-react

[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
#29 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/ADx4uX8-dIi1kVDlRCtbjxBW4CumnI7Hks5qUjDbgaJpZM4JJAhZ.

_Stephan