카메라를 마우스 드래그 & 휠을 이용하여 카메라를 로테이션하고 줌을 하는방법입니다.


자세한건 아래의 소스에 주석을 적어놨습니다.


추가된것이 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>


+ Recent posts