카메라를 마우스 드래그 & 휠을 이용하여 카메라를 로테이션하고 줌을 하는방법입니다.
자세한건 아래의 소스에 주석을 적어놨습니다.
추가된것이 OrbitControls.js 입니다. 그리고 OrbitControls.js 사용할때 panSpeed를 제어하는 부분이 있는데
이 부분은 아직 이해하지 못했습니다.
mouse_camera.zip↑↑↑↑↑↑↑↑↑
전체 소스 파일 입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<!-- Three js -->
<script src="https://threejs.org/build/three.min.js"></script>
<!-- WebGL 지원유무 https://github.com/mrdoob/three.js/blob/master/examples/js/WebGL.js 참고 -->
<script src="./WebGL.js"></script>
<!-- OrbitControls.js allow the camera to orbit around a target 마우스와 카메라를 상호작용하게 합니다. -->
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
// 브라우저가 WebGL을 지원하는지 체크
if (WEBGL.isWebGLAvailable()) {
console.log('이 브라우저는 WEBGL을 지원합니다.');
} else {
console.log('이 브라우저는 WEBGL을 지원하지 않습니다.');
}
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
let geometry = new THREE.BoxGeometry(1, 1, 1);
let material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
let cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
// 카메라와 마우스 상호작용을 위해 OrbitControls를 설정합니다.
controls = new THREE.OrbitControls(camera);
controls.rotateSpeed = 1.0; // 마우스로 카메라를 회전시킬 속도입니다. 기본값(Float)은 1입니다.
controls.zoomSpeed = 1.2; // 마우스 휠로 카메라를 줌 시키는 속도 입니다. 기본값(Float)은 1입니다.
controls.panSpeed = 0.8; // 패닝 속도 입니다. 기본값(Float)은 1입니다.
controls.minDistance = 5; // 마우스 휠로 카메라 거리 조작시 최소 값. 기본값(Float)은 0 입니다.
controls.maxDistance = 100; // 마우스 휠로 카메라 거리 조작시 최대 값. 기본값(Float)은 무제한 입니다.
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
controls.update(); // 마우스로인해 변경된 카메라값을 업데이트 합니다.
}
animate();
</script>
</body>
</html>
'Javascript' 카테고리의 다른 글
| [threejs] OBJ Loader 로 고양이 모델 로드하기-04 (1) | 2018.12.13 |
|---|---|
| [threejs] Light를 추가해보자-03 (0) | 2018.12.12 |
| [threejs] 듀토리얼-01 (0) | 2018.12.10 |
| [ionic3] Ionic 3 시작하며 정리한 내용 (0) | 2018.12.06 |
| [nwjs] 윈도우에서 Node Webkit 에서 nw-gyp 설치하기 (0) | 2018.11.30 |