Three.js에서 놀기 -OrbitControls로 카메라를 움직이자 -

17803 단어 three.js
Three.js day 7이 되었습니다.

오늘도 카메라를 사용하여 움직입니다.

1. 완성판



See the Pen OrbitControls by hiroya iizuka ( @ 히로야 요시즈카 )
on CodePen .


2. 참고문헌



SterField

ICS MEDIA

처음 Three.js

CodeGrid



3. 분해해 본다



지난번 , 마우스 좌표를 가져오고 mousemove 이벤트를 설정했습니다.



Three.js에는 카메라의 움직임을 돕는 많은 유용한 라이브러리가 있습니다.

오라일리 책에 따르면




· FirstPersonControls : 1인칭 시점의 슈팅 게임과 같은 동작을 하는 컨트롤.　

· FlyControls : 비행 시뮬레이터와 같은 컨트롤.

· TrackBallControls : 마우스(또는 트랙볼)를 사용하여 장면 내를 이동할 수 있는 컨트롤.

· OrbitControls : 특정 장면을 돌아다니는 궤도 위성을 시뮬레이션하는 컨트롤.




등 등 이외에도 많이 있습니다.

이번에는 OrbitControl.js를 사용합시다.



사용법



사용법은 매우 간단하며 주로 두 단계로 나뉩니다.



❶. OrbitControls 로드



GitHub OrbitControls.js 의 약 1000행에 걸친 소스 코드를 복사합니다.





js 디렉토리를 만들고 OrbitControls.js 파일을 만들고 그 안에 방금 복사한 내용을 붙여넣습니다.





가능하면 index.html 에 script 파일에서 이 파일을 불러 봅시다.




index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>

    //下記を追加
    <script src="js/OrbitControls.js"></script>

  </head>



여기서 사용할 준비가 되었습니다.




❷. 카메라 컨트롤러 만들기



OrbitControls 생성자는 아래와 같이 인수에 camera 객체를 취합니다. 





const controls = new THREE.OrbitControls(camera)



See the Pen OrbitControls (experimental) by hiroya iizuka ( @ 히로야 요시즈카 )
on CodePen .



<script async=""src="https://static.codepen.io/assets/embed/ei.js"/>

이것으로 완성입니다.

이렇게 간단하게, OrbitControls 를 사용할 수 있다니, 선인의 분들에게는 머리가 오르지 않습니다.






❸. 옵션을 붙인다.



enableDamping 와 autoRotate , autoRotateSpeed 를 붙이자.



enableDamping은 설정하여 드래그할 때 애니메이션을 부드럽게 합니다.

autoRotate는 자동으로 회전을 추가할 수 있습니다.



이것들을 설정할 때는, 애니메이션의 함수내에서, controls.update()를 쓸 필요가 있으므로, 주의해 주세요. 




 const controls = new THREE.OrbitControls(camera);
 controls.enableDamping = true;
 controls.autoRotate = true;
 controls.autoRotateSpeed = 1;


 function renderScene() {
      requestAnimationFrame(renderScene);
      controls.update();
      renderer.render(scene, camera);
 }



See the Pen OrbitControls by hiroya iizuka ( @ 히로야 요시즈카 )
on CodePen .



<script async=""src="https://static.codepen.io/assets/embed/ei.js"/>

좋은 느낌입니다!

그 밖에도, 여러가지 프로퍼티가 있으므로, 공식 를 참고에 적절히 만져 주세요.



최종 코드




index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
    <script src="js/OrbitControls.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <canvas class="stage"></canvas>

    <script>
      function init() {
        //レンダラーを作成
        const renderer = new THREE.WebGLRenderer({
          canvas: document.querySelector(".stage")
        });
        renderer.setSize(window.innerWidth, window.innerHeight);

        //シーンを作成
        const scene = new THREE.Scene();

        starNight();
        function starNight() {
          // 形状データを作成
          const geometry = new THREE.Geometry();

          for (let i = 0; i < 1000; i++) {
            const star = new THREE.Vector3();
            star.x = THREE.Math.randFloatSpread(3000);
            star.y = THREE.Math.randFloatSpread(3000);
            star.z = THREE.Math.randFloatSpread(3000);

            geometry.vertices.push(star);
          }

          // マテリアルを作成
          const material = new THREE.PointsMaterial({
            size: 10,
            color: 0xffffff
          });
          // 物体を作成
          const star = new THREE.Points(geometry, material);
          scene.add(star);
        }

        //カメラを作成
        const camera = new THREE.PerspectiveCamera(
          50,
          window.innerWidth / window.innerHeight,
          0.1,
          2000
        );

        const controls = new THREE.OrbitControls(camera);
        controls.enableDamping = true;
        controls.autoRotate = true;
        controls.autoRotateSpeed = 1;

        camera.position.set(0, 0, 1000);

        //球を作成
        const geometry = new THREE.SphereGeometry(100, 32, 32);
        const material = new THREE.MeshNormalMaterial();
        const mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        renderScene();

        //アニメーション
        function renderScene() {
          requestAnimationFrame(renderScene);
          controls.update();
          renderer.render(scene, camera);
        }
      }

      window.addEventListener("load", init);
    </script>
  </body>
</html>



OrbitControls는 선인의 지혜가 담긴 훌륭한 라이브러리였습니다.

그럼 또 내일~


Three.js에서 뛰어넘기기 - 카메라를 움직이자 Part.1 -
Expo에서 react-native에서 three.js 사용 (expo-three 도입)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage