AR.js로 WebAR(8-2)Canvas Textures로 이미지 파일 순서대로 보이기
19184 단어 JavaScriptaframeWebARarjstech
개시하다
WebAR을 통해서 알게 된 것들을 적어주세요.
이번 응용 프로그램 AR.js WebAR로 해보기(8)Canvas Textures 의 스크립트는 1초 간격으로 이미지 파일 (.png) 을 전환하는 스크립트를 만들었습니다.
데모
출처
<!doctype HTML>
<html>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script src="js/aframe.min.js"></script>
<script src="js/aframe-ar.js"></script>
<body style="margin: 0px; overflow: hidden;">
<script>
AFRAME.registerComponent('canvas-texture', {
init: function()
{
this.canvas = document.querySelector("#myCanvas");
this.canvas.width = 512;
this.canvas.height = 512;
this.context = this.canvas.getContext('2d');
this.x = 200;
this.y = 100;
this.dx = 5;
this.dy = 3;
this.image = ["00.png","01.png","02.png","03.png","04.png","05.png","06.png","07.png","08.png","09.png"];
this.imgSrc = "";
this.glNo = 0;
this.dtsum = 0;
},
update: function(){
let material = this.el.getObject3D("mesh").material;
const chara = new Image();
chara.src = "images/" + this.image[ this.glNo ];
chara.onload = () => {
this.context.drawImage(chara, 0, 0);
if (!material.map)
return;
else
material.map.needsUpdate = true;
};
},
tick: function(t, dt)
{
this.dtsum += dt;
if( this.dtsum >= 1000 ){
this.dtsum = 0;
if( this.glNo >= this.image.length-1 ){
this.glNo = 0;
}else{
this.glNo += 1;
}
this.update();
}
}
});
</script>
<a-scene embedded vr-mode-ui="enabled: false;" arjs="debugUIEnabled: false;">
<a-assets>
<canvas id="myCanvas"></canvas>
</a-assets>
<a-marker type="pattern" url="data/hiro.patt">
<a-box
position="0 0.5 0"
material="src: #myCanvas; transparent: true; opacity: 0.95;"
canvas-texture>
</a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
설명하다
스크립트 처리를 살짝 설명해 드릴게요.
this.image에 이미지 파일을 저장할 파일 이름입니다.this.image = ["00.png","01.png","02.png","03.png","04.png","05.png","06.png","07.png","08.png","09.png"];
Reference
이 문제에 관하여(AR.js로 WebAR(8-2)Canvas Textures로 이미지 파일 순서대로 보이기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/zgw426/articles/547ec66b781076텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
