Three.js에서 WebGL(2) - CSS3DRenderer 사용해보기 -

three.js 의 CSS 3D Transform의 샘플을 참고로 15퍼즐을 작성해 보았습니다.

참고 소스:
htp // three js. 오 rg / 에어 mp ぇ s / # cs s3d_ 페리 오 ぢ c b
htp // 미니마 l. 베 / ぁ b / Sp 3D / 에 ぁ ぇ s / s ぃ 에에 ぁ mp ぃ ぇ d. HTML

CSS3DRender 로드

three.js 소스에있는 examples/js/renderers/CSS3DRenderer.js를 html에 추가
<script src="js/renderers/CSS3DRenderer.js"></script>


CSS3DRenderer 만들기

THREE.WebGLRenderer 대신 THREE.CSS3DRenderer
renderer = new THREE.CSS3DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); // 描画領域
renderer.domElement.style.position = 'absolute'; // スタイル設定 {position:absolute}
document.getElementById('container').appendChild(renderer.domElement); // 描画領域を#containerにappend


객체 추가

WebGL의 경우 PlaneGeometry 또는 Mesh를 사용했지만 CSS3DRenderer의 경우 DOM과 THREE.CSS3DObject를 사용하는 것 같습니다.
예를 들어 스타일 파일에
.box {
background: url("img/enikki.png");
width: 126px;
height: 126px;
}
부터
// DOM作成
var dom = document.createElement('div');
dom.className = "box";
// object作成
var object = new THREE.CSS3DObject(dom);
그러면 세로 126px, 가로 128px의 이미지 파일의 오브젝트를 작성할 수 있습니다.

분할 이미지를 만들 때

위의 DOM을 읽을 때 backgroundPosition 속성에서
dom.style.backgroundPosition = "-" + px + "px -" + py + "px";
로 설정하면 이미지의 왼쪽 상단에서 (px, py)에서 세로 126px, 가로 128px를 객체로 할 수 있습니다

퍼즐 만들기

15パズル 근처에서 검색하면 소스가 가득 나오므로 자세한 내용은 생략

이미지를 15 분할하여 각각을 객체화

오브젝트를 클릭할 때 이벤트를 등록, three.js는 ↓ 이런 느낌으로 낙진 dom.addEventListener("click", onPieceTouched, false); dom.addEventListener("touchstart", onPieceTouched, false);

클릭시 블록의 위치를 ​​바꿉니다

이미지가 취소되면 종료

샘플
h tp // 오도루마하라야. 기주 b. 이오/테 st/우 bgl_02. HTML

이런 느낌으로 할 수 있었습니다.


제목이 WebGL이지만 WebGL을 사용하지 않는 모순 ...