0

Требуется написать алгоритм для вращения и движения камеры вокруг объекта. Пробовал через синусы и косинусы - не получилось.

Существует ли какая-либо библиотека на эту тему? Буду также рад просто подсказкам в построении алгоритма. Заранее спасибо.

camera.position.x = Math.cos(camera.degree) * 1100;
camera.position.z = Math.sin(camera.degree) * 1100;
camera.lookAt(new THREE.Vector3(0, 0, 0));
render.render(scene, camera);

Здесь camera.degree - угол, на который необходимо провращать камеру относительно объекта. Определяется разностями координат в событии mousemove.

5
  • а в чём у вас была проблема ? выложите код, поясните что именно не получилось...
    – ampawd
    12 янв 2017 в 21:01
  • и ещё конкретнее скажите что за вращение нужно ?
    – ampawd
    12 янв 2017 в 21:13
  • скопирую: Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. Вопросы без явного описания проблемы бесполезны для остальных посетителей.
    – Insider
    12 янв 2017 в 21:21
  • Three.js имеет в своем наборе OrbitControls и TrackballControls, позволяющие вращать камеру вокруг объекта с помощью мыши. И да, желательно увидеть код того, что не получилось с синусами и косинусами, а то действительно не понятно - какое вращение нужно. 12 янв 2017 в 21:25
  • Небольшое замечание про camera.lookAt(new THREE.Vector3(0, 0, 0));: использовать new или .clone() (так как этот метод опять же вызывает new) в цикле анимации - не нужно; лучше повторно использовать ранее объявленную переменную/объект или использовать метод .copy() 13 янв 2017 в 16:57

2 ответа 2

2

Для задания стабильной угловой скорости нам понадобится объект THREE.Clock() (документация).

Далее все более-менее просто:

var clock = new THREE.Clock();
var angle = 0; // текущий угол
var angularSpeed = THREE.Math.degToRad(20); // угловая скорость - градусов в секунду
var delta = 0;
var radius = 20;
function animate() {
  delta = clock.getDelta(); // getDelta() - возвращает интервал в долях секунды
  requestAnimationFrame(animate);

  camera.position.x = Math.cos(angle) * radius;
  camera.position.z = Math.sin(angle) * radius;
  angle += angularSpeed * delta; // приращение угла

  camera.lookAt(mesh.position);

  renderer.render(scene, camera);
}

jsfiddle пример

Другой вариант, если нужно организовать вращение через управление мышью, то вполне сойдет использование OrbitControls.

Все, что для этого нужно:

создать объект контрола

var controls = new THREE.OrbitControls(camera, renderer.domElement);

в случе, если нужно, чтобы вращение вокруг объекта было только по горизонтали, то нужно ограничить минимальный и максимальный углы вращения по вертикали, так как они могут быть в пределах [0 .. Math.PI], то половина от 180 градусов (Math.PI) будет 90 (Math.PI / 2)

controls.minPolarAngle = Math.PI / 2;
controls.maxPolarAngle = Math.PI / 2;

после чего в цикле анимации можно добавить

controls.update();

jsfiddle пример

2

поясню мат часть:

вот это

camera.position.x = Math.cos(camera.degree) * 1100;
camera.position.z = Math.sin(camera.degree) * 1100;

параметрическое уравнение окружности, поэтому камера постоянно вращается в одной плоскости вокруг оси Y описывая окружность на сфере.

если нужно движение по сфере тогда нужно применять параметрическое уравнение сферы, где радиусом будет расстояние от камеры до точки в которую она смотрит, а центром начало коорднат в мировой системе (world space), иначе говоря (0, 0, 0).

но необходимо учитывать, что в webgl (opengl) обозначения для координатных осей отличаются от стандартных математических обозначений.

в webgl (x+ - направо, y+ - наверх, z+ - на себя).

в математике чаще всего (x+ - направо, у+ - на себя, z+ - наверх).

поэтому и уравнение будет отличаться.

пример в jsfiddle

и тут

let camera, scene, renderer, light, cube, sphere;
let cameraParams = {
    distance: 1,
    mdown: new THREE.Vector2(),
    mmove: new THREE.Vector2(),
    phi: 25,
    theta: -15,
    phim: 0,
    thetam: 0,
    fov: 53
};
let updateCamera = function() {
    camera.position.x = cameraParams.distance * Math.sin(cameraParams.theta * degToRad) * Math.cos(cameraParams.phi * degToRad);
    camera.position.y = cameraParams.distance * Math.sin(cameraParams.phi * degToRad);
    camera.position.z = cameraParams.distance * Math.cos(cameraParams.theta * degToRad) * Math.cos(cameraParams.phi * degToRad);

    camera.lookAt(cube.position);
};
const degToRad = Math.PI / 180;

function init() {
    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(50.0, window.innerWidth / window.innerHeight, 0.1, 1000);
    renderer.setClearColor(0xffffff);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
}

function initScene() {
    let cubeGeom = new THREE.BoxGeometry(60, 60, 60);
    let cubeMat = new THREE.MeshPhongMaterial({
        color: 0xaa0000
    });
    cube = new THREE.Mesh(cubeGeom, cubeMat);
    cube.position.set(-100, 0, 0);
    scene.add(cube);

    let sphereGeom = new THREE.SphereGeometry(45, 60, 60);
    let sphereMat = new THREE.MeshPhongMaterial({
        color: 0x0000ff
    });
    sphere = new THREE.Mesh(sphereGeom, sphereMat);
    sphere.position.set(100, 0, 0);
    scene.add(sphere);

    let plane = new THREE.GridHelper(250, 25);
    scene.add(plane);

    light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(-25, 50, 50);
    scene.add(camera);
    camera.add(light);

    camera.position.set(0, 0, 500);
    cameraParams.distance = camera.position.clone().sub(cube.position).length();
    updateCamera();
}

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

document.onmousedown = function(e) {
    cameraParams.mdown.set(e.clientX, e.clientY);
    cameraParams.thetam = cameraParams.theta;
    cameraParams.phim = cameraParams.phi;

    document.onmousemove = function(e) {
        cameraParams.mmove.set(e.clientX, e.clientY);
        cameraParams.theta = -(cameraParams.mmove.x - cameraParams.mdown.x) * 0.5 + cameraParams.thetam;
        cameraParams.phi = (cameraParams.mmove.y - cameraParams.mdown.y) * 0.5 + cameraParams.phim;
        cameraParams.phi = Math.min(90, Math.max(-90, cameraParams.phi));

        updateCamera();
    };

    document.onmouseup = function(e) {
        document.onmousemove = null;
    };
};



init();
initScene();
render();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.