https://lgsignatureartgallery.com/special3/
LG SIGNATURE ART GALLERY - 3차 기획 전시
lgsignatureartgallery.com
이 레퍼런스 코드 붙여서 사용, 일단 옮겨만 쓴거라 추후에 쓸때는 불필요한 코드 찾아서 수정하기
유니티 Webgl 빌드 후 수정한 부분
TemplateData에 style.css 생성
style.css코드
body {
padding: 0;
margin: 0;
}
#unity-container {
position: absolute;
}
#unity-container.unity-desktop {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#unity-container.unity-mobile {
width: 100%;
height: 100%;
}
#unity-canvas {
background: #231f20;
}
.unity-mobile #unity-canvas {
width: 100%;
height: 100%;
}
#cf2 {
position: relative;
height: auto;
width: 30vw;
margin: 36vh auto;
}
#cf2 img {
width: 30vw;
position: absolute;
background-color: black;
left: 0;
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
}
#cf2 img.transparent {
opacity: 0;
}
#cf2 img {
animation-name: cf4FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 22s;
animation-direction: alternate;
}
@keyframes cf4FadeInOut {
0% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
92% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#cf2 img:nth-of-type(1) {
animation-delay: 16s;
}
#cf2 img:nth-of-type(2) {
animation-delay: 12s;
}
#cf2 img:nth-of-type(3) {
animation-delay: 8s;
}
#cf2 img:nth-of-type(4) {
animation-delay: 4s;
}
#cf2 img:nth-of-type(5) {
animation-delay: 0;
}
.layui-layer {
margin: 0;
padding: 0;
border: 0;
background-color: black;
}
.loader {
border: 9px solid #f3f3f3; /* Light grey */
border-top: 9px solid black; /* Blue */
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.layui-layer-setwin .layui-layer-close2 {
transform: scale(1.2, 1.2);
}
/*
@media only screen and (hover: none) {
.layui-layer-setwin .layui-layer-close2 {
transform: scale(1.5, 1.5);
}
} */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
#cf2 {
position: relative;
width: 50vw;
height: 20vh;
margin: 10vh auto;
}
#cf2 img {
width: 50vw;
}
.layui-layer-setwin .layui-layer-close2 {
transform: scale(1.2, 1.2);
}
}
@media only screen and (max-device-width: 767px) {
#cf2 {
position: relative;
height: auto;
width: 80vw;
margin: 30vh auto;
}
#cf2 img {
width: 80vw;
}
.layui-layer-setwin .layui-layer-close2 {
transform: scale(2, 2);
}
}
기존 Webgl빌드한 index.html 코드
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | WebglTest</title>
</head>
<body style="text-align: center">
<canvas id="unity-canvas" width=960 height=600 style="width: 960px; height: 600px; background: #231F20"></canvas>
<script src="Build/WebglTest.loader.js"></script>
<script>
createUnityInstance(document.querySelector("#unity-canvas"), {
dataUrl: "Build/WebglTest.data",
frameworkUrl: "Build/WebglTest.framework.js",
codeUrl: "Build/WebglTest.wasm",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "WebglTest",
productVersion: "0.1",
// matchWebGLToCanvasSize: false, // Uncomment this to separately control WebGL canvas render size and DOM element size.
// devicePixelRatio: 1, // Uncomment this to override low DPI rendering on high DPI displays.
});
</script>
</body>
</html>
기존 index.html을 수정한 코드
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | WebglTest</title>
<!-- 새로 추가한 부분 시작 -->
<link rel="stylesheet" href="./TemplateData/style.css" />
<!-- 새로 추가한 부분 끝 -->
</head>
<body style="text-align: center">
<!-- 새로 추가한 부분 시작-->
<div
id="unity-container"
class="unity-desktop"
style="width: 100%; height: 100%"
>
<canvas id="unity-canvas"></canvas>
</div>
<script>
var buildUrl = "PC";
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
buildUrl = "Mobile";
}
var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loader = document.querySelector("#loading-screen");
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
container.className = "unity-mobile";
config.devicePixelRatio = 2;
if (window.devicePixelRatio < 2) {
config.devicePixelRatio = 1;
}
} else {
canvas.style.width = "100%";
canvas.style.height = "100%";
}
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {})
.then((unityInstance) => {
this.unityInstance = unityInstance;
const x = document.getElementById("tip-first");
x.style.display = "block";
loader.style.display = "none";
})
.catch((message) => {
alert(message);
});
};
document.body.appendChild(script);
hello();
document.body.addEventListener("touchstart", tapped, false);
document.body.addEventListener("click", tapped, false);
</script>
<!-- 새로 추가한 부분 끝-->
<script src="Build/WebglTest.loader.js"></script>
<script>
createUnityInstance(document.querySelector("#unity-canvas"), {
dataUrl: "Build/WebglTest.data",
frameworkUrl: "Build/WebglTest.framework.js",
codeUrl: "Build/WebglTest.wasm",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "WebglTest",
productVersion: "0.1",
// matchWebGLToCanvasSize: false, // Uncomment this to separately control WebGL canvas render size and DOM element size.
// devicePixelRatio: 1, // Uncomment this to override low DPI rendering on high DPI displays.
});
</script>
</body>
</html>주석 처리로
<!-- 새로 추가한 부분 시작 -->
~~~~~~~~~~~~~~~~~~~~
<!-- 새로 추가한 부분 끝 -->
추가된 코드 부분 표시했음.
'툴 > 유니티' 카테고리의 다른 글
| Unity Dotween 유니티 닷트윈 사용법 (1) | 2021.09.02 |
|---|---|
| Webgl 웹브라우저 화면맞춤, 데스크탑용 (0) | 2021.09.01 |
| [AR] 마커 이미지 인식률 측정방법 arcoreimg (0) | 2021.08.20 |
| 유니티 2020 버전 Webgl 무한로딩 문제 (1) | 2021.08.16 |
| 유니티 Webgl 실행시 웹브라우저의 URL주소 받기 (0) | 2021.08.16 |