본문 바로가기

반응형

Position

Three.js 객체 변화주기(position, axesHelper(), scale, rotation ) 이번엔 저번에 만든 3d 객체의 위치를 이동시켜 보면서 익숙해져 보겠다. set() 함수를 이용하면 일일이 x,y,z 값을 하나 하나 정해주지 않고 한 번에 정의해줄 수 있다. mesh 생성후 mesh.position.x = 0.7; mesh.position.y = -0.6; mesh.position.z = 1; // 하나 하나 정의 mesh.position.set(0.7,-0.6,1) // 한 방에 정의 또 position.length(), position.distanceTo()등의 함수도 있는데 개체와 인자로 넣어준 객체 간의 거리를 나타낼 때 쓴다. console.log(mesh.position.distanceTo(camera.position)) 그 다음 axis 즉 x,y,z 축들을 기반으로 위치.. 더보기
<HTML/CSS>이쁜 메뉴바 만들기 (sticky) (fixed) 보통의 웹사이트를 보면 화면 상단에 메뉴바가 되었든 사이트의 로고가 되었든 우리가 스크롤을 내리면 밑으로 따라 내려오는 것을 볼 수가 있다. 처음 CSS를 배웠을 때 엄청 배우고 싶었고 그만큼 자주 쓰고 있으니 한 번 알아보도록 하자. See the Pen NWxrVOr by Sang Hoon Jeong (@DevilFront) on CodePen. 자 배운대로 스티키를 써 봤지만 그냥 sticky만 선언해주면 안되고 무조건 top, left,right 등 하나이상의 위치속성으로 나타내는 것이 필요하다. 단순히 스티키를 써주면 안되고 따라 내려오는 지점이 어딘지를 top 속성등을 이용해서 나타내주면 된다. 필수다 필수! See the Pen GRoqaPK by Sang Hoon Jeong (@DevilF.. 더보기

반응형