Viro Enhanced 현실 소개
소개
증강현실기술(AR)은 컴퓨터가 생성한 이미지를 사용자의 실제 세계시도에 중첩하는 기술로 복합시도를 제공한다.이것은 간단한 휴대전화 화면에서 보거나(생각해보면Pokemon Go 스마트폰 기반의 가상현실headsets을 사용할 수 있다.
엑스포AR component is deprecated 이후Viro Media는 iOS나 안드로이드 장치에서 증강현실을 시작하고 실행하는 가장 빠르고 간단한 방법 중의 하나가 되었다.그들documentation은 인상적인 상세함과 유익했다.
설치 프로그램
OSX에 있는 경우:
brew install node
brew install watchman
apt-get install node
apt-get install watchman
npm install -g react-native-cli
npm install -g react-viro-cli
react-viro init ViroSample --verbose
cd ViroSample
npm start
_onInitialized(state, reason) {
if (state == ViroConstants.TRACKING_NORMAL) {
this.setState({
text : "Happy Birthday" // was "Hello World"
});
} else if (state == ViroConstants.TRACKING_NONE) {
// Handle loss of tracking
}
}
Viro Media App을 열고 왼쪽 상단의 아이콘을 누른 다음 "테스트 베드에 들어가기"를 누릅니다.터미널에서 위로 스크롤해서 ngrok URL을 찾으면 텍스트 필드에 입력하고 Go를 누르십시오.너는 너의 소식이 현장에 나타나는 것을 볼 수 있을 거야!
3D 객체
현재 핸드폰에 표시된 메시지download this file를 보았습니다. 압축을 풀고/ViroSample/js/폴더에 놓으십시오.
이제 HelloWorldSceneAR 컨텐츠를 교체합니다.js, 이 코드는 docs:
'use strict';
import React, { Component } from 'react';
import {StyleSheet} from 'react-native';
import {
ViroARScene,
ViroText,
ViroMaterials,
ViroBox,
Viro3DObject,
ViroAmbientLight,
ViroSpotLight,
ViroARPlaneSelector,
ViroNode,
ViroAnimations,
} from 'react-viro';
const createReactClass = require('create-react-class');
const HelloWorldSceneAR = createReactClass({
getInitialState() {
return {
text : "Initializing AR..."
};
},
render: function() {
return (
<ViroARScene onTrackingInitialized={()=>{this.setState({text : "Happy Birthday"})}}> // Again, change this text to your desired message
<ViroText text={this.state.text} scale={[.1, .1, .1]} height={1} width={4} position={[0, .5, -1]} style={styles.helloWorldTextStyle} />
<ViroAmbientLight color={"#aaaaaa"} />
<ViroSpotLight innerAngle={5} outerAngle={90} direction={[0,-1,-.2]} position={[0, 3, 1]} color="#ffffff" castsShadow={true} />
<Viro3DObject
source={require('./res/emoji_smile/emoji_smile.vrx')}
position={[0, 0, -1]}
scale={[.2, .2, .2]}
type="VRX"
dragType="FixedDistance" onDrag={()=>{}} // allows user to drag 3D object around with finger
/>
</ViroARScene>
);
},
});
const styles = StyleSheet.create({
helloWorldTextStyle: {
fontFamily: 'Arial',
fontSize: 50,
color: '#ffffff',
textAlignVertical: 'center',
textAlign: 'center',
},
});
module.exports = HelloWorldSceneAR;
평면 검사
이제 38줄에 추가
<ViroARPlaneSelector />다시 로드합니다.시험대를 저장하고 다시 불러옵니다.다른 평면에서 장치를 이동할 때 여러 평면이 발견되는 것을 볼 수 있습니다.
지금
jsx <ViroARPlaneSelector />가지다<ViroARPlaneSelector>
<Viro3DObject
source={require('./res/emoji_smile/emoji_smile.vrx')}
position={[0, .1, 0]}
scale={[.2, .2, .2]}
type="VRX"
dragType="FixedDistance" onDrag={()=>{}} />
</ViroARPlaneSelector>
지금 교체
<ViroARPlaneSelector>
<Viro3DObject
source={require('./res/emoji_smile/emoji_smile.vrx')}
position={[0, .1, 0]}
scale={[.2, .2, .2]}
type="VRX"
dragType="FixedDistance" onDrag={()=>{}} />
</ViroARPlaneSelector>
<ViroNode
position={[0, 0, -1]}
dragType="FixedToWorld"
onDrag={() => {}}
>
<Viro3DObject
source={require('./res/emoji_smile/emoji_smile.vrx')}
position={[0, 0.1, 0]}
scale={[0.2, 0.2, 0.2]}
type="VRX"
/>
</ViroNode>
입자
이제 추가particles!
우선download the particles res.zip file, 압축을 풀고 압축을 풀린 내용을
/ViroSample/js/res/에 추가합니다.이제 HelloWorldSceneAR의 코드를 교체합니다.js에는 다음과 같은 내용이 있습니다.
'use strict';
import React, { Component } from 'react';
import {StyleSheet} from 'react-native';
import PropTypes from 'prop-types';
import {
ViroSceneNavigator,
ViroARScene,
ViroNode,
ViroAmbientLight,
ViroDirectionalLight,
ViroText,
ViroAnimations,
ViroParticleEmitter,
Viro3DObject,
} from 'react-viro';
'use strict';
const createReactClass = require('create-react-class');
const MainScene = createReactClass({
getInitialState() {
return {
};
},
render: function() {
return (
<ViroARScene>
<ViroAmbientLight color={"#aaaaaa"} />
<ViroDirectionalLight color="#ffffff" direction={[0,-1,-.2]}/>
<ViroNode position={[0,-.5,-1]} scale={[.5,.5,.5]} dragType="FixedToWorld" onDrag={()=>{}}>
<Viro3DObject
source={require('./res/object_bday_cake/object_bday_cake.vrx')}
type="VRX"
/>
<ViroNode position={[0.18,.67,0.004]} scale={[.4,.4,.4]}>
<ViroParticleEmitter
duration={1200}
visible={true}
run={true}
loop={true}
fixedToEmitter={false}
image={{
source:require("./res/particle_fire.png"),
height:0.3,
width:0.3,
bloomThreshold:0.0
}}
spawnBehavior={{
particleLifetime:[500,500],
emissionRatePerSecond:[30, 40],
maxParticles:800
}}
particleAppearance={{
opacity:{
initialRange:[0.2, 0.2],
factor:"time",
interpolation:[
{endValue:0.2, interval:[0,200]},
{endValue:0.0, interval:[200,500]},
]
},
scale:{
initialRange:[[1,1,1], [1,1,1]],
factor:"time",
interpolation:[
{endValue:[0,0,0], interval:[150,500]},
]
},
}}
particlePhysics={{
velocity:{initialRange:[[0,.3,0], [0,.5,0]]}
}}
/>
</ViroNode>
</ViroNode>
</ViroARScene>
);
},
});
module.exports = MainScene;
npm startoncemore, 당신의 새 테스트 침대를 다시 열어 보세요!너는 생일 케이크를 볼 수 있을 것이다. 촛불 꼭대기에 생동감 넘치는 불꽃이 있다.
이제 개체에 애니메이션 스모그를 추가합니다.HelloWorldSceneAR의 코드를 다시 교체합니다.js에는 다음과 같은 내용이 있습니다.
'use strict';
import React, { Component } from 'react';
import {StyleSheet} from 'react-native';
import PropTypes from 'prop-types';
import {
ViroSceneNavigator,
ViroARScene,
ViroNode,
ViroAmbientLight,
ViroDirectionalLight,
ViroText,
ViroAnimations,
ViroParticleEmitter,
Viro3DObject,
} from 'react-viro';
'use strict';
const createReactClass = require('create-react-class');
const MainScene = createReactClass({
getInitialState() {
return {
};
},
render: function() {
return (
<ViroARScene>
<ViroAmbientLight color={"#aaaaaa"} />
<ViroDirectionalLight color="#ffffff" direction={[0,-1,-.2]}/>
<ViroNode position={[0, 0, -2]} scale={[.5, .5, .5]} dragType="FixedToWorld" onDrag={()=>{}}>
<Viro3DObject
source={require('./res/emoji_angry_anim/emoji_angry_anim.vrx')}
resources={[require('./res/emoji_angry_anim/emoji_angry_diffuse.png'),
require('./res/emoji_angry_anim/emoji_angry_normal.png'),
require('./res/emoji_angry_anim/emoji_angry_specular.png')]}
type="VRX"
animation={{name:"02", run:true, loop:true,}}
/>
<ViroParticleEmitter
position={[-.6, 0, .2]}
scale={[.4, .2, .2]}
duration={1100}
delay={1100}
visible={true}
run={true}
loop={true}
fixedToEmitter={true}
image={{
source:require("./res/particle_smoke.png"),
height:1,
width:1,
}}
spawnBehavior={{
particleLifetime:[500,500],
emissionRatePerSecond:[200,200],
maxParticles:200,
spawnVolume:{
shape:"box",
params:[.7, .1, .1],
spawnOnSurface:false
},
}}
particleAppearance={{
opacity:{
initialRange:[0.0, 0.0],
interpolation:[
{endValue:0.4, interval:[0,200]},
{endValue:0.0, interval:[900,1500]}
]
},
}}
particlePhysics={{
velocity:{initialRange:[[-2,2,0], [-2,-2,0]]},
acceleration:{initialRange:[[0,0,0], [0,0,0]]}
}}
/>
<ViroParticleEmitter
position={[.6, 0, .2]}
scale={[.4, .2, .2]}
duration={1100}
delay={1100}
visible={true}
run={true}
loop={true}
fixedToEmitter={true}
image={{
source:require("./res/particle_smoke.png"),
height:1,
width:1,
}}
spawnBehavior={{
particleLifetime:[500,500],
emissionRatePerSecond:[200,200],
maxParticles:200,
spawnVolume:{
shape:"box",
params:[.7, .1, .1],
spawnOnSurface:false
},
}}
particleAppearance={{
opacity:{
initialRange:[0.0, 0.0],
interpolation:[
{endValue:0.4, interval:[0,200]},
{endValue:0.0, interval:[900,1500]}
]
},
}}
particlePhysics={{
velocity:{initialRange:[[2,2,0], [2,-2,0]]},
acceleration:{initialRange:[[0,0,0], [0,0,0]]}
}}
/>
</ViroNode>
</ViroARScene>
);
},
});
module.exports = MainScene;
매개변수 조정
보존, 운행
npm start, 분노의 웃는 얼굴과 연기가 그의 귀에서 수시로 나오는 것을 보아야 한다.이제 설정을 처리해 보겠습니다.88 행에서
scale 매개 변수를 초기 값[.4, .2, .2]에서 [.8, .4, .4]으로 변경하면 왼쪽에서 나오는 연기보다 오른쪽에서 나오는 연기가 더 많습니다.
만약 우리가 89행에서
duration 파라미터를 변경하고 2200 의 값이 아닌 1100 의 값을 사용한다면 오른쪽의 스모그는 왼쪽의 지속 시간보다 두 배 발사될 것이다. 따라서 현재 그들은 동시에 발사한다. 오른쪽의 지속 시간은 왼쪽의 두 배이고 왼쪽은 오른쪽에서 멈출 때 다시 시작한다.그리고 왼쪽이 멈추면 오른쪽이 시작됩니다.따라서 이들은 동시에 발사와 다른 쪽이 멈출 때 다른 발사와 교체되기 시작한다.
현재 104줄에서
emissionRatePerSecond:[200,200], 를 emissionRatePerSecond:[800,800], 로, 105줄에서 maxParticles:200, 을 maxParticles:800, 로 변경합니다.현재, 오른쪽에서 나오는 연기는 왼쪽의 연기보다 훨씬 두껍고, 더 많이 채워진다. 입자 수는 왼쪽의 4배이다!
현재 97줄에서 우리는
source:require("./res/particle_smoke.png"),
을 source:require("./res/particles_flame.png"),
로 바꿀 것이다.이제 입자가 오른쪽에서 뿜어져 나오는 불처럼 보이고, 왼쪽은 여전히 연기가 난다.
왼쪽을 변경하려면 위
<ViroParticleEmitter></ViroParticleEmitter> 태그 내의 매개변수, 즉 43-84 행 사이의 매개변수만 변경합니다.결론
ViroReact는 스마트폰에서 AR을 빠르고 간단하게 설정하는 방법입니다.오늘 우리는 초기 설정을 완성하고 텍스트를 표시하며 3D 대상을 표시하고 입자를 표시하며 입자의 행동 방식을 변경했다.사용자 정의를 위해 Adobe Photoshop 등 사진 편집기를 사용하여
/res 폴더의 이미지 파일을 처리하는 것을 권장합니다.보다 창의적인 아이디어를 얻으려면 추가 portals to your AR project 를 시도하십시오.
Reference
이 문제에 관하여(Viro Enhanced 현실 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/peterklingelhofer/an-introduction-to-augmented-reality-with-viro-1nf4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
