PlayCanvas에 유튜브 포함 비디오

2D Screen에 PlayCanvas를 사용한 유튜브 비디오 포함

최근에는 플레이캔버스의 2D 스크린 기능으로 유튜브 영상을 끼워 넣으려는 사람들이 많아 플레이캔버스에 유튜브 끼워 넣는 기능을 사용하는 방법을 소개했다.

실행 결과는 여기에 있다.
Big BuckBurny를 불러오는 중입니다.
https://playcanv.as/p/wheFl8iO/

프로젝트 정보

이번 프로젝트의 장면은 여기에 있다.
https://playcanvas.com/project/725582/
완성된 경치는 2D Screen으로만 구성됩니다.

-Root
--2D Screen 

장면을 구축하다.

1. 2D 화면 추가

왼쪽 위HIERARCHY에서 +를 클릭하고 User Interface→2D Screen를 선택하여 화면을 추가합니다.

2. SCRIPT 구성 요소 증가

그런 다음 SCRIPT 구성 요소를 추가합니다.
2D Screen이 추가된 상태에서 SCRIPT를 추가합니다.

ADD COMPONENT

를 클릭

Script 구성 요소 추가

3. 프로젝트에 스크립트 추가

다음에 스크립트를 추가합니다.
오른쪽 클릭

화면 아래ASSETS

New Asset에서 Script

선택

html-element.js를 통해 제작

4. 스크립트 설명

만들기html-element.js에서 열린 코드 편집기를 클릭하여 다음 코드를 설명합니다.

설명 스크립트

Ctrl+s(Mac의 경우 COMMAND+s)로 저장

html-element.js

/*jshint esversion: 6, asi: true, laxbreak: true*/
const HtmlElement = pc.createScript('htmlElement');
HtmlElement.attributes.add("embededUrl", {"type": "string", default: "https://www.youtube.com/embed/aqz-KE-bpKQ"});

HtmlElement.prototype.initialize = function() {
  if(this.app.touch){
    this.app.touch.on(pc.EVENT_TOUCHEND, () => {
        this.entity.enabled = false
    })
  }
  this.app.mouse.on(pc.EVENT_MOUSEDOWN, () => {
      this.entity.enabled = false
  })
 
    
  this.once("enable", () => {
      this.show()
  })
  
  this.once("disable",() => {
      this.hide()
  });
    
  this.show()

 };


HtmlElement.prototype.hide = function() {
    document.getElementById("youtube-element").remove();
}

HtmlElement.prototype.show = function() {
    const {x: width, y:height} = this.entity.screen.resolution;
    const style = `
    <style>
    #youtube-element .html-element {
        width: ${width}px;
        height: ${height}px;
        position:absolute;
        display:flex;
        flex: 1;
        background:transparent;
        z-index:5;
        color: #fff;
        justify-content:center;
        align-items:center;
        flex-direction:column;
    };
    </style>`;
    const html =`
    <div id="youtube-element">
        ${style}
        <div class="html-element">
                <h1 class="text">YouTubeビデオ</h1>
                <iframe width=${width  *0.64} height=${width * 0.32} src="${this.embededUrl}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>
  `
  const body = document.getElementsByTagName("body")[0]
  body.insertAdjacentHTML("afterbegin", html);
}

라이센스에 스크립트 적용

SCRIPT 구성 요소가 추가된 2D 화면에 설명된 코드를 적용합니다.

SCRIPT 구성 요소의 ADD SCRIPT에서 httml Element

을 선택합니다.

Parse 버튼

클릭
이렇게 각본의 기술이 완성되었다.embededUrl에서 유튜브→매립 클릭 시 표시되는 링크를 공유하면 영상을 채울 수 있다.
실행 결과:
https://playcanv.as/p/wheFl8iO/
이번 보도에서 의견, 문제 등이 있다면@mxcn3 전에 제출해 주십시오.
PlayCanvas 개발에서 참고할 만한 기사 일람표입니다.

플레이캔버스 입문. - 모델 제작~ 게임 시작 전.

JavaScript를 사용하여 슬롯을 설치합니다.【PlayCanvas】

3분 동안 3D 모형을 만드는 뷰어[첫 번째 PlayCanvas]

- PlayCanvas 코드 편집에서 es6https://qiita.com/yushimatenjin/items/a61a21c64c1c1a550dd4)
- [Gulp 플러그인을 쓰면 PlayCanvas 개발이 아주 편리해집니다.] (https://qiita.com/yushimatenjin/items/5f0f178e8a4ba4a5ee57)
- PlayCanvas Editor에 외부 스크립트를 읽는 새로운 기능이 추가되었으므로 개발 방법을 고려합니다. - Redux 추가)(https://qiita.com/yushimatenjin/items/7a64220cceac66843d7d)
- [React Native+Play Canvas를 사용하여 폭발속도로 스마트폰 게임 생성]https://qiita.com/yushimatenjin/items/7c7ad5d35473c11f32f2)
- [PlayCanvas 편집에 HTML, CSS 포함 방법] (https://qiita.com/yushimatenjin/items/814b4a32db53397219df)
- [일본 PlayCanvas 사용자회 - Slack](https://join.slack.com/t/playcanvasjphq/shared_invite/zt-9aihkaep-TNA04tqgvYDFhBJABLLckw)
기타 관련

PlayCanvas 태그가 있는 기사 일람

플레이캔버스를 만든 유저회의 슬랙!

만약 약간의 흥미가 있다면, 우리는 사용자 간의 해결 방안인 플레이 캔버스를 추진하기 위해 슬랙을 만들었습니다. 가능하면 참가해 주십시오.

일본 플레이캔버스 이용자회. - 슬랙.