aframe-stereo-component - GitLite

KO | EN

gitlite — search

#ai #llm #machine-learning #rust #deep-learning #docker #macos #nodejs #cli #kubernetes #awesome-list #security #pytorch #mcp

aframe-stereo-component

(★ 146)

aframe.io component to enable separate eye rendering of objects, plus stereo video rendering (full 360 or half dome)

파일 탐색기

최종 버전 다운로드 (.zip)

- FUNDING.yml
- .gitkeep
- aframe-stereo-component.js
- aframe-stereo-component.min.js
- - index.html
- - index.html
- - index.html
- build.js
- index.html
- main.js
- unboil.js
- __init.test.js
- helpers.js
- index.test.js
- karma.conf.js
.gitignore
browser.js
cubes_stereo.png
foto_stereo.png
index.js
LICENSE
package.json
README.md
video_stereo.png

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/c-frame/aframe-stereo-component

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd aframe-stereo-component

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install aframe-stereo-component

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## aframe-stereo-component

A stereo component for [A-Frame](https://aframe.io) VR.

This component builds on the ['layer' concept of THREE.js] (https://github.com/mrdoob/three.js/issues/6437) and is really two components in one:
- **'stereocam' component**, with tells an aframe camera which 'eye' to render in case of monoscopic display (without 'Entering VR'). The camera will render all entities without the stereo component, but if it encounters an entity with the 'stereo' component active, it will render only those in the same eye as defined here.
- **'stereo' component**, which tells aframe to include an entity in either the 'right' eye or 'left' eye (you can also specify 'both', but this has the same effect as not using the 'stereo' component. *The component also enables stereoscopic video rendering projected on spheres*, so if a sphere (see example below) has the 'stereo' component enabled, if will only project half of the video texture (which one depends on the 'eye' property), so the result is stereoscopic video rendering, if you include two spheres. The component expects videos in side-by-side equirectangular projection (see the video example below).

If a video is used in a sphere with the 'stereo' component active, **the component will also enable playback in mobile devices, by attaching a 'click' event on the rendering canvas**. Thus, in mobile devices you must click on the screen (via cardboard v2.0 button or with your finger) for the video to start playing. This can be disabled by setting the `playOnClick` variable to false.

**NOTE: for some reason (?) if the video element is put inside scene 'assets' tag, a cross-origin issue is raised **

You can see demos for both examples below [here] (http://oscarmarinmiro.github.io/aframe-stereo-component)

### 'stereocam' component properties (only for camera)

| Property | Description | Default Value |
| -------- | ----------- | ------------- |
| eye      |  which eye is enabled in monoscopic display ('left' or 'right')           | 'left               |

### 'stereo' component properties (for other entities)
| Property | Description | Default Value |
| -------- | ----------- | ------------- |
| eye      |  in which eye the entity is render VR mode ('left' or 'right')           | 'left               |
| mode     | this property is for spheres holding a video texture. mode can be 'full' or 'half', depending if the original video is full 360 or only spans 180 degrees horizontally (half-dome)| 'full' |
| split    | this property indicates whether to split the video texture horizontally (left and right hemispheres), or vertically, (top and bottom hemispheres) | 'horizontal'
| playOnClick | this property indicates whether the video will automatically be played on clicking on the canvas | true

### Usage

!["Stereoscopic video"](https://raw.githubusercontent.com/c-frame/aframe-stereo-component/master/video_stereo.png)

#### Browser Installation. 360 stereoscopic video example

Install and use by directly including the [browser files](dist):

```html
<html>
<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
  <script src="aframe-stereo-component.js.min.js"></script>
</head>
<body>
    <a-scene>

<video id="Mary" src="examples/basic_development/textures/MaryOculus.webm" loop></video>

<a-camera position="0 0 10" stereocam="eye:left;"></a-camera>

<a-entity geometry="primitive: sphere;
                      radius: 100;
                      segmentsWidth: 64;
                      segmentsHeight: 64;"
              material="shader: flat; src: #Mary; side:back;"
              scale="-1 1 1" stereo="eye:left">
      </a-entity>

<a-entity geometry="primitive: sphere;
                      radius: 100;
                      segmentsWidth: 64;
                      segmentsHeight: 64;"
              material="shader: flat; src: #Mary; side:back;"
              scale="-1 1 1" stereo="eye:right">
      </a-entity>

</a-scene>

</body>
 </html>

```
!["Stereoscopic images"](https://raw.githubusercontent.com/c-frame/aframe-stereo-component/master/foto_stereo.png)
#### Browser Installation. Stereoscopic panoramas (images)

if you have an over/under stereo panorama file, you can follow [this instructions](http://bl.ocks.org/bryik/4bf77096d3af66b11739caaf01393837) to split it

Install and use by directly including the [browser files](dist):

```html
<html>
  <head>
    <title>My A-Frame Scene</title>
    <script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
    <script src="aframe-stereo-component.js.min.js"></script>
  </head>
  <body>

<a-scene antialias="true">
      
      <a-assets>
        <img id="left" src="http://i.imgur.com/YAaxpv6.jpg">
        <img id="right" src="http://i.imgur.com/JUxTnzK.jpg">
      </a-assets>

<a-entity camera look-controls position="0 0 0" stereocam="eye:left;"></a-entity>

<a-sky id="sky1" src="#left" stereo="eye:left"></a-sky>
      <a-sky id="sky2" src="#right" stereo="eye:right"></a-sky>

<-- or alternatively -->

</a-scene>

</body>
</html>
```

!["Two cubes in a scene, each one for each eye"](https://raw.githubusercontent.com/c-frame/aframe-stereo-component/master/cubes_stereo.png)

#### Browser Installation. Two cubes, each one for each eye

Install and use by directly including the [browser files](dist):

```html
<html>
<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
  <script src="aframe-stereo-component.js.min.js"></script>
</head>
<body>
  <a-scene>
      <a-sky color="#FFF"></a-sky>
      <a-light color="#333" position="0 5 0" type="ambient" intensity="0.2"></a-light>
      <a-light type="point" color="#EEE" intensity="1.0" position="3 3 10"></a-light>

<a-camera position="0 0 10" stereocam="eye:left;">
        <a-cursor color="black"></a-cursor>
      </a-camera>

<a-entity geometry="primitive: box" material="color: #C03546" stereo="eye:left"></a-entity>
      <a-entity geometry="primitive: box" material="color: #3546C0" position="0 5 0" stereo="eye: right"></a-entity>

</a-scene>

</body>
 </html>

```

#### Stereoscopic videos that are split vertically - Top and Bottom

Install and use by directly including the [browser files](dist):

```html
<html>
<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
  <script src="aframe-stereo-component.js.min.js"></script>
</head>
<body>
  <a-scene>
  
  <video id="video" src="path/to/top-bottom/mp4" loop></video>

<a-camera position="0 0 10" stereocam="eye:left;"></a-camera>

<a-entity geometry="primitive: sphere; radius: 100; segmentsWidth: 64; segmentsHeight: 64;"
        material="shader: flat; src: #video; side:back;"
        scale="-1 1 1" stereo="eye:left; split: vertical">
    </a-entity>

<a-entity geometry="primitive: sphere; radius: 100; segmentsWidth: 64; segmentsHeight: 64;"
        material="shader: flat; src: #video; side:back;"
        scale="-1 1 1" stereo="eye:right; split: vertical">
    </a-entity>
  </a-scene>
 </body>
 </html>
```

#### NPM Installation

Install via NPM:

```bash
npm install aframe-stereo-component
```

Then register and use.

```js
var AFRAME = require('aframe');
var stereoComponent = require('aframe-stereo-component').stereo_component;
var stereocamComponent = require('aframe-stereo-component').stereocam_component;

AFRAME.registerComponent('stereo', stereoComponent);
AFRAME.registerComponent('stereocam', stereocamComponent);
```

#### Credits

The video used in the examples is from http://pedrofe.com/rendering-for-oculus-rift-with-arnold/, from the project http://www.meryproject.com/

Boilerplate code from https://github.com/ngokevin/aframe-component-boilerplate

Code for adjusting sphere face vertex is from https://github.com/mrdoob/three.js/blob/master/examples/webvr_video.html

Stereo images from [Dougstar02](https://www.reddit.com/r/oculus/comments/4yrmm2/i_took_some_360_ansel_stereo_screenshots_from_the/)