three.js
Three.js의 카메라 컨트롤

aframe Angular 2 CSS HTML html5-canvas JavaScript jQuery Node.js SVG TypeScript
수색…


소개

이 문서는 기존의 카메라 컨트롤을 씬에 쉽게 추가 할 수있는 방법과 커스텀 컨트롤 생성에 대한 지침을 제공합니다. 미리 만들어진 제어 스크립트는 라이브러리의 /examples/js/controls 폴더에서 찾을 수 있습니다.

궤도 제어

궤도 카메라는 사용자가 중심점을 중심으로 회전 할 수 있지만 특정 축을 잠근 채로 유지할 수있게하는 카메라입니다. 이것은 장면이 "벗어난"기울어 짐을 방지하기 때문에 매우 인기가 있습니다. 이 버전은 Y (수직) 축을 잠그고 사용자가 왼쪽, 가운데 및 오른쪽 마우스 버튼 (또는 특정 터치 이벤트)으로 궤도, 확대 / 축소 및 이동을 허용합니다.

index.html 

<html>
    <head>
        <title>Three.js Orbit Controller Example</title>
        <script src="/javascripts/three.js"></script>
        <script src="/javascripts/OrbitControls.js"></script>
    </head>
    <body>
        <script src="javascripts/scene.js"></script>
    </body>
</html>

scene.js 

var scene, renderer, camera;
var cube;
var controls;

init();
animate();

function init()
{
    renderer = new THREE.WebGLRenderer( {antialias:true} );
    var width = window.innerWidth;
    var height = window.innerHeight;
    renderer.setSize (width, height);
    document.body.appendChild (renderer.domElement);

    scene = new THREE.Scene();
    
    var cubeGeometry = new THREE.BoxGeometry (10,10,10);
    var cubeMaterial = new THREE.MeshBasicMaterial ({color: 0x1ec876});
    cube = new THREE.Mesh (cubeGeometry, cubeMaterial);

    cube.position.set (0, 0, 0);
    scene.add (cube);

    camera = new THREE.PerspectiveCamera (45, width/height, 1, 10000);
    camera.position.y = 160;
    camera.position.z = 400;
    camera.lookAt (new THREE.Vector3(0,0,0));

    controls = new THREE.OrbitControls (camera, renderer.domElement);
    
    var gridXZ = new THREE.GridHelper(100, 10);
    gridXZ.setColors( new THREE.Color(0xff0000), new THREE.Color(0xffffff) );
    scene.add(gridXZ);

}

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

OrbitControls 스크립트에는 수정할 수있는 몇 가지 설정이 있습니다. 이 코드는 잘 문서화되어 있으므로 OrbitControls.js 에서 그 코드를 확인하십시오. 예를 들어, 다음은 새로운 OrbitControls 객체에서 수정 된 코드 중 일부를 보여주는 코드 스 니펫입니다. 

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;
controls.autoRotate = true;

사용자 정의 카메라 제어 - 마우스 기반 슬라이딩

다음은 맞춤형 카메라 컨트롤러의 예입니다. 이것은 클라이언트 윈도우 내에서 마우스의 위치를 ​​읽은 다음 윈도우에서 마우스를 따라 움직이는 것처럼 카메라를 슬라이드시킵니다.

index.html 

<html>
    <head>
        <title>Three.js Custom Mouse Camera Control Example</title>
        <script src="/javascripts/three.js"></script>
    </head>
    <body>
        <script src="javascripts/scene.js"></script>
    </body>
</html>

scene.js 

var scene, renderer, camera;
var cube;
var cameraCenter = new THREE.Vector3();
var cameraHorzLimit = 50;
var cameraVertLimit = 50;
var mouse = new THREE.Vector2();

init();
animate();

function init()
{
    renderer = new THREE.WebGLRenderer( {antialias:true} );
    var width = window.innerWidth;
    var height = window.innerHeight;
    renderer.setSize (width, height);
    document.body.appendChild (renderer.domElement);
  
    scene = new THREE.Scene();
    
    var cubeGeometry = new THREE.BoxGeometry (10,10,10);
    var cubeMaterial = new THREE.MeshBasicMaterial ({color: 0x1ec876});
    cube = new THREE.Mesh (cubeGeometry, cubeMaterial);

    cube.position.set (0, 0, 0);
    scene.add (cube);

    camera = new THREE.PerspectiveCamera (45, width/height, 1, 10000);
    camera.position.y = 160;
    camera.position.z = 400;
    camera.lookAt (new THREE.Vector3(0,0,0));
    cameraCenter.x = camera.position.x;
    cameraCenter.y = camera.position.y;

    //set up mouse stuff
    document.addEventListener('mousemove', onDocumentMouseMove, false);
    window.addEventListener('resize', onWindowResize, false);
    
    var gridXZ = new THREE.GridHelper(100, 10);
    gridXZ.setColors( new THREE.Color(0xff0000), new THREE.Color(0xffffff) );
    scene.add(gridXZ);
}

function onWindowResize ()
{
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize (window.innerWidth, window.innerHeight);
}

function animate()
{   
    updateCamera();
    requestAnimationFrame ( animate );  
    renderer.render (scene, camera);
}

function updateCamera() {
    //offset the camera x/y based on the mouse's position in the window
    camera.position.x = cameraCenter.x + (cameraHorzLimit * mouse.x);
    camera.position.y = cameraCenter.y + (cameraVertLimit * mouse.y);
}

function onDocumentMouseMove(event) {
    event.preventDefault();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

보시다시피, 여기 장면의 모든 객체에 대해 할 수있는 것처럼 렌더링의 animate 단계에서 카메라 위치를 업데이트하는 것입니다. 이 경우 원래의 X 및 Y 좌표에서 오프셋 된 위치에 카메라의 위치를 ​​다시 지정하기 만하면됩니다. 이것은 쉽게 X와 Z 좌표, 또는 경로상의 점 또는 마우스의 위치와 전혀 관련이없는 전혀 다른 점일 수 있습니다.



Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow