ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko nb ko ko ko en en ko ko ko ko ko ko ko ko ko en ko ko ko ko ko ko ko en ko en ko ko en nb ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko en ko ko ko en ko ko ko ko en es ko ko ko ko ko ko en
10. 자유롭게 화면 조절하는 방법 OrbitControls – Three.js 강좌 | 디자인베이스
안녕하세요. 이번 시간에는 화면을 마우스로 회전하고, 줌인 줌아웃을 할 수 있도록 만들어볼게요. 복잡한 코드 필요 없이 three.js에서 제공하는 orbitControls를 추가 설치 후 코드 몇 줄만 적어주면 끝납니다.
*디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// OrbitControls 추가 const controls = new OrbitControls(camera, renderer.domElement); controls.minDistance = 2; controls.maxDistance = 4; controls.maxPolarAngle = Math.PI / 2; controls.update();
마지막으로 animate 함수 안에 넣어서 업데이트 해주면 됩니다. 이제 화면 속 3D 공간을 마우스로 자유롭게 움직일 수 있습니다. 클릭 & 드래그를 하면 화면을 회전시킬 수 있고, 마우스 휠을 움직이면 줌인 줌아웃이 가능합니다.
function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); } animate()
#19 이전단계 되돌리기, 다음단계, 히스토리 패널 사용법 (Undo, Redo, History Panel) – 포토샵 기초 강좌
#25 CSS로 마우스 커서 조절하기 – 웹 코딩 강좌
#1 프로토파이 강좌 소개 – 프로토파이 강좌
클릭 한 번으로 웹사이트 화면 캡쳐뜨는 방법(크롬 확장 프로그램)
인공지능이 채색을 대신 해준다?!
웹 주소 URL 짧게 만들어 주는 웹사이트
감성충만 빛 그림자 서식류 목업
맥북 프로 16인치 목업
10. 자유롭게 화면 조절하는 방법 OrbitControls – Three.js 강좌
27. 귀여운 꿀벌 일러스트 쉽게 만드는 방법 – 일러스트레이터 기초 강좌
09. 3d 물체에 그림자 적용하는 방법 – Three.js 강좌
26. 프리폼 그라디언트로 5초 만에 부드러운 그라데이션 배경 만드는 방법 – 일러스트레이터 기초 강좌
Youtube Instagram Pinterest Naver Blog
포토샵 일러스트레이터 피그마 스케치 XD 프로토파이
웹디자인 웹코딩 인비전 프린서플 Lottie Three.js
소개 매거진 디자인 사전 북마크 무료 소스 문의하기 멤버십
© 2022 Designbase. All rights reserved.