카메라를 마우스 드래그 & 휠을 이용하여 카메라를 로테이션하고 줌을 하는방법입니다.
<!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)은 무제한 입니다.
controls.maxPolarAngle = Math.PI / 2.1; // 카메라 하단 각도
controls.minPolarAngle = Math.PI / 10; // 카메라 상단 각도
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
controls.update(); // 마우스로인해 변경된 카메라값을 업데이트 합니다.
}
animate();
</script>
</body>
</html>
출처: https://dev-t-blog.tistory.com/22?category=683744 [dev-t-blog]
'프론트엔드 개발 놀이터 > Three.js' 카테고리의 다른 글
| 2020년 51가지 js 게임 오픈소스 (0) | 2020.02.28 |
|---|---|
| 2019년 25가지 Three.js 예제 (0) | 2020.02.28 |
| 최신버전 DirectionalLight 에서 그림자가 잘리는 현상 (0) | 2020.02.26 |
| Three.js를 사용하여 3D 모델에 대한 색상 사용자 지정자 앱을 빌드 하는 방법 (0) | 2020.02.25 |
| gltf 모델에 그림자 투사방법 (0) | 2020.02.06 |