고정 헤더 영역
상세 컨텐츠
본문
퍼온곳들
http://blog.daum.net/wisepocket/70
//////////////////////////////////////////////////////////////////////////////////////////////////
인터넷에 올라와 있는 강좌를 따라해 본다.
Script
TestCubeMove.html
구문 해석
<!DOCTYPE html>
http://haneulnoon.tistory.com/167
http://opentutorials.org/course/11/78
html 문서 제일 첫 줄에는 DOCTYPE가 명시되어 있어야 한다.
웹 기술의 진보에 따라 html도 변화 되는데 변화에 따라 브라우저가 html을 해석하는 방식도 변화가 생겼다.
이를 극복하기 위해 브라우저에게 해당 html이 어떤 표준에 따른 것인지를 알려주는 것을
dtd( Data Type Definition )라 한다.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
메타 태그의 name을 viewport로 설정하게 되면 디바이스 ( 컴퓨터, 스마트폰 등 )의 display 영역을
의미하게 된다. 속성값의 width는 디바이스의 영역을 의미한다.
디폴트 값으로는 980으로 되어 있고 200-10000까지 값을 설정 할 수 있다.
user-scalable은 사용자가 확대 축소를 허용할 지의 여부이다.
minimum-scale과 maximum-scale은 뷰포트의 scale value이다. 기본값은 0.25이고 0-10까지 값을
설정할 수 있다.
//Cube
var geo=new THREE.CubeGeometry(200, 200, 200);
for(var i=0 ; i< geo.faces.length;++i){
geo.faces[i].color.setHex(Math.random()*0xffffff);}
var material =new THREE.MeshBasicMaterial({ vertexColors : THREE.FaceColors});
cube=new THREE.Mesh(geo, material);
cube.position.y=150;
scene.add(cube);
setHex는 hexadecimal을 말하는 것으로 16진법이란 뜻
Math.random()은 0~1값이 랜덤하게 나온다. 0xffffff가 색상 표시의 16진수 최대값이기 때문에
0~1값을 곱해서 표현가능한 색상값중 하나를 가져온다는 얘기
function animate(){
requestAnimationFrame(animate);
render();
stats.update();}
function render(){
renderer.render(scene, camera);}
requestAnimationFrame( callback )
animate함수를 콜백으로 지정해주는 거라고 하는데 콜백에 대해 찾아보자면.
퍼온곳
http://719121812.blog.me/20181743918
//////////////////////////////////////////////////////////////////////
콜백이란 디자인 패턴 중 하나인 옵저버 패턴에서 나온 개념으로 객체의 상태변화( 이벤트 )가
발생 하였을 경우에 이러한 사실을 함수를 통해 전달하게 되는데, 이를 콜백 함수라고 한다.
자바스크립트에서는 콜백함수가 키보드나 마우스 클릭과 같은 디바이스 이벤트 뿐만 아니라 Ajax, 데이터
처리 등 많은 부분에서 사용되고 있다.
다른 퍼온곳
//////////////////////////////////////////////////////////////////////
자바 스크립트에서는 함수도 하나의 자료형으로 인식하므로 매개변수로 전달할 수 있다.
이와같이 매개변수로 전달하는 함수를 콜백 함수라고 한다.
무슨말인지 아직 잘 모르겠다. 우선 넘어가고
---------------------------------------------------------------------------------------------
이렇게 큐브를 만들고 화면에 띄우면 크롬에서 바로 명령어를 먹일 수 있다.
크롬에서 우클릭 요소 검사를 선택하거나 F12를 눌러 개발자 도구를 열면
입력할 수 있는 console창이 뜬다.
console창에 cube.rotation.y=0.8; 이렇게 쓰면 큐브가 회전한것을 볼 수 있다.
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
html 문서 안에서 마우스 클릭 이벤트가 발생할 때 onDocumentMouseDown 함수로 처리한다
touchstart 이벤트 타입은 모바일에서 터치를 할 때 발생하며 touchmove는 터치한 부분을 움직일 때
발생하는 이벤트 타입이다
function onDocumentMouseDown(event){
event.preventDefault();
document.addEventListener('mousemove',onDocumentMouseMove, false );
document.addEventListener('mouseup', onDocumentMouseUp, false);
document.addEventListener('mouseout', onDocumentMouseOut, false);
mouseXonMouseDown=event.clientX-windowHalfX;
targetRotationOnMouseDown=targetRotation;}
function onDocumentMouseMove(event){
info.innerHTML="드래그하면 돌아갑니다";
mouseX=event.clientX-indowHalfX;
targetRotation=targetRotationOnMouseDown+(mouseX-mouseXonMouseDown)*0.02;}
function onDocumentMouseUp(event){
info.innerHTML="드래그하세요.";
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );}
function onDocumentMouseOut(event){
info.innerHTML="드래그 하세요. ";
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );}
큐브가 회전할 때는 마우스가 클릭하고 움직일 때만 작동하게 하려고 한다. 그러기 위해서는 마우스가
움직일때( mousemove )이벤트를 추가해준다.
그리고 mouseup( 마우스 버튼을 땟을 때 ) 와 mouseout( 마우스가 창을 벗어날 때 )는 움직이지
않아야 하므로 이경우에도 이벤트를 등록해준다.
mouseXonDown 변수에 마우스가 최초로 클릭했을 때 값을 넣어준다. 이 때 event.clientX( 이벤트가 발생한 포인트의 X )값에 클라이언트 영역폭의 중심값인 windowHalfX를 빼 줘서 값을 보정해서 넣는다.
targetRotation은 실제적으로 큐브를 회전시킬 변수이다.
targetRotationOnMouseDown에 이 값을 저장해 둔다.
onDocumentMouseMove 함수안의 내용들이 마우스를 클릭하고 움직이는 동안 실제적인 움직임을 준다.
여기서 info.innerHTML에 텍스트를 배정하여 상단 표시 글을 바꾸는 기능을 한다.
function onDocumentTouchStart( event ) {
info.innerHTML="모바일!!";
if ( event.touches.length === 1 ) {
event.preventDefault();
mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
targetRotationOnMouseDown = targetRotation;}}
function onDocumentTouchMove( event ) {
if ( event.touches.length === 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;}}
