대화식 웹 사이트 또는 HTML 컨텐츠를 장면에 추가하려면

웹 엔진을 만들어 대화식 웹 사이트 또는 HTML 컨텐츠를 VRED 장면에 추가합니다. 컨텐츠가 실시간으로 재질 텍스처 채널로 스트리밍되고 재질의 속성을 사용하여 표시됩니다.

웹 엔진 만들기

  1. 장면 > 미디어 편집기를 선택하여 미디어 편집기를 엽니다.
  2. 아래 아이콘 막대에서 + 아이콘을 선택하여 웹 엔진을 만듭니다.
  3. 웹 엔진의 이름을 지정합니다.
  4. 폭 및 높이 설정:
    • URL에서 HTML 컨텐츠를 사용하는 경우 코드에서 알려진 폭 및 높이를 입력합니다.
    • URL에서 웹 사이트를 사용하는 경우 웹 사이트가 객체에 표시될 때 폭 및 높이를 조정합니다.
  5. 컨텐츠의 URL 추가:
    • 웹 사이트를 추가하려면 URL 필드에 입력합니다(예: www.Autodesk.co.kr).
    • 로컬 HTML 파일을 추가하려면 찾아보기 아이콘을 사용합니다. HTML은 오디오 및 비디오를 포함할 수 있습니다. HTML 파일은 포함된 오디오 및 비디오 파일을 참조할 수 있습니다. 지원되는 미디어 형식은 WebM(.webm), OGG(.ogg/.ogv) 및 WAV(.wav)입니다.
  6. 재질 편집기에서 웹 엔진이 적용될 객체에 할당된 재질을 재질로 드래그합니다.
  7. 텍스처 유형 설정:
    • 분산:

      환경이 이 텍스처에서 반영됩니다.

      1. 재질 편집기 재질 탭에서 분산 색상을 흰색으로 설정합니다.
      2. 재질 편집기 분산 탭에서 매핑 유형을 UV로 설정합니다. 필요에 따라 분산 텍스처를 회전합니다.
    • 발광:

      레이트레이싱에서 라이트 소스로 사용이 활성화되면 재질이 장면으로 라이트를 방출합니다.

      1. 재질 편집기 재질 탭에서 분산 색상을 검은색으로 설정합니다.
      2. 발광 탭에서 강도를 1.00으로 설정하고 색상을 흰색으로 설정합니다.
      3. 매핑 유형을 UV로 설정합니다. 필요에 따라 발광 텍스처를 회전합니다.
    • 분산 + 발광:

      이 텍스처는 분산에서만 사용할 수 있는 알파 채널 및 발광 속성이 필요할 때 사용됩니다.

      웹 페이지 배경을 투명하게 설정하는 HTML 예제 코드(알파):

      <style>

      body{

      background-color: rgba(0, 0, 0, 0);

      }

      </style>

      1. 재질 편집기 재질 탭에서 분산 색상을 흰색으로 설정합니다.
      2. 분산 텍스처 탭에서 알파 사용을 선택합니다.
      3. 발광 탭에서 강도를 1.00으로 설정하고 색상을 흰색으로 설정합니다.
      4. 분산 또는 발광 탭에서 매핑 유형을 UV로 설정합니다. 필요한 경우 텍스처를 회전합니다.

VRED - HTML5 커뮤니케이션

VRED와 HTML5 간의 인터랙션은 양방향 커뮤니케이션입니다. 다음은 VRED - HTML5의 예입니다.

연관된 Python 스크립트(sendToWebEngine)로 변형 세트(Home_Button)를 실행하여 특정 웹 엔진(Webengine_A)을 트리거하고 HTML 이벤트(VRED_HOME_Btn)를 웹 페이지로 보냅니다. 메시지를 수신하려면 웹 페이지에 이벤트 리스너가 있어야 합니다.

다음은 메시지를 수신하는 HTML 코드의 예제입니다.

<script>

document.addEventListener("VRED_HOME_Btn", Icon_HomeClick);

</script>

HTML5 - VRED 커뮤니케이션

img 요소와 URL은 웹 서버를 사용하여 웹 페이지에서 VRED로 Python 명령을 보내는 데 사용할 수 있습니다. 예: src = "http://localhost:8888?..... 웹 서버가 기본 설정에서 활성화되어야 합니다.

스위치 재료를 선택 0으로 설정하는 HTML 코드:

<script>

function r(){

var i = document.createElement("img");

i.src = "http://localhost:8888/python?value=setSwitchMaterialChoice('SwitchColor', 0)";

};

</script>

Icon_Anim이라는 VarianSet을 트리거하는 HTML 코드:

<script>

Icon_Click = function(event) {

var i = document.createElement("img");

i.src = "http://localhost:8888/variants?value=selectVariantSet('Icon_Anim')";

};

</script>