Javascript의 Html5 CSS3 3D 큐브
한동안 나는 Flash, Silverlight 등과 같은 플러그인을 사용하지 않고 일반 웹 브라우저에서 3D 개체를 만드는 실험을 해왔습니다. 여기에 표시된 큐브는 이전에 만든 다른 3D 웹 사이트에서 가져온 것입니다.
WebGL 브라우저에서 복잡한 3D 모델을 렌더링할 수 있습니다. 그러나 여기서는 다양한 도구를 사용하여 3D 개체를 만드는 방법을 살펴보겠습니다. CSS3 일반 2D HTML 요소를 가져와 3D 공간에 투영할 수 있는 변환 명령입니다.
일반 Html 요소에 3D 변환을 사용하면 Iframe 콘텐츠, 이미지 또는 기타 HTML 요소를 3D로 투영하여 정말 깔끔한 효과를 만들 수 있다는 장점이 있습니다.
실시간 미리보기
다음은 일부 이미지와 텍스트를 사용한 큐브 샘플입니다. 마우스를 사용하여 큐브를 회전시킬 수 있습니다.
호환성
여기에 표시된 3D 큐브는 다른 3D 큐브에서 사용하는 일반 회전, 크기 조정, 변환 방법 대신 CSS3 매트릭스 변환을 사용하므로 IE11에서 잘 작동합니다. IE11뿐만 아니라 iOS용 Firefox, Chrome, Safari 및 Mobile Safari에서도 테스트되었습니다.
HTML 소스
여기서 중요한 점은 "Cube.js" 파일을 포함한다는 것입니다. 우리는 또한 필요합니다 제이쿼리, 그것도 포함됩니다.
ID가 my3Dsurface 인 Div에는 3D 큐브가 포함됩니다. data-facewidth="256" 속성을 확인하세요. 이는 큐브 면의 크기를 지정합니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Css3 3D Sample</title>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/cube.js"></script>
<script src="js/sample.js"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="my3Dsurface" class="js3dsurface" data-facewidth="256"></div>
</body>
</html>
자바스크립트 소스
다음으로 Js3DSurface 의 인스턴스를 생성하고 큐브의 각 면에 표시될 콘텐츠 배열을 전달합니다. 이 예에서는 이미지와 간단한 HTML 콘텐츠를 사용하고 있습니다. Iframe, 비디오 태그 등과 같은 더 복잡한 HTML을 추가할 수 있습니다.
또한 마우스를 사용하여 큐브를 회전할 수 있도록 3개의 이벤트 핸들러를 추가합니다. 마우스 왼쪽 버튼을 누른 상태에서 마우스가 움직일 때, 마우스의 새로운 X 및 Y 위치를 전달하는 adjRot를 호출합니다.
var cube;
var mouseisdown = false;
$(document).ready(function () {
var faces = new Array();
faces.push('<img src="images/manic-miner-willy.jpg" />');
faces.push('<img src="images/terminator-t-800-head-design.png" />');
faces.push('<div class=
"plain"><h1>3D Cube!</h1><p>Some pla
in html content to be projected onto the side of the cube! Works
in the latest versions of Chrome, Firefox, IE, Safari, Safari Mobile and other Html5 modern browsers.</div>');
faces.push('<img src="images/sinclair-c5.jpg" />');
faces.push('<img src="images/terminator-t-800-head-design.png" />');
faces.push('<img src="images/sinclair-c5.jpg" />');
cube = new Js3DSurface("my3Dsurface", faces);
cube._backSurface.addEventListener('mousemove', mousemove, false);
document.body.addEventListener('mousedown', mousedown, false);
document.body.addEventListener('mouseup', mouseup, false);
});
function mousedown(e) {
mouseisdown = true;
if (e != null) {
e.stopPropagation();
e.preventDefault();
}
returnfalse;
}
function mouseup(e) {
mouseisdown = false;
if (e != null) {
e.stopPropagation();
e.preventDefault();
}
returnfalse;
}
function mousemove(e) {
if (mouseisdown) {
var _off = $(cube._backSurface).offset();
var x = e.clientX - _off.left;
var y = e.clientY - _off.top;
y += $(window).scrollTop();
adjRot(x, y);
}
}
function adjRot(x, y) {
var w = $(cube._backSurface).width();
var h = $(cube._backSurface).height();
var step = 10;
var ry = (((x - (w / 2)) / w) * step);
var rx = (((y - (h / 2)) / h) * step);
cube._cubes[0]._Torque._Y = ry;
cube._cubes[0]._Torque._X = rx;
}
아래 링크에서 직접 샘플 코드를 받아 멋진 3D 프로젝트 HTML 큐브 만들기를 시작해 보세요!
의견 제출
귀하의 의견이 제출되었습니다. 당사 웹사이트에 게시하기 전에 이를 검토하겠습니다.
