Камера от третьего лица на Three.js

115
06 октября 2019, 14:00

Всем привет. Изучаю на досуге новую для себя тему - three.js не не обессудьте за глупый вопрос :)

Вообщем, я реализовал движения обьекта, а также вращение камеры вокруг него как в играх от 3го лица, но я хотел бы сделать, чтоб при движении камеры из стороны в сторону, обьект также поворачивался в ту же сторону, например я веду мышку вправо и обьект тоже поворачивается вправо. Не уверен, что смогу выложить куда-то, чтоб показать демку поэтому вот ссылка на gitlab:

https://gitlab.com/k0mar/drizzle

Установка в три шага:

npm i
npm run prod
node server.js

Логика камеры тута:

class ThirdPersonCamera extends Camera {
    boot(domElement) {
        this.cameraManager = new CameraManager(domElement);
    }
    tick(target = null) {
        if (target !== null) {
            this.cameraManager.target.applyMatrix4(target.matrixWorld);
            this.cameraManager.target.set(target.position.x, target.position.y + 2, target.position.z);
        }
        let targetX = this.cameraManager.target.x;
        let targetY = this.cameraManager.target.y;
        let targetZ = this.cameraManager.target.z;
        let radius = this.cameraManager.radius;
        let theta = this.cameraManager.theta;
        let phi = this.cameraManager.phi;
        let posX = targetX + radius * Math.sin(theta * Math.PI / 360) * Math.cos(phi * Math.PI / 360);
        let posY = targetY + radius * Math.sin(phi * Math.PI / 360);
        let posZ = targetZ + radius * Math.cos(theta * Math.PI / 360) * Math.cos(phi * Math.PI / 360);

        this.position.set(posX, posY, posZ);
        this.lookAt(this.cameraManager.target);
    }
}

А это CameraManager:

class CameraManager extends Manager {
    implements() {
        this.sensitivity = new Vector2(1, 1);
        this.target = new Vector3();
        this.character = {};
        this.radius = 15;
        this.theta = 0;
        this.phi = 0;
    }
    realised(deltaX, deltaY) {
        this.theta -= deltaX * this.sensitivity.x;
        this.theta %= 720;
        this.phi += deltaY * this.sensitivity.y;
        this.phi = Math.min(170, Math.max(-170, this.phi));
    }
    event() {
        this.boundLockedPointer = () => this.domElement.requestPointerLock();
        this.boundMouseMove = event => this.realised(event.movementX, event.movementY);
        this.domElement.addEventListener('mousedown', this.boundLockedPointer, false);
        this.domElement.addEventListener('mousemove', this.boundMouseMove, false);
    }
}

Метод tick в ThirdPersonCamera вызывает какждый фрейм, а target который в него приходит, это сам персонаж.

Спасибо :)

Answer 1

Вообщем все оказалось проще чем я думал)) Нужно было крутить обьект по кватернионам камеры:

let quaternion = new Quaternion(target.quaternion.x, this.quaternion.y, target.quaternion.z, this.quaternion.w);
target.setRotationFromQuaternion(quaternion);
target.quaternion.normalize();
target.rotateY(Math.PI); //Поворачиваем обьект на 180 градусов
READ ALSO
Как вычесть цвет в определенном месте из градиента?

Как вычесть цвет в определенном месте из градиента?

Есть много разных градиентов и есть всплывающее попап окноОкно имеет цвет определенного выбранного пользователем градиента, и в правом...

122
Нужна помощь с функцией JS

Нужна помощь с функцией JS

Смысл функции в том , что она берет элементы внутри 3 блоков , там находится по 1 элементу , но таких конструкций по 3 блока много и срабатывает...

145
? вместо эмодзи

? вместо эмодзи

Гугл скрипт связан вебхуком с телеграм ботомЯ хочу, чтобы сообщение из бота разбивалось на нужные мне куски и отправлялось в гугл таблицу

131
Прошу помощи с обобщённые типами (generics)

Прошу помощи с обобщённые типами (generics)

Не буду здесь приводить тонны своего кода, покажу на примере в чём проблема

120